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

    Create 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, we have to create the Interface  file named GridInterface.php in app/code/Webkul/Grid/Api/Data

    7.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.

    8.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.

    9. 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.

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

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

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

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

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

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

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


    17. 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

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

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

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

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

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

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

    24. 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.

    Download sample code form github

    Thanks 🙂


    . . .

    Leave a Comment

    Your email address will not be published. Required fields are marked*


  • altaf
    Thank you for given this
  • Soundar
    Nice blog for beginner of Magento
    • Suraj Kumar
      Hello There, Thanks for your appreciation. It will boost us to create more blogs like this.
  • Senthil
    Thank you. It is working fine.
    May I know how the Form.php in Block/AdminHtml/Grid/Edit/Form.php is linked to /addrow page. I am not able to understand that.
  • Hannes Stefani
    how can i display all the data on a seperated page ? like the products page?
    • Webkul Support
      Thank you for the contact. We will try to cover this part in next blog.
  • Dhaval Mistry
    If I want to display my grid data in customer side then what should I do?
  • Dhaval Mistry
    Thank you so much This is really very helpful.
  • 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