How To Create Admin Grid In Magento 2
In this lesson, I will show you How To Create Admin Grid In Magento 2. This is a very important lesson, but don’t forget to refer to the previous article: How To Use Event In Magento 2.
You should read the Magento 2 Extension Tutorial step by step.
Module File Structure
We updated our module file structure looks as follows:
Create a backend router
First, we create a file with the following path: Magetop/Helloworld/etc/adminhtml/routes.xml.
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* routes
*
* @copyright Copyright © 2020 Magetop. All rights reserved.
* @author [email protected]
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
<router id="admin"> <!-- standard or admin -->
<route id="helloworld" frontName="helloworld">
<module name="Magetop_Helloworld" />
</route>
</router>
</config>
Create an admin menu
You create a menu file according to the path: Magetop/Helloworld/etc/adminhtml/menu.xml.
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* menu
*
* @copyright Copyright © 2020 Magetop. All rights reserved.
* @author [email protected]
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
<menu>
<add id="Magetop_Helloworld::helloworld_menu" title="Magetop Helloworld" module="Magetop_Helloworld" sortOrder="20" resource="Magetop_Helloworld::helloworld" />
<add id="Magetop_Helloworld::posts_menu" title="Magetop Helloworld" module="Magetop_Helloworld" sortOrder="1" parent="Magetop_Helloworld::helloworld_menu" action="helloworld/posts/index" resource="Magetop_Helloworld::posts" />
</menu>
</config>
You can see the menu in Magento Admin Panel.
Create Controller
You create file Posts.php in Magetop/Helloworld/Controller/Adminhtml/Posts.php.
<?php
namespace Magetop\Helloworld\Controller\Adminhtml;
use Magento\Backend\App\Action;
use Magento\Backend\App\Action\Context;
use Magento\Framework\Registry;
use Magento\Framework\View\Result\PageFactory;
use Magetop\Helloworld\Model\PostsFactory;
class Posts extends Action
{
protected $_coreRegistry;
protected $_resultPageFactory;
protected $_postsFactory;
public function __construct(
Context $context,
Registry $coreRegistry,
PageFactory $resultPageFactory,
PostsFactory $postsFactory
) {
parent::__construct($context);
$this->_coreRegistry = $coreRegistry;
$this->_resultPageFactory = $resultPageFactory;
$this->_postsFactory = $postsFactory;
}
public function execute()
{
}
protected function _isAllowed()
{
return true;
}
}
Next, create Index.php and Grid.php with the following path:
Magetop/Helloworld/Controller/Adminhtml/Posts/Index.php.
<?php
namespace Magetop\Helloworld\Controller\Adminhtml\Posts;
use Magetop\Helloworld\Controller\Adminhtml\Posts;
use Magetop\Helloworld\Model\PostsFactory;
use Magento\Backend\App\Action\Context;
use Magento\Framework\Registry;
use Magento\Framework\View\Result\PageFactory;
class Index extends Posts
{
public function __construct(
Context $context,
Registry $coreRegistry,
PageFactory $resultPageFactory,
PostsFactory $postsFactory
)
{
parent::__construct($context, $coreRegistry, $resultPageFactory, $postsFactory);
}
public function execute()
{
if ($this->getRequest()->getQuery('ajax')) {
$this->_forward('grid');
return;
}
/** @var \Magento\Backend\Model\View\Result\Page $resultPage */
$resultPage = $this->_resultPageFactory->create();
$resultPage->setActiveMenu('Magetop_Helloworld::helloworld_menu');
$resultPage->getConfig()->getTitle()->prepend(__('Manage Posts'));
return $resultPage;
}
}
Magetop/Helloworld/Controller/Adminhtml/Posts/Grid.php.
<?php
namespace Magetop\Helloworld\Controller\Adminhtml\Posts;
use Magetop\Helloworld\Controller\Adminhtml\Posts;
class Grid extends Posts
{
public function execute()
{
return $this->_resultPageFactory->create();
}
}
Create Block
Create Posts.php in Magetop/Helloworld/Block/Adminhtml/Posts.php.
<?php
namespace Magetop\Helloworld\Block\Adminhtml;
use Magento\Backend\Block\Widget\Grid\Container;
class Posts extends Container
{
protected function _construct()
{
$this->_controller = 'adminhtml_posts';
$this->_blockGroup = 'Magetop_Helloworld';
$this->_headerText = __('Manage Posts');
$this->_addButtonLabel = __('Add New Post');
parent::_construct();
}
}
Create three layout file
First, create helloworld_posts_index.xml according to the path: Magetop/Helloworld/view/adminhtml/layout/helloworld_posts_index.xml.
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* helloworld_posts_index
*
* @copyright Copyright © 2020 Magetop. All rights reserved.
* @author [email protected]
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<update handle="formkey"/>
<update handle="helloworld_posts_grid_block"/>
<body>
<referenceContainer name="content">
<block class="Magetop\Helloworld\Block\Adminhtml\Posts" name="helloworld_posts_grid_block.grid.container" />
</referenceContainer>
</body>
</page>
Next, you create helloworld_posts_grid.xml follow the path above.
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* helloworld_posts_grid
*
* @copyright Copyright © 2020 Magetop. All rights reserved.
* @author [email protected]
*/
-->
<layout xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/layout_generic.xsd">
<update handle="formkey"/>
<update handle="helloworld_posts_grid_block"/>
<container name="root">
<block class="Magento\Backend\Block\Widget\Grid\Container" name="helloworld_posts_grid_block.grid.container" template="Magento_Backend::widget/grid/container/empty.phtml"/>
</container>
</layout>
Finally, you create helloworld_posts_grid_block.xml.
<?xml version="1.0" encoding="UTF-8"?>
<!--
/**
* helloworld_posts_grid_block
*
* @copyright Copyright © 2020 Magetop. All rights reserved.
* @author [email protected]
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceBlock name="helloworld_posts_grid_block.grid.container">
<block class="Magento\Backend\Block\Widget\Grid" name="helloworld_posts_grid_block.grid" as="grid">
<arguments>
<argument name="id" xsi:type="string">id</argument>
<argument name="dataSource" xsi:type="object">Magetop\Helloworld\Model\ResourceModel\Posts\Collection</argument>
<argument name="default_sort" xsi:type="string">id</argument>
<argument name="default_dir" xsi:type="string">ASC</argument>
<argument name="save_parameters_in_session" xsi:type="boolean">true</argument>
<argument name="use_ajax" xsi:type="boolean">true</argument>
</arguments>
<block class="Magento\Backend\Block\Widget\Grid\ColumnSet" name="helloworld_posts_grid_block.grid.columnSet" as="grid.columnSet">
<arguments>
<argument name="rowUrl" xsi:type="array">
<item name="path" xsi:type="string">*/*/edit</item>
</argument>
</arguments>
<block class="Magento\Backend\Block\Widget\Grid\Column" as="post_id">
<arguments>
<argument name="header" xsi:type="string" translate="true">ID</argument>
<argument name="index" xsi:type="string">id</argument>
<argument name="type" xsi:type="string">taext</argument>
<argument name="column_css_class" xsi:type="string">col-id</argument>
<argument name="header_css_class" xsi:type="string">col-id</argument>
</arguments>
</block>
<block class="Magento\Backend\Block\Widget\Grid\Column" as="status">
<arguments>
<argument name="header" xsi:type="string" translate="true">Status</argument>
<argument name="index" xsi:type="string">status</argument>
<argument name="type" xsi:type="string">text</argument>
<argument name="column_css_class" xsi:type="string">col-id</argument>
<argument name="header_css_class" xsi:type="string">col-id</argument>
</arguments>
</block>
<block class="Magento\Backend\Block\Widget\Grid\Column" as="title">
<arguments>
<argument name="header" xsi:type="string" translate="true">Title</argument>
<argument name="index" xsi:type="string">title</argument>
<argument name="type" xsi:type="string">title</argument>
<argument name="column_css_class" xsi:type="string">col-id</argument>
<argument name="header_css_class" xsi:type="string">col-id</argument>
</arguments>
</block>
<block class="Magento\Backend\Block\Widget\Grid\Column" as="description">
<arguments>
<argument name="header" xsi:type="string" translate="true">Description</argument>
<argument name="index" xsi:type="string">description</argument>
<argument name="type" xsi:type="string">text</argument>
<argument name="column_css_class" xsi:type="string">col-id</argument>
<argument name="header_css_class" xsi:type="string">col-id</argument>
</arguments>
</block>
<block class="Magento\Backend\Block\Widget\Grid\Column" as="created_at">
<arguments>
<argument name="header" xsi:type="string" translate="true">Created At</argument>
<argument name="index" xsi:type="string">created_at</argument>
<argument name="type" xsi:type="string">created_at</argument>
<argument name="column_css_class" xsi:type="string">col-id</argument>
<argument name="header_css_class" xsi:type="string">col-id</argument>
</arguments>
</block>
</block>
</block>
</referenceBlock>
</body>
</page>
You access in Magento Admin Panel click your created menu and check it.
I hope through this series you can create your own complete module. Good luck!
In addition to How To Create Admin Grid In Magento 2, you can read the articles How To Custom Admin Grid In Magento 2.
Follow us for the more helpful article!
We hope this is a useful series for you.
Thank you for reading!
May I know how to remove the add new button? Thank you!
Where can I find more information about the Magetop\Helloworld\Model\PostsFactory?