Read More
Read More
Menu Close

    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

    Searching for an experienced
    Magento Company ?
    Read More

    Thanks 🙂

    . . .
    Discuss on Helpdesk

    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 (Moderator)
      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.
  • vishnu salunke
    Thanks it works like charm…
  • John
    I am getting Error Not registered handle in admin grid? plz replay
  • Vinaya Maheshwari
    Followed your tutorial, but menu redirecting me to Dashboard instead of grid, please reply.
    • vishnu salunke
      if you have the folder like Controllers.make change as a Controller. and then apply the setup:upgrade command.after that you still face the same error make new file like abc.php in Controller/Adminhtml/Grid. and according to this file you need to change the menu.xml action like {action=”grid/grid/abc”}.then clean the cache.and check the out put..
      Note:in abc.php write the simple echo statement..
      if you receive the output like echo statement.then change the action as before like:{action=”grid/grid/index”}.once again clean the cache and check the result..
      i hope this is helpfull to you..
  • PHP Developer
    I am getting this error after implementing above,

    Fatal error: Method
    MagentoUiTemplateEngineXhtmlResult::__toString() must not throw an
    exception, caught TypeError: Argument 1 passed to
    must be an instance of
    MagentoFrameworkApiSearchSearchResultInterface, instance of
    NeopayStripeModelResourceModelStripeCollection given, called in
    on line 284 in /var/www/html/buenavida/vendor/magento/module-ui/Component/Wrapper/UiComponent.php on line 0

  • govind89
    Hi i am getting error as “syntax error, unexpected ‘namespace’ (T_NAMESPACE)” What i should do i am new to magento 2. I have checked twice all the files.

    Please help me to Sort Out.

  • Cvince
    I am getting error if i put this form inside Tab. but without tab it’s working. When i am going to save m getting error as following :
    TypeError: $.data(…) is undefined

    Please help me.

  • Nantha kumar
    Mass Delete is not working

    Error : Exception #0 (MagentoFrameworkExceptionLocalizedException): Invalid method MagentoFrameworkViewElementUiComponentDataProviderDocument::delete

    • Vishal
      public function execute()
      $collection = $this->_filter->getCollection($this->_collectionFactory->create());
      $recordDeleted = 0;
      foreach ($collection as $item) {
      $deleteItem = $this->_objectManager->get(‘Magneto\InquiryForm\Model\Grid’)->load($item->getId());
      $this->messageManager->addSuccess(__(‘A total of %1 record(s) have been deleted.’, $recordDeleted));

      return $this->resultFactory->create(ResultFactory::TYPE_REDIRECT)->setPath(‘*/*/index’);

  • mohammed8960
    hi, in order to work please update your article by the following
    in routes.xml : should be
    Controllers folder name : should be: Controller
    in grid_record_grid_list.xml file PageGridDataProvider : should be : MagentoFrameworkViewElementUiComponentDataProviderDataProvider
  • Yashdeeo Gorkhe
    I am also getting blank page when click on Add new button. No Form is showing.

    It seems like Form is not connecting with addRow.php file which route is app/code/Webkul/Grid/Block/Adminhtml/Grid

    I am adding a screenshot

    Can anyone please help me to solve this?

  • gaurav agrawal
    I am getting a blank page when I click on Add New Button. WebKul team, can you help me solve this issue.
    • Vishal
      php bin/magento setup:di:compile
  • Hiren
    why use interface?
  • Hiren
    here What is use of interface?
  • mageDev0688
    @disqus_EKZq2HIx6T:disqus I have followed the step 16 and it’s redirecting me on the Dashboard not on the Grid. I am using Magento ver. 2.1.3
  • vivek
    Dear sir plz help me,
    my problem is When I click “Add New Row”. I’m not getting form i’m getting only header & footer Bu Not Display Form.
  • Jonathan La Mela
    I’ve tried but when I show the controller I see this message :

    Recoverable Error: Argument 1 passed to MagentoFrameworkViewElementUiComponentDataProviderDataProvider::searchResultToOutput() must implement interface MagentoFrameworkApiSearchSearchResultInterface, instance of BesolutionEpricesyncronizationModelResourceModelRicarichiCollection given, called in /Applications/XAMPP/xamppfiles/htdocs/epricemagento/vendor/magento/framework/View/Element/UiComponent/DataProvider/DataProvider.php on line 284 and defined in /Applications/XAMPP/xamppfiles/htdocs/epricemagento/vendor/magento/framework/View/Element/UiComponent/DataProvider/DataProvider.php on line 245

    How I can solve ?

  • Prashant Patel
    “Add New Row”. I’m not getting form instead i’m getting blank screen.
  • pinku k
    At line no. 21 after click “Add New Row”. I’m not getting form instead i’m getting blank screen.
  • mahesh
    in this file error how to reslove.
    please help

    Warning: DOMDocument::loadXML(): Start tag expected, ‘<‘ not found in Entity, line: 10 in /var/www/html/mahesh/magento210/vendor/magento/framework/View/Element/UiComponent/Config/DomMerger.php on line 324

  • Sachin S
    Class PageGridDataProvider does not exist on click of Grid Manager
    • Abhishek Singh
      Sachin S replace PageGridDataProvider with MagentoFrameworkViewElementUiComponentDataProviderDataProvider

      in app/code/NameSpace/ModuleName/view/adminhtml/ui_component folder files.

  • krishnakumar
    Hi can anyone help me regarding this error,i can’t figure out what the error is about.

    a:4:{i:0;s:435:”Recoverable Error: Argument 1 passed to WebkulGridControllerAdminhtmlGridIndex::__construct() must be an instance of MagentoBackendAppActionContext, instance of MagentoFrameworkObjectManagerObjectManager given, called in C:wampwwwMagento6vendormagentoframeworkObjectManagerFactoryAbstractFactory.php on line 93 and defined in C:wampwwwMagento6appcodeWebkulGridControllerAdminhtmlGridindex.php on line 24″;i:1;s:3089:”#0 C:wampwwwMagento6appcodeWebkulGridControllerAdminhtmlGridindex.php(24): MagentoFrameworkAppErrorHandler->handler(4096, ‘Argument 1 pass…’, ‘C:\wamp\www\Mag…’, 24, Array)
    #1 C:wampwwwMagento6vendormagentoframeworkObjectManagerFactoryAbstractFactory.php(93): WebkulGridControllerAdminhtmlGridIndex->__construct(Object(MagentoFrameworkObjectManagerObjectManager))
    #2 C:wampwwwMagento6vendormagentoframeworkObjectManagerFactoryCompiled.php(88): MagentoFrameworkObjectManagerFactoryAbstractFactory->createObject(‘Webkul\Grid\Con…’, Array)
    #3 C:wampwwwMagento6vendormagentoframeworkObjectManagerObjectManager.php(57): MagentoFrameworkObjectManagerFactoryCompiled->create(‘Webkul\Grid\Con…’, Array)
    #4 C:wampwwwMagento6vendormagentoframeworkAppActionFactory.php(40): MagentoFrameworkObjectManagerObjectManager->create(‘Webkul\Grid\Con…’)
    #5 C:wampwwwMagento6vendormagentoframeworkAppRouterBase.php(300): MagentoFrameworkAppActionFactory->create(‘Webkul\Grid\Con…’)
    #6 C:wampwwwMagento6vendormagentoframeworkAppRouterBase.php(161): MagentoFrameworkAppRouterBase->matchAction(Object(MagentoFrameworkAppRequestHttp), Array)
    #7 C:wampwwwMagento6vendormagentoframeworkAppFrontController.php(50): MagentoFrameworkAppRouterBase->match(Object(MagentoFrameworkAppRequestHttp))
    #8 C:wampwwwMagento6vendormagentoframeworkInterceptionInterceptor.php(74): MagentoFrameworkAppFrontController->dispatch(Object(MagentoFrameworkAppRequestHttp))
    #9 C:wampwwwMagento6vendormagentoframeworkInterceptionChainChain.php(70): MagentoFrameworkAppFrontControllerInterceptor->___callParent(‘dispatch’, Array)
    #10 C:wampwwwMagento6vendormagentoframeworkInterceptionInterceptor.php(138): MagentoFrameworkInterceptionChainChain->invokeNext(‘Magento\Framewo…’, ‘dispatch’, Object(MagentoFrameworkAppFrontControllerInterceptor), Array, ‘install’)
    #11 C:wampwwwMagento6vendormagentoframeworkModulePluginDbStatusValidator.php(69): MagentoFrameworkAppFrontControllerInterceptor->MagentoFrameworkInterception{closure}(Object(MagentoFrameworkAppRequestHttp))
    #12 C:wampwwwMagento6vendormagentoframeworkInterceptionInterceptor.php(142): MagentoFrameworkModulePluginDbStatusValidator->aroundDispatch(Object(MagentoFrameworkAppFrontControllerInterceptor), Object(Closure), Object(MagentoFrameworkAppRequestHttp))
    #13 C:wampwwwMagento6vargenerationMagentoFrameworkAppFrontControllerInterceptor.php(26): MagentoFrameworkAppFrontControllerInterceptor->___callPlugins(‘dispatch’, Array, Array)
    #14 C:wampwwwMagento6vendormagentoframeworkAppHttp.php(135): MagentoFrameworkAppFrontControllerInterceptor->dispatch(Object(MagentoFrameworkAppRequestHttp))
    #15 C:wampwwwMagento6vendormagentoframeworkAppBootstrap.php(258): MagentoFrameworkAppHttp->launch()
    #16 C:wampwwwMagento6index.php(39): MagentoFrameworkAppBootstrap->run(Object(MagentoFrameworkAppHttp))
    #17 {main}”;s:3:”url”;s:108:”/Magento6/admin_ph7fnk/grid/grid/index/key/9df30dd61ea0f4a4b169698e8038e1e2c74e23ea7c29c26322053641145d44f7/”;s:11:”script_name”;s:19:”/Magento6/index.php”;}

  • Iulian Șpac
    Hello, I have the following problem when I want to delete items (code from the last screen MassDelete.php controller). Can you help me? Thanks
  • suresh V.R
    hi I am getting this error ‘Fatal error: Interface ‘WebkulGridApiDataGridInterface’ not found in app/code/Webkul/Grid/Model/Grid.php on line 15 ‘
    • Abhishek Singh
      hi @suresh_v_r:disqus follow point no. 6 .
  • abdul
    module not dislay in admin
    • Abhishek Singh
      Hi please follow updated blog post steps for grid data CRUD feature.
  • Ritika
    I am getting error attached in screenshot and system log showing main.CRITICAL: Class
    WebkulGridModelStatus does not exist
    • Abhishek Singh
      follow updated blog post steps for grid data CRUD feature.
  • Anamika
    After following all the above steps to create a admin grid. No grid is displaying in my admin panel, instead it will display only header and footer section. Can you tell me, why the grid is not displaying.
    • Abhishek Singh
      now post updated you can check it
  • Mitch Thompson
    As of 3-24-2016, these steps are no longer even close to the design of a base magento module. Theres no Grid folder in the module root for instance.
  • Preet Kaur
    When I follow your steps I got this error, Please let me know how to solve this issue
    a:4:{i:0;s:177:”Warning: DOMDocument::loadXML(): Extra content at the end of the document in Entity, line: 12 in /var/www/html/magento2/lib/internal/Magento/Framework/Config/Dom.php on line 365″;i:1;s:6307:”#0 [internal function]: MagentoFrameworkAppErrorHandler->handler(2, ‘DOMDocument::lo…’, ‘/var/www/html/m…’, 365, Array)
  • pawan
    When I follow your steps I got this error
    :4:{i:0;s:176:”Warning: DOMDocument::loadXML(): Extra content at the end of the document in Entity

    Could you let me know why this happend

  • Miller Gómez Sánchez
    Please, could you explain the function:
    protected function __construct ()
    app / code / Webkul / Grid / Block / Adminhtml / Grid / Grid.php
    • pawan
      Hello Miller Gómez Sánchez
      I have also followed the steps Here .
      But when I go to the admin and clcik on the Webkul Grid View it disaply me blank view .
      Can you please let me know where I did wrong .
      Or Share your Extension with me . So It will essay to me .


  • sachin
    Getting Error: while compilation

    Class WebkulGridModelStatus does not exist

    Downloaded magento2 from magento connect.

    • webkul
      install magento from composer and then try
  • Back to Top