Menu Close
    Start a Project Request quote Reading list Switch to dark mode

    Here we create Collection Grid , edit/add grid row and installer in Magento2

    Here we create Collection Grid , edit/add grid row and installer in Magento2

    Before starting the code section, let us create the directory structure that we will need for create admin grid edit/add grid row and installer.


    Now, as we have the directory structure ready, we will now create file as per module requirement in given sequence:

    1.First, we have to create the module configuration file named module.xml in app/code/Webkul/Grid/etc

    2.Then, we have to create the module registration  file named registration.php in app/code/Webkul/Grid

    3.Now, we have to create the menu configuration file named menu.xml in app/code/Webkul/Grid/etc/adminhtml

    4.Now, we have to create the Installer  file named InstallSchema.php in app/code/Webkul/Grid/Setup.

    5.Now,  for table ‘wk_grid_records’ which created by installer we have to create the Model   file named Grid.php in app/code/Webkul/Grid/Model .

    6.Now,  for table ‘wk_grid_records’ which created by installer we have to create the Resource  Model   file named Grid.php in app/code/Webkul/Grid/Model/ResourceModel.

    7.Now,  for table ‘wk_grid_records’ which created by installer we have to create the Collection file named Collection.php in app/code/Webkul/Grid/Model/ResourceModel/Grid.

    8. After above steps now we will create ui component for grid row list. We’ll create grid_record_grid_list.xml in  app/code/Webkul/Grid/view/adminhtml/ui_component folder as following.

    9. create di.xml file for map data provider with collection in app/code/Webkul/Grid/etc.

    10. For action we will create Action Class Action.php in app/code/Webkul/Grid/Ui/Component/Listing/Grid/Column

    11. Our UI component and data provider become ready . now we will create controller file index.php in app/code/Webkul/Grid/Controller/Adminhtml/Grid

    12. Create route file routes.xml in app/code/Webkul/Grid/etc/adminhtml

    13. And for grid display create layout file grid_grid_index.xml in app/code/Webkul/Grid/view/adminhtml/layout

    14. Above i missed one model of status so now i will create Status.php in app/code/Webkul/Grid/Model

    15. After these all our grid ready in admin section as follow


    16. Now we’ll start how to save/edit  data in table using form

    Above in our Ui component file  grid_record_grid_list.xml we already add path of add form url now we’ll create controller file AddRow.php in app/code/Webkul/Grid/Controller/Adminhtml/Grid

    17. Create block file of form AddRow.php in app/code/Webkul/Grid/Block/Adminhtml/Grid

    18. Create block file of form with field  Form.php in app/code/Webkul/Grid/Block/Adminhtml/Grid/Edit

    19. For render this form create layout file grid_grid_addrow.xml in app/code/Webkul/Grid/view/adminhtml/layout

    20. Now when we create on “Add New Row” Button on grid then form will open as follow

    21. Create  controller Save.php in app/code/Webkul/Grid/Controller/Adminhtml/Grid for save record

    22. After save row data it will display in grid as follow

    23. Now we create controller for mass delete MassDelete.php in app/code/Webkul/Grid/Controller/Adminhtml/Grid

    25. After that you can delete row form grid as


    Now Create grid , insert , Edit and update (Magento2 admin grid data CRUD ) feature done

    Thanks 🙂


    . . .

    Comments (2)

    Add Your Comment

  • rj
    Interface ‘Webkul\Grid\Api\Data\GridInterface’ not found
    • ashutosh srivastava
      you should create this interface in Webkul/Grid/Api/Data folder
  • Back to Top
    Hire Us!
    Brief us about your requirements and we'll get back to you.
    Woo! Hooy!
    We have just recieved your project brief and our expert will contact you shortly.
    Send Again