How to Create a Grid in Magento 2

adminbackendgridmagento2

I need to create a simple grid in admin section, which contains all orders filtered by customer's email. I can't figure it out how I can fill the grid with custom data. All the examples found online create a custom table and then populate the grid with the data retrieved by that table. I don't need it. I just want to get all orders filtered by customer's email as I mentioned before.
Thank you in advance.

Best Answer

I know that it is not as simple that follow a tutorial but I recommend you to check the Magento 2 CMS core module.

You will see how Magento creates CMS block and pages grid.

Then copy/paste and adapt the impacted files to follow your needs.

You will learn more features this way and become more independent.

This is a non exhaustive list of useful files :

vendor/magento/module-cms/view/adminhtml/ui_component/cms_block_listing.xml
vendor/magento/module-cms/view/adminhtml/ui_component/cms_block_form.xml
vendor/magento/module-cms/view/adminhtml/layout/cms_block_edit.xml
vendor/magento/module-cms/view/adminhtml/layout/cms_block_index.xml
vendor/magento/module-cms/view/adminhtml/layout/cms_block_new.xml
vendor/magento/module-cms/view/adminhtml/templates/page/edit/form/renderer/content.phtml
vendor/magento/module-cms/Block/Adminhtml/Page/Grid/Renderer/Action/UrlBuilder.php
vendor/magento/module-cms/Block/Adminhtml/Block/Edit/*.php
vendor/magento/module-cms/Controller/Adminhtml/Block/*.php
vendor/magento/module-cms/Model/Block/DataProvider.php
vendor/magento/module-cms/Model/Block/Source/IsActive.php
vendor/magento/module-cms/Model/ResourceModel/Block/Grid/Collection.php
vendor/magento/module-cms/Model/ResourceModel/Block/Relation/Store/ReadHandler.php
vendor/magento/module-cms/Model/ResourceModel/Block/Relation/Store/SaveHandler.php
vendor/magento/module-cms/etc/di.xml

I hope it will be useful for you.

In order to populate the grid data, create your custom Grid Collection as Datasource or reuse the order grid collection.

<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="cms_page_listing_data_source" xsi:type="string">Magento\Cms\Model\ResourceModel\Page\Grid\Collection</item>
            <item name="cms_block_listing_data_source" xsi:type="string">Magento\Cms\Model\ResourceModel\Block\Grid\Collection</item>
        </argument>
    </arguments>
</type>

<type name="Magento\Cms\Model\ResourceModel\Block\Grid\Collection">
    <arguments>
        <argument name="mainTable" xsi:type="string">cms_block</argument>
        <argument name="eventPrefix" xsi:type="string">cms_block_grid_collection</argument>
        <argument name="eventObject" xsi:type="string">block_grid_collection</argument>
        <argument name="resourceModel" xsi:type="string">Magento\Cms\Model\ResourceModel\Block</argument>
    </arguments>
</type>

For orders in vendor/magento/module-sales/etc/di.xml:799

<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
    <arguments>
        <argument name="collections" xsi:type="array">
            <item name="sales_order_grid_data_source" xsi:type="string">Magento\Sales\Model\ResourceModel\Order\Grid\Collection</item>
            <item name="sales_order_invoice_grid_data_source" xsi:type="string">Magento\Sales\Model\ResourceModel\Order\Invoice\Grid\Collection</item>
            <item name="sales_order_shipment_grid_data_source" xsi:type="string">Magento\Sales\Model\ResourceModel\Order\Shipment\Grid\Collection</item>
            <item name="sales_order_creditmemo_grid_data_source" xsi:type="string">Magento\Sales\Model\ResourceModel\Order\Creditmemo\Grid\Collection</item>
            <item name="sales_order_view_invoice_grid_data_source" xsi:type="string">Magento\Sales\Model\ResourceModel\Order\Invoice\Orders\Grid\Collection</item>
            <item name="sales_order_view_shipment_grid_data_source" xsi:type="string">Magento\Sales\Model\ResourceModel\Order\Shipment\Order\Grid\Collection</item>
            <item name="sales_order_view_creditmemo_grid_data_source" xsi:type="string">Magento\Sales\Model\ResourceModel\Order\Creditmemo\Order\Grid\Collection</item>
        </argument>
    </arguments>
</type>

Feel free to ask some extra details.

Related Solutions

Magento 2 – Customize Admin Sales Order Grid Collection

You could use a plugin on Magento/Framework/View/Element/UiComponent/DataProvider/Reporting and its search() method.

Just create di.xml in your custom module Vendor/Module/etc/adminhtml/di.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Framework\View\Element\UiComponent\DataProvider\Reporting">
        <plugin name="sales_grid_collection" type="Vendor\Module\Model\Plugin\Sales\Order\Grid"/>
    </type>
</config>

and plugin

namespace Vendor\Module\Model\Plugin\Sales\Order;

class Grid {

    public static $table = 'sales_order_grid';


    /**
     *
     */
    public function afterSearch($intercepter, $collection) {

        if ($collection->getMainTable() === $collection->getConnection()->getTableName(self::$table)) {      

            // retrieve where clause
            $where = $collection->getSelect()->getPart(\Magento\Framework\DB\Select::WHERE);

            // ...
            // works with $where
            // ...

            // set the new where clause    
            $collection->getSelect()->setPart(\Magento\Framework\DB\Select::WHERE, $where);                

        }

        return $collection;

    }

}

Magento – Custom Column Sorting in Admin Grid – Magento 2

For this you have to make custom data provider. You can make custom data provider in following steps :

For the corresponding grid go to Vendor\Module\etc\di.xml and find below lines :<virtualType name="Vendor\Module\Model\ResourceModel\SomeModel\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
Edit the line and call your custom data provider, some thing like this:

<virtualType name="Vendor\Module\Model\ResourceModel\SomeModel\Collection" type="Vendor\Module\Ui\Component\Listing\CustomDataProvider">

Now create file CustomDataProvider.php in directory Vendor\Module\Ui\Component\Listing with the following content:

 class CustomDataProvider extends \Magento\Framework\View\Element

 \UiComponent\DataProvider\SearchResult
 {
     protected function _initSelect()
     {
         parent::_initSelect();
         $this->getSelect()->joinLeft(
             [
                 'secondTable' => $this->getTable('second_table_name_from_where_data_is_coming')
             ], 
             'main_table.practitioner_id = secondTable.practitioner_id', 
             [
                 'practitioner_id'
             ]
         );

         return $this;
     }
 }

Flush cache and test again.

Best Answer

Related Solutions

Magento 2 – Customize Admin Sales Order Grid Collection

Magento – Custom Column Sorting in Admin Grid – Magento 2

Related Topic