Redeem Now
Read More
Read now
Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    magento-hyperlocal-marketplace-guide

    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.

    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

    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*


    46 comments

  • 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
    MagentoFrameworkViewElementUiComponentDataProviderDataProvider::searchResultToOutput()
    must be an instance of
    MagentoFrameworkApiSearchSearchResultInterface, instance of
    NeopayStripeModelResourceModelStripeCollection given, called in
    /var/www/html/buenavida/vendor/magento/framework/View/Element/UiComponent/DataProvider/DataProvider.php
    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

  • 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 http://www.awesomescreenshot.com/image/2406695/0196fdd7cba73afff3f54bebb6913ac5

    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.
  • 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
    Hello,
    /var/www/html/mahesh/magento210/app/code/Zalw/AdvanceMessage/view/adminhtml/ui_component/grid_record_grid_list.xml
    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.
      thanks
  • 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
    HI
    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 ()
    Route:
    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 .

      Thanks

  • sachin
    Getting Error: while compilation

    [ReflectionException]
    Class WebkulGridModelStatus does not exist

    Downloaded magento2 from magento connect.

    • webkul
      install magento from composer and then try
  • Back to Top
    css.php
    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
    Close