Read More
Read More
Menu Close

    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:

    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:

    Here, we simply register our UI component.

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

    Searching for an experienced
    Magento 2 Company ?
    Read More


    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,

    Here, “wk_emp_data” is our main table.

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


    Now, to define actions, we need to create a file at:

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

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

    . . .
    Discuss on Helpdesk

    Leave a Comment

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


  • 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

      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