Create custom grid in admin using ui component in magento 2

Question 1

I have done all necessary changes to create a grid in admin but I can not see the grid in my menu. I can see only title of a page in the menu but after that its showing blank.
Module — Demo/Offers/
Router name — admin_offers

/etc/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">
 <virtualType name="Demo\Offers\Model\ResourceModel\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
 <arguments>
 <argument name="mainTable" xsi:type="string">demo_offers</argument>
 <argument name="resourceModel" xsi:type="string">Demo\Offers\Model\ResourceModel\Offers</argument>
 </arguments>
 </virtualType>
 <type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
 <arguments>
 <argument name="collections" xsi:type="array">
 <item name="admin_offers_listing_data_source" xsi:type="string">Demo\Offers\Model\ResourceModel\Grid\Collection</item>
 </argument>
 </arguments>
 </type>
</config>

Controller/Adminhtml/Index/Index.php

namespace Demo\Offers\Controller\Adminhtml\Index;
use \Magento\Backend\App\Action\Context;
use \Magento\Framework\View\Result\PageFactory;
class Index extends \Magento\Framework\App\Action\Action
{
 public function __construct(Context $context,PageFactory $resultPageFactory)
 {
 $this->resultPageFactory = $resultPageFactory;
 return parent::__construct($context);
 }
 public function execute()
 {
 $resultPage = $this->resultPageFactory->create();
 $resultPage->setActiveMenu("Demo_Offers::top");
 $resultPage->getConfig()->getTitle()->prepend((__('Manage All Offers')));
 return $resultPage;
 }
}

view/adminhtml/layout/demo_offers_index_index.xml

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
 <body>
 <referenceContainer name="content">
 <uiComponent name="admin_offers_listing"/>
 </referenceContainer>
 </body>
</page>

view/adminhtml/ui_component/admin_offers_listing.xml

<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
 <argument name="context" xsi:type="configurableObject">
 <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\Context</argument>
 <argument name="namespace" xsi:type="string">admin_offers_listing</argument>
 </argument>
 <argument name="data" xsi:type="array">
 <item name="js_config" xsi:type="array">
 <item name="provider" xsi:type="string">admin_offers_listing.admin_offers_listing_data_source</item>
 <item name="deps" xsi:type="string">admin_offers_listing.admin_offers_listing_data_source</item>
 </item>
 <item name="spinner" xsi:type="string">admin_offers_columns</item>
 <item name="buttons" xsi:type="array">
 <item name="add" xsi:type="array">
 <item name="name" xsi:type="string">add</item>
 <item name="label" xsi:type="string" translate="true">Add New Offer</item>
 <item name="class" xsi:type="string">primary</item>
 <item name="url" xsi:type="string">*/*/new</item>
 </item>
 </item>
 </argument>
 <dataSource name="admin_offers_listing_data_source">
 <argument name="dataProvider" xsi:type="configurableObject">
 <argument name="class" xsi:type="string">Magento\Framework\View\Element\UiComponent\DataProvider\DataProvider</argument>
 <argument name="name" xsi:type="string">admin_offers_listing_data_source</argument>
 <argument name="primaryFieldName" xsi:type="string">offer_id</argument>
 <argument name="requestFieldName" xsi:type="string">id</argument>
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
 <item name="update_url" xsi:type="url" path="mui/index/render"/>
 <item name="storageConfig" xsi:type="array">
 <item name="indexField" xsi:type="string">offer_id</item>
 </item>
 </item>
 </argument>
 </argument>
 <argument name="data" xsi:type="array">
 <item name="js_config" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
 </item>
 </argument>
 </dataSource>
 <listingToolbar name="listing_top">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="template" xsi:type="string">ui/grid/toolbar</item>
 </item>
 </argument>
 <bookmark name="bookmarks">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/bookmarks/bookmarks</item>
 <item name="displayArea" xsi:type="string">dataGridActions</item>
 <item name="storageConfig" xsi:type="array">
 <item name="saveUrl" xsi:type="url" path="mui/bookmark/save"/>
 <item name="deleteUrl" xsi:type="url" path="mui/bookmark/delete"/>
 <item name="namespace" xsi:type="string">admin_offers_listing</item>
 </item>
 </item>
 </argument>
 </bookmark>
 <columnsControls name="columns_controls">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="columnsData" xsi:type="array">
 <item name="provider" xsi:type="string">admin_offers_listing.admin_offers_listing.admin_offers_columns</item>
 </item>
 <item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
 <item name="displayArea" xsi:type="string">dataGridActions</item>
 </item>
 </argument>
 </columnsControls>
 <filters name="listing_filters">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="displayArea" xsi:type="string">dataGridFilters</item>
 <item name="dataScope" xsi:type="string">filters</item>
 <item name="storageConfig" xsi:type="array">
 <item name="provider" xsi:type="string">admin_offers_listing.admin_offers_listing.listing_top.bookmarks</item>
 <item name="namespace" xsi:type="string">current.filters</item>
 </item>
 <item name="childDefaults" xsi:type="array">
 <item name="provider" xsi:type="string">admin_offers_listing.admin_offers_listing.listing_top.listing_filters</item>
 <item name="imports" xsi:type="array">
 <item name="visible" xsi:type="string">admin_offers_listing.admin_offers_listing.listing_top.bookmarks:current.columns.${ $.index }.visible</item>
 </item>
 </item>
 </item>
 </argument>
 <filterRange name="offer_id">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="dataScope" xsi:type="string">offer_id</item>
 <item name="label" xsi:type="string" translate="true">ID</item>
 <item name="childDefaults" xsi:type="array">
 <item name="provider" xsi:type="string">admin_offers_listing.admin_offers_listing.listing_top.listing_filters</item>
 </item>
 </item>
 </argument>
 </filterRange>
 </filters>
 <massaction name="listing_massaction">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="selectProvider" xsi:type="string">admin_offers_listing.admin_offers_listing.admin_offers_columns.ids</item>
 <item name="component" xsi:type="string">Magento_Ui/js/grid/tree-massactions</item>
 <item name="indexField" xsi:type="string">offer_id</item>
 </item>
 </argument>
 <action name="delete">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="type" xsi:type="string">delete</item>
 <item name="label" xsi:type="string" translate="true">delete</item>
 <item name="url" xsi:type="url" path="admin_offer/index/massDel"/>
 </item>
 </argument>
 </action>
 </massaction>
 <paging name="listing_paging">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="storageConfig" xsi:type="array">
 <item name="provider" xsi:type="string">admin_offers_listing.admin_offers_listing.listing_top.bookmarks</item>
 <item name="namespace" xsi:type="string">current.paging</item>
 </item>
 <item name="selectProvider" xsi:type="string">admin_offers_listing.admin_offers_listing.admin_offers_columns.ids</item>
 <item name="displayArea" xsi:type="string">bottom</item>
 </item>
 </argument>
 </paging>
 </listingToolbar>
 <columns name="admin_offers_columns">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="storageConfig" xsi:type="array">
 <item name="provider" xsi:type="string">admin_offers_listing.admin_offers_listing.listing_top.bookmarks</item>
 <item name="namespace" xsi:type="string">current</item>
 </item>
 <item name="childDefaults" xsi:type="array">
 <item name="fieldAction" xsi:type="array">
 <item name="provider" xsi:type="string">admin_offers_listing.admin_offers_listing.admin_offers_columns.actions</item>
 <item name="target" xsi:type="string">applyAction</item>
 <item name="params" xsi:type="array">
 <item name="0" xsi:type="string">edit</item>
 <item name="1" xsi:type="string">${ $.$data.rowIndex }</item>
 </item>
 </item>
 <item name="storageConfig" xsi:type="array">
 <item name="provider" xsi:type="string">admin_offers_listing.admin_offers_listing.listing_top.bookmarks</item>
 <item name="root" xsi:type="string">columns.${ $.index }</item>
 <item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
 </item>
 </item>
 </item>
 </argument>
 <selectionsColumn name="ids" sortOrder="0">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="indexField" xsi:type="string">offer_id</item>
 </item>
 </argument>
 </selectionsColumn>
 <column name="offer_id">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="sortOrder" xsi:type="number">10</item>
 <item name="filter" xsi:type="string">textRange</item>
 <item name="sorting" xsi:type="string">asc</item>
 <item name="label" xsi:type="string" translate="true">ID</item>
 </item>
 </argument>
 </column>
 <column name="offer_title">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="sortOrder" xsi:type="number">20</item>
 <item name="filter" xsi:type="string">text</item>
 <item name="editor" xsi:type="array">
 <item name="editorType" xsi:type="string">text</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">true</item>
 </item>
 </item>
 <item name="label" xsi:type="string" translate="true">Offer Title</item>
 </item>
 </argument>
 </column>
 <column name="offer_link">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">text</item>
 <item name="label" xsi:type="string" translate="true">Offer Link</item>
 <item name="sortOrder" xsi:type="number">30</item>
 </item>
 </argument>
 </column>
 <column name="offer_img">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">offer img</item>
 <item name="sortOrder" xsi:type="number">40</item>
 </item>
 </argument>
 </column>
 <column name="from_date">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">dateRange</item>
 <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
 <item name="dataType" xsi:type="string">date</item>
 <item name="label" xsi:type="string" translate="true">from_date</item>
 <item name="sortOrder" xsi:type="number">50</item>
 </item>
 </argument>
 </column>
 <column name="to_date">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">dateRange</item>
 <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/date</item>
 <item name="dataType" xsi:type="string">sate</item>
 <item name="label" xsi:type="string" translate="true">to_date</item>
 <item name="sortOrder" xsi:type="number">60</item>
 </item>
 </argument>
 </column>
 <column name="active">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">text</item>
 <!-- <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
 <item name="dataType" xsi:type="string">text</item>-->
 <item name="label" xsi:type="string" translate="true">Status of offer</item>
 <item name="sortOrder" xsi:type="number">70</item>
 </item>
 </argument>
 </column>
 <actionsColumn name="actions" class="Demo\Offers\Ui\Component\Listing\Column\OffersList">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="indexField" xsi:type="string">offer_id</item>
 <item name="sortOrder" xsi:type="number">200</item>
 </item>
 </argument>
 </actionsColumn>
 </columns>
</listing>

Block/Adminhtml/Grid.php

<?php
namespace Demo_Offers\Block\Adminhtml;
class Grid extends \Magento\Backend\Block\Widget\Grid\Container
{
 protected $_template = 'offers/lists.phtml';
 public function __construct()
 {
 $this->_controller = 'adminhtml_grid';
 $this->_blockGroup = 'Demo_Offers';
 $this->_headerText = __('Posts');
 $this->_addButtonLabel = __('Create New Post');
 parent::__construct();
 }
}

Block/Adminhtml/Offers/Grid.php

<?php
namespace Demo\Offers\Controller\Adminhtml\Index\Offers;
class Grid extends \Magento\Backend\Block\Widget\Grid\Extended
{
 protected $moduleManager;
 protected $_testFactory;
 protected $_status;
 public function __construct(
 \Magento\Backend\Block\Template\Context $context,
 \Magento\Backend\Helper\Data $backendHelper,
 \Magento\Framework\Module\Manager $moduleManager,
 array $data = []
 ) {
 $this->moduleManager = $moduleManager;
 parent::__construct($context, $backendHelper, $data);
 }
 protected function _construct()
 {
 parent::_construct();
 $this->setId('offer_id');
 $this->setDefaultSort('offer_id');
 $this->setDefaultDir('DESC');
 $this->setSaveParametersInSession(true);
 $this->setUseAjax(true);
 $this->setVarNameFilter('lists_filter');
 }
 protected function _prepareCollection()
 {
 $collection = $this->_testFactory->create()->getCollection();
 $this->setCollection($collection);
 parent::_prepareCollection();
 return $this;
 }
 protected function _prepareColumns()
 {
 $this->addColumn(
 'offer_id',
 [
 'header' => __('ID'),
 'type' => 'number',
 'index' => 'id',
 'header_css_class' => 'col-id',
 'column_css_class' => 'col-id',
 'name'=>'offer_id'
 ]
 );
 $this->addColumn(
 'offer_title',
 [
 'header' => __('Offer Title'),
 'index' => 'offer_title',
 'class' => 'offer_title',
 'name'=>'title'
 ]
 );
 $this->addColumn(
 'offer_link',
 [
 'header' => __('Offer Link'),
 'index' => 'offer_link',
 'name'=>'offer_link'
 ]
 );
 $this->addColumn(
 'offer_img',
 [
 'header' => __('Offer Image'),
 'index' => 'offer_img',
 'name'=>'offer_img'
 ]
 );
 $this->addColumn(
 'from_date',
 [
 'header' => __('Offer From'),
 'index' => 'from_date',
 'name'=>'from_date'
 ]
 );
 $this->addColumn(
 'to_date',
 [
 'header' => __('Offer Valid to'),
 'index' => 'to_date',
 'name'=>'to_date'
 ]
 );
 $this->addColumn(
 'active',
 [
 'header' => __('Offer Status'),
 'index' => 'active',
 'name'=>'active'
 ]
 );
 $this->addColumn(
 'edit',
 [
 'header' => __('Edit'),
 'type' => 'action',
 'getter' => 'getId',
 'actions' => [
 [
 'caption' => __('Edit'),
 'url' => [
 'base' => '*/*/edit'
 ],
 'field' => 'offer_id'
 ]
 ],
 'filter' => false,
 'sortable' => false,
 'index' => 'stores',
 'header_css_class' => 'col-action',
 'column_css_class' => 'col-action'
 ]
 );
 $block = $this->getLayout()->getBlock('grid.bottom.links');
 if ($block) {
 $this->setChild('grid.bottom.links', $block);
 }
 return parent::_prepareColumns();
 }
}

etc/adminhtml/routes.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
 <router id="admin">
 <route frontName="admin_offers" id="admin_offer">
 <module before="Magento_Backend" name="Demo_Offers"/>
 </route>
</router>

Question 2

where is your admin route.xml file?

your layout file name is incorrect.

view/adminhtml/layout/demo_offers_index_index.xml this should be id(which specify in route.xml)_controller_action.xml

Question 3

I have route.xml but i have not given here. I changed name of layout file still its showing blank. is there any other changes in di.xml

Question 4

please paste your adminhtml/route.xml in code @MaNeo

Question 5

<?xml version="1.0" ?> <config xmlns:xsi="w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd"> <router id="admin"> <route frontName="admin_offers" id="admin_offer"> <module before="Magento_Backend" name="Demo_Offers"/> </route> </router> </config>

Question 6

so have you make file name admin_offer_index_index.xml and check after flushing cache? @MaNeo

Question 7

you have to make Grid/Collection.php and resourceModel like Magento2 way.

Question 8

There are two problems I found so far.

Firstly as mentioned by Rutvee, you adminhtml/route.xml file is missing. Where you have to make sure your id should be "demo_offers"
Secondly, Either go with purely UI component way or follow old way like you are trying to do in Grid.php.

Try to follow this method.

Notice How you are making columns in Grid.php is acceptable by M2 due to forward compatibilty in M1, but its not recommended at all.

Question 9

I find it much easier to use the "Ultimate Module Creator" that creates the whole thing for you with a couple of clicks... it has some limits but it takes minutes for something that often done manually can take hours.

Question 10

Based on the code you provided, it seems that you have set up the necessary files for creating a grid in the admin menu. However, there could be a few reasons why the grid is not displaying correctly. Here are a few things you can check:

Make sure the module is enabled: Verify that the module is enabled in your Magento installation by running the following command in the terminal:
```
bin/magento module:status
```
Look for your module in the list and make sure it is set to "Enabled."
Check for errors: Check your Magento logs for any errors related to your module. You can find the logs in the var/log directory of your Magento installation. Look for any relevant error messages that could help identify the issue.
Clear the cache: If you haven't already done so, clear the Magento cache by running the following command:
```
bin/magento cache:clean
```
Verify XML configuration: Double-check your XML configuration files (etc/di.xml, view/adminhtml/layout/demo_offers_index_index.xml, and view/adminhtml/ui_component/admin_offers_listing.xml) for any syntax errors or typos. Make sure the paths and namespaces are correct.
Check file permissions: Ensure that the files and directories related to your module have the correct permissions and are accessible by the web server.
Verify the router name: Confirm that the router name specified in your module (admin_offers) matches the router name used in the URL when accessing the admin grid.
Verify the URL: Ensure that you are accessing the correct URL for your grid. Based on your code, it should be something like:
```
http://yourdomain.com/admin/admin_offers/index/index
```

By checking these points, you should be able to identify any issues that might be preventing the grid from displaying in your admin menu.

Rutvee Sojitra 3,9092 gold badges21 silver badges59 bronze badges · Answer 1 · 2019-05-22 05:52:42Z

1

where is your admin route.xml file?

your layout file name is incorrect.

view/adminhtml/layout/demo_offers_index_index.xml this should be id(which specify in route.xml)_controller_action.xml

Share

Improve this answer

answered May 22, 2019 at 5:52

Rutvee Sojitra's user avatar

Rutvee Sojitra

3,9092 gold badges21 silver badges59 bronze badges

7

I have route.xml but i have not given here. I changed name of layout file still its showing blank. is there any other changes in di.xml

MaNeo
– MaNeo

2019年05月22日 06:03:19 +00:00
Commented May 22, 2019 at 6:03
please paste your adminhtml/route.xml in code @MaNeo

Rutvee Sojitra
– Rutvee Sojitra

2019年05月22日 06:04:04 +00:00
Commented May 22, 2019 at 6:04
<?xml version="1.0" ?> <config xmlns:xsi="w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd"> <router id="admin"> <route frontName="admin_offers" id="admin_offer"> <module before="Magento_Backend" name="Demo_Offers"/> </route> </router> </config>

MaNeo
– MaNeo

2019年05月22日 06:06:10 +00:00
Commented May 22, 2019 at 6:06
so have you make file name admin_offer_index_index.xml and check after flushing cache? @MaNeo

Rutvee Sojitra
– Rutvee Sojitra

2019年05月22日 06:08:53 +00:00
Commented May 22, 2019 at 6:08
you have to make Grid/Collection.php and resourceModel like Magento2 way.

Rutvee Sojitra
– Rutvee Sojitra

2019年05月22日 06:12:45 +00:00
Commented May 22, 2019 at 6:12

| Show 2 more comments

Ali Hussain 1677 bronze badges · Answer 2 · 2019-05-22 06:08:56Z

There are two problems I found so far.

Firstly as mentioned by Rutvee, you adminhtml/route.xml file is missing. Where you have to make sure your id should be "demo_offers"
Secondly, Either go with purely UI component way or follow old way like you are trying to do in Grid.php.

Try to follow this method.

Notice How you are making columns in Grid.php is acceptable by M2 due to forward compatibilty in M1, but its not recommended at all.

Barry 5871 gold badge5 silver badges22 bronze badges · Answer 3 · 2019-12-17 16:22:41Z

I find it much easier to use the "Ultimate Module Creator" that creates the whole thing for you with a couple of clicks... it has some limits but it takes minutes for something that often done manually can take hours.

Madhan V 2272 silver badges11 bronze badges · Answer 4 · 2023-06-24 15:59:28Z

Based on the code you provided, it seems that you have set up the necessary files for creating a grid in the admin menu. However, there could be a few reasons why the grid is not displaying correctly. Here are a few things you can check:

Make sure the module is enabled: Verify that the module is enabled in your Magento installation by running the following command in the terminal:
```
bin/magento module:status
```
Look for your module in the list and make sure it is set to "Enabled."
Check for errors: Check your Magento logs for any errors related to your module. You can find the logs in the var/log directory of your Magento installation. Look for any relevant error messages that could help identify the issue.
Clear the cache: If you haven't already done so, clear the Magento cache by running the following command:
```
bin/magento cache:clean
```
Verify XML configuration: Double-check your XML configuration files (etc/di.xml, view/adminhtml/layout/demo_offers_index_index.xml, and view/adminhtml/ui_component/admin_offers_listing.xml) for any syntax errors or typos. Make sure the paths and namespaces are correct.
Check file permissions: Ensure that the files and directories related to your module have the correct permissions and are accessible by the web server.
Verify the router name: Confirm that the router name specified in your module (admin_offers) matches the router name used in the URL when accessing the admin grid.
Verify the URL: Ensure that you are accessing the correct URL for your grid. Based on your code, it should be something like:
```
http://yourdomain.com/admin/admin_offers/index/index
```

By checking these points, you should be able to identify any issues that might be preventing the grid from displaying in your admin menu.

Stack Exchange Network

Create custom grid in admin using ui component in magento 2

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

Create custom grid in admin using ui component in magento 2

4 Answers 4

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions