Create Admin Grid Magento 2

In Magento admin grid can be created in two ways. One is using layout and another way is to use componenet.

Here I will explain grid cretaion using layout.

Click here to know grid creation using component.

Follow the below steps to create admin grid using layout

Step 1: Create database schema
Step 2: Create routes admin
Step 3: Create admin menu
Step 4: Create Controller
Step 5: Create block for this grid
Step 6: Create Layout
Step 7: Add Column
Step 7: Clean Cache

Step 1: Create database schema

Read CRUD Models in Magento 2 to undersatnd how to create database schema .

Step 2: Create routes admin

Create a file: app/code/PHPCodez/First/etc/adminhtml/routes.xml and insert the following code

<?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 id="phpcodez_first" frontName="phpcodez_first">
 <module name="PHPCodez_First"/>
 </route>
 </router>
</config>

Step 3: Create admin menu

Read Magento 2 Create Admin Menu for more details.

Step 4: Create Controller

Please read Create Controller article for the detail.

Create controller file app/code/Mageplaza/HelloWorld/Controller/Adminhtml/Post/Index.php and insert the following content.

<?php

namespace PHPCodez\First\Controller\Adminhtml\Post;

class Index extends \Magento\Backend\App\Action
{
 protected $resultPageFactory = false;

public function __construct(
 \Magento\Backend\App\Action\Context $context,
 \Magento\Framework\View\Result\PageFactory $resultPageFactory
 )
 {
 parent::__construct($context);
 $this->resultPageFactory = $resultPageFactory;
 }

public function execute()
 {
 $resultPage = $this->resultPageFactory->create();
 $resultPage->getConfig()->getTitle()->prepend((__('Posts')));

return $resultPage;
 }


}

Step 5: Create block for this grid

File: app/code/PHPCodez/First/Block/Adminhtml/Post.php

<?php
namespace PHPCodez\First\Block\Adminhtml;

class Post extends \Magento\Backend\Block\Widget\Grid\Container
{

protected function _construct()
 {
 $this->_controller = 'adminhtml_post';
 $this->_blockGroup = 'PHPCodez_First';
 $this->_headerText = __('Posts');
 $this->_addButtonLabel = __('Create New Post');
 parent::_construct();
 }
}

The Grid block will extend \Magento\Backend\Block\Widget\Grid\Container and define some variable in the _construct() method.

_blockGroup is the name of our module with format VendorName_ModuleName
_controller is the path to the Grid block inside the Block folder. In this first, I put the Grid.php file inside of the Adminhtml/Post folder
_headerText is the Grid page title
_addButtonLabel is the label of the Add new button.

Step 6: Create layout file

Now we will need a layout file to connect with Grid Block and render the grid. Let’s create this file:

File: app/code/PHPCodez/First/view/adminhtml/layout/phpcodez_first_post_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">
 <block class="PHPCodez\First\Block\Adminhtml\Post" name="phpcodez_post_grid">
 <block class="Magento\Backend\Block\Widget\Grid" name="phpcodez_post_grid.grid" as="grid">
 <arguments>
 <argument name="id" xsi:type="string">post_id</argument>
 <argument name="dataSource" xsi:type="object">PHPCodez\First\Model\ResourceModel\Post\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="string">1</argument>
 </arguments>
 <block class="Magento\Backend\Block\Widget\Grid\ColumnSet" name="phpcodez_post_grid.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">post_id</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="name">
 <arguments>
 <argument name="header" xsi:type="string" translate="true">Name</argument>
 <argument name="index" xsi:type="string">name</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</argument>
 <argument name="index" xsi:type="string">created_at</argument>
 <argument name="type" xsi:type="string">date</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>
 </block>
 </referenceContainer>
 </body>
</page>

In this layout file, we will define some argument for the grid. The main argument is the dataSource. This argument will link with the dataSource which we declare in the di.xml file above to connect to the database and get data for this grid.

Step 7: Add Column

The Column set will define the columns which will be display in the grid. If you want to use massAction, you can add this block to the grid element:

<block class="Magento\Backend\Block\Widget\Grid\Massaction" name="phpcodez.first.massaction" as="grid.massaction">
 <arguments>
 <argument name="massaction_id_field" xsi:type="string">post_id</argument>
 <argument name="form_field_name" xsi:type="string">ids</argument>
 <argument name="use_select_all" xsi:type="string">1</argument>
 <argument name="save_parameters_in_session" xsi:type="array">
 <item name="disable" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Delete</item>
 <item name="url" xsi:type="string">*/*/massDelete</item>
 </item>
 </argument>
 </arguments>
</block>

Step 8: Clean Cache

php bin/magento cache:flush

PHPCodez

Create Admin Grid Magento 2

Leave a Reply Cancel reply

Beginners' Guide