Menu Close
    Start a Project Request quote Reading list Switch to dark mode
    magento-hyperlocal-marketplace-guide

    How to create a grid using UI Component in Magento2

    To create a grid in admin panel you have to define a controller first.
    To define a controller create a new file:
    app/code/Webkul/Hello/Controller/Adminhtml/Employee/Index.php

    Here Webkul is a Namespace, Hello is a module name.


    After defining Index.php we have to define a layout file for the same controller.
    For which we need to create file:
    app/code/Webkul/Hello/view/adminhtml/layout/hello_employee_index.xml

    Here, we simply register our UI component.


    Now, after registering a Ui component, now we need to create it:

    app/code/Webkul/Hello/view/adminhtml/ui_component/webkul_emp_data.xml

    Here we define grid’s columns, filters and actions.


    In the above file we defined data provider under data source tag.
    which brings concept of dependency injection.
    Now we need to create di file under,
    app/code/Webkul/Hello/etc/di.xml


    Here, “wk_emp_data” is our main table.

    To display available columns for the status we define a separate class:

    app/code/Webkul/Hello/Model/Employee/Source/Status.php


    Now, to define actions, we need to create a file at:
    app/code/Webkul/Hello/Ui/Component/Listing/Column/EmployeeActions.php


    That’s all to create a grid in admin panel using magento 2.

    Now, to perform action you need to create actions under controller.

    . . .

    Comments (4)

    Add Your Comment

  • Akshay
    Getting error :
    Fatal error: Method Magento\Ui\TemplateEngine\Xhtml\Result::__toString() must not throw an exception, caught TypeError: Argument 1 passed to Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider::searchResultToOutput() must implement interface Magento\Framework\Api\Search\SearchResultInterface, instance of Ktpl\Gallery\Model\ResourceModel\Event\Collection given, called in /var/www/html/magento2.6/vendor/magento/framework/View/Element/UiComponent/DataProvider/DataProvider.php on line 284 in /var/www/html/magento2.6/vendor/magento/module-ui/Component/Wrapper/UiComponent.php on line 0
  • Ewall Solutions
    where can i find the GridCollection file
    • Webkul Support

      Hello,
      you need to create it under WebkulHelloModelResourceModelEmployeeGridCollection.
      The concept behind using this file is: if you want to add join or filter on your collection before displaying it on your Grid, then we need to create this file, by which our collection and grid collection gives different collection according to our need.
      And if you do not want to alter your collection for Grid, then you can use your Collection also.
      Hope this will helps you.

      Thank you.

  • How to apply join in collection in UIComponent Grid in magento 2
  • 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