Magento 2 Admin Grid

Published On: 8 December 2016.By Nidhi jain.

Digital Engineering
Ecommerce

Magento 2 Admin Grid

Create Admin Grid In Magento2 Module :

Magento 2 Grid is a kind of table which listing the items in our database table and provide some features like: sort, filter, delete, update item, etc. There are some steps to create a grid of moule in magento 2 admin.

ModuleLocation : app/code/Vendor/Module.

Step 1: Define Router Id:

Router is PHP class which is responsible for matching and processing URL request.

By default, there are some routers in Magento like; Base, DefaultRouter, Cms and UrlRewrite. Front Controller will go through all routers in routersList, so we need to add custom router in lib/internal/Magento/Framework/App/RouterList.php by adding our configuration for new router in di.xml module.

To create a Admin grid we have to define the route and frontend name of grid in route.xml.

File Location : ModuleLocation/etc/adminhtml/route.xml.

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemeLocation=”urn:magento:framework:App/etc/route.xsd”>
<router id=”admin”>
<route id='<module>' frontendName='module'><module_name = “<Vendor>_<Module>” ><route>
<router>
</config>

<route id='<module>' frontendName='module'><module_name = “<Vendor>_<Module>” ><route>

</config>

router id : Define ‘admin’ (in case of frontend otherwise standard).
frontendName : Name use after controller.

Step 2. To Create Admin Menu in Magento 2 :

I. Create menu.xml at loaction ModuleLocation/etc/adminhtml/menu.xml

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Backend:etc/menu.xsd">
   	 <menu></menu>
</config>

<?xml version="1.0"?>

</config>

II . Add Menu Item :

<add id=" " title=" " module=" " sortOrder=" " resource=""/>

1	<add id=" " title=" " module=" " sortOrder=" " resource=""/>

III Add Sub Menu :

<add id=""  title="" module= “<Vendor>_<Module> "
 sortOrder="80" resource="<Vendor>_<Module>::module_name" 
parent='id of parent menu' />

<add id="" title="" module= “<Vendor>_<Module> "

sortOrder="80" resource="<Vendor>_<Module>::module_name"

parent='id of parent menu' />

id – It’s a unique string and should follow the format: {Vendor_Module}::{menu_description}.
title – attribute is the text which will be shown on the menu bar
module- attribute is defined the module which this menu is belong to..
sortOrder- attribute is defined the position of the menu. Lower value will display on top of menu
parent – attribute is an Id of other menu node. It will tell Magento that this menu is a child of another menu.
action – attribute will define the url of the page which this menu link to.
resource – attribute is used to defined the ACL rule which the admin user must have in order to see and access this menu

Setp 3. Create a Custom Table :

Schema setup scripts change database schema, they create or update database tables. If module is installing, Setup\InstallSchema::install() is executed.

To create custum table create a file installSchema.php.

FileLocation : ModuleLocation/Setup/InstallSchema.php

public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)
{

$installer = $setup;
$installer->startSetup();
$table = $installer->getConnection()->newTable();
$installer->getTable(table_name))->addColumn( ‘table_id', \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,null,
['identity' => true, 'unsigned' => true, 'nullable' => false, 'primary' => true],' Id')
->addColumn('name', \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
255, ['nullable' => false], 'Name')-> setComment('comment for table');
$installer->getConnection()->createTable($table);
$installer->endSetup();
}

public function install(SchemaSetupInterface $setup, ModuleContextInterface $context)

{

$installer = $setup;

$installer->startSetup();

$table = $installer->getConnection()->newTable();

$installer->getTable(table_name))->addColumn( ‘table_id', \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,null,

['identity' => true, 'unsigned' => true, 'nullable' => false, 'primary' => true],' Id')

->addColumn('name', \Magento\Framework\DB\Ddl\Table::TYPE_TEXT,

255, ['nullable' => false], 'Name')-> setComment('comment for table');

$installer->getConnection()->createTable($table);

$installer->endSetup();

}

table_name : Set name of table to be create.
table_id : id for primary key.

To add more columns in tables use addColumn(‘column_id’, \Magento\Framework\DB\Ddl\Table::TYPE, length, ‘Name of column’).

To upgrade database use command php bin\magento setup:upgrade.

Step 4. Create a Model & Resource Model & Collection File

Create a model file in which resource model is defined. This file is use to connect with database.

FileLocation : ModuleLocation/Model/Model_File.php

protected function _construct(){
 $this->_init('\\Model\ResourceModel\');
}

protected function _construct(){

$this->_init('\\Model\ResourceModel\');

}

A resource model is a model that is responsible for create, read, update, delete(CRUD) implementations in magento. Resource model are used to process data from model to database, model holds the data and resource model is used for some operation.

FileLocation : ModuleLocation/Model/ResourceModel/.php

protected function _construct(){
$this-&gt;_init('table_name', 'table_id');
}

protected function _construct(){

$this->_init('table_name', 'table_id');

}

table_name : name of custum table.
table_id : primary key of table.

Collection Model is used to filter and fetch collection (data from table).

FileLocation : ModuleLocation\Model\ResourceModel\/Collection.php

protected function _construct()
{
        $this->_init('<Vendor>\<Module>\Model\<Module_name>’, 			'<Vendor>\<Module>\Model\ResourceModel\<Module_name>’);
 }

protected function _construct()

{

$this->_init('<Vendor>\<Module>\Model\<Module_name>’, '<Vendor>\<Module>\Model\ResourceModel\<Module_name>’);

}

Step 5. Create a Abstarct Class in Controller :

FileLocation : ModuleLocation\Controller\Adminhtml\ Module_name.php

protected function _initAction(){
$resultPage = $this->resultPageFactory->create();
return $resultPage;
}

protected function _isAllowed(){
return $this->_authorization->isAllowed('_::');
}

protected function _initAction(){

$resultPage = $this->resultPageFactory->create();

return $resultPage;

}

protected function _isAllowed(){

return $this->_authorization->isAllowed('_::');

}

FileLocation : ModuleLocation/Controller/Adminhtml//Index.php

public function executeInternal(){
$resultPage = $this->_initAction();
$resultPage->getConfig()->getTitle()->prepend(__(‘’Title To Display On Grid Page”’));
return $resultPage;
}

public function executeInternal(){

$resultPage = $this->_initAction();

$resultPage->getConfig()->getTitle()->prepend(__(‘’Title To Display On Grid Page”’));

return $resultPage;

}

Step 6: Create block for grid.
In this we define the title of grid page and controller.

File Location : ModuleLocation\Block\Adminhtml\Block_Name\Grid.php

<?php
namespace <vendor_name>\<moduel_name>\Block\Adminhtml\Block_Name;
class Grid extends \Magento\Backend\Block\Widget\Grid\Container
{
    protected function _construct()
    {
        $this->_blockGroup =’ <Vendor_name>_<Module_name>’;
        $this->_controller = 'adminhtml_<module_name>';        Name of controller 
        $this->_headerText = __(‘Text to display in header’’);  
        $this->_addButtonLabel = _ _('Add New');           Add new button in admin grid
        parent::_construct();
    }
}

<?php

namespace <vendor_name>\<moduel_name>\Block\Adminhtml\Block_Name;

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

{

protected function _construct()

{

$this->_blockGroup =’ <Vendor_name>_<Module_name>’;

$this->_controller = 'adminhtml_<module_name>'; Name of controller

$this->_headerText = __(‘Text to display in header’’);

$this->_addButtonLabel = _ _('Add New'); Add new button in admin grid

parent::_construct();

}

Step 7. Create a layout file for admin controller :

This file define the layout of admin grid.
File Location : ModuleLocation/view/adminhtml/layout/__.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"/>
	<update handle="<block_name>_grid"/>
<body>
<referenceContainer name="content">
<block class="<Vendor_name>\<Module_name>\Block\Adminhtml\<Block_name>\Grid" name="name for grid"/>
</referenceContainer>						    
</body>
</page>

<?xml version="1.0"?>

<body>

<block class="<Vendor_name>\<Module_name>\Block\Adminhtml\<Block_name>\Grid" name="name for grid"/>

</referenceContainer>

</body>

</page>

Step 8. Create the file: .xml in folder:

In this step we create a grid in admin and define their function

File Location : ModuleLocation/view/adminhtml/layout/_grid.xml

 <body>					        
        <referenceBlock name="admin.<module_name>.grid">  
  
          // Create a Grid in admin Use class Magento\Backend\Block\Widget\Grid

            <block class="Magento\Backend\Block\Widget\Grid" name="name of block" as="grid">
                <arguments>
                    <argument name="id" xsi:type="string">ID</argument>
                    <argument name="dataSource" xsi:type="object">  
		       ModuleLocation\Model\ResourceModel\<Module_name>\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>

         // Create Columns in Grid use block class Magento\Backend\Block\Widget\Grid\ColumnSet

                <block class="Magento\Backend\Block\Widget\Grid\ColumnSet" name="name of colounm " as="grid.columnSet">
                    <arguments>
                        <argument name="rowUrl" xsi:type="array">  	 
                            <item name="path" xsi:type="string"><module_name>/*/edit</item>  
                            <item name="extraParamsTemplate" xsi:type="array">	
                                <item name="id" xsi:type="string">
				getAffiliateId	// pass id of row in url
		       </item>
                            </item>
                        </argument>
                    </arguments>
	// Create Column For id
             <block class="Magento\Backend\Block\Widget\Grid\Column" as="<module>_id">
                        <arguments>
                            <argument name="header" xsi:type="string" translate="true">ID</argument>	
                            <argument name="index" xsi:type="string">id</argument>	//Define index
                            <argument name="type" xsi:type="string">text</argument>	 
		    //set css class for column
                            <argument name="column_css_class" xsi:type="string">col-id</argument> 
                            <argument name="header_css_class" xsi:type="string">col-id</argument>	
                        </arguments>
            </block>

       ←-----------------Same procedure is used for another columns in grid -------------------------->
                </block>
            </block>
        </referenceBlock>
    </body>
</page>

<body>

// Create a Grid in admin Use class Magento\Backend\Block\Widget\Grid

ModuleLocation\Model\ResourceModel\<Module_name>\Collection

</argument>

</arguments>

// Create Columns in Grid use block class Magento\Backend\Block\Widget\Grid\ColumnSet

getAffiliateId // pass id of row in url

</item>

</argument>

</arguments>

// Create Column For id

<argument name="index" xsi:type="string">id</argument> //Define index

//set css class for column

</arguments>

</block>

←-----------------Same procedure is used for another columns in grid -------------------------->

</block>

</referenceBlock>

</body>

</page>

admin.<module_name>.grid            :      Define in controller layout file
argumanet name=”id”                 :     This parameter primary_key of table.
argument name="dataSource"          :    This parameter  define the location of file where data have to fetch
argumanet name=”default_sort”       :   This parameter is for sorting
argumanet name=”default_dir”        :   This parameter define type of Sorting
argument name="rowUrl"              :   This parameter set the url for the row.
item name="extraParamsTemplate"     :  Use to pass extra parameter in url
argument name="header" 	            :       Define Column Name.
argument name="type" 		    :      Define Type For search Box