Read More
Read More
Menu Close

    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.

    app/code/Webkul/Grid
    app/code/Webkul/Grid/etc
    app/code/Webkul/Grid/etc/Adminhtml
    app/code/Webkul/Grid/Block/Adminhtml
    app/code/Webkul/Grid/Block/Adminhtml/Grid
    app/code/Webkul/Grid/Block/Adminhtml/Grid/Edit
    app/code/Webkul/Grid/Model
    app/code/Webkul/Grid/Model/ResourceModel
    app/code/Webkul/Grid/Model/ResourceModel/Grid
    app/code/Webkul/Grid/Setup
    app/code/Webkul/Grid/Controllers/Adminhtml
    app/code/Webkul/Grid/view/adminhtml/layout
    app/code/Webkul/Grid/view/adminhtml/templates

    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

    Searching for an experienced
    Magento Company ?
    Read More

    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

    Selection_063

     

    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

    Selection_064

    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

    Selection_065

    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

    Selection_066

     

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

    Thanks 🙂

     

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


    2 comments

  • rj
    Interface ‘Webkul\Grid\Api\Data\GridInterface’ not found
    • ashutosh srivastava (Moderator)
      you should create this interface in Webkul/Grid/Api/Data folder
  • Back to Top