How to Create/Save Admin Grid in Magento 2

March 16, 2022 The Online Helper

Follow the following steps to create the admin grid in Magento 2:

Create database schema
Create routes admin
Create admin menu
Create Controller
Create Admin Grid using Component
Create Admin Grid using Layout

Create database schema

Create the database file in the setup directory.

Directory

app/code/VendorName/ModuelName/Setup/InstallSchema.php

content of InstallSchema.php

<?php

namespace Mageplaza\HelloWorld\Setup;

class InstallSchema implements \Magento\Framework\Setup\InstallSchemaInterface
{

public function install(\Magento\Framework\Setup\SchemaSetupInterface $setup, \Magento\Framework\Setup\ModuleContextInterface $context)
{
$installer = $setup;
$installer->startSetup();
if (!$installer->tableExists('mageplaza_helloworld_post')) {
$table = $installer->getConnection()->newTable(
$installer->getTable('mageplaza_helloworld_post')
)
->addColumn(
'post_id',
\Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
null,
[
'identity' => true,
'nullable' => false,
'primary' => true,
'unsigned' => true,
],
'Post ID'
)
->addColumn(
'name',
\Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
255,
['nullable => false'],
'Post Name'
)
->addColumn(
'url_key',
\Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
255,
[],
'Post URL Key'
)
->addColumn(
'post_content',
\Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
'64k',
[],
'Post Post Content'
)
->addColumn(
'tags',
\Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
255,
[],
'Post Tags'
)
->addColumn(
'status',
\Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
1,
[],
'Post Status'
)
->addColumn(
'featured_image',
\Magento\Framework\DB\Ddl\Table::TYPE_TEXT,
255,
[],
'Post Featured Image'
)
->addColumn(
'created_at',
\Magento\Framework\DB\Ddl\Table::TYPE_TIMESTAMP,
null,
['nullable' => false, 'default' => \Magento\Framework\DB\Ddl\Table::TIMESTAMP_INIT],
'Created At'
)->addColumn(
'updated_at',
\Magento\Framework\DB\Ddl\Table::TYPE_TIMESTAMP,
null,
['nullable' => false, 'default' => \Magento\Framework\DB\Ddl\Table::TIMESTAMP_INIT_UPDATE],
'Updated At')
->setComment('Post Table');
$installer->getConnection()->createTable($table);

$installer->getConnection()->addIndex(
$installer->getTable('mageplaza_helloworld_post'),
$setup->getIdxName(
$installer->getTable('mageplaza_helloworld_post'),
['name', 'url_key', 'post_content', 'tags', 'featured_image'],
\Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT
),
['name', 'url_key', 'post_content', 'tags', 'featured_image'],
\Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT
);
}
$installer->endSetup();
}
}

This file is only run one time when installing the module. This file is used to create the table in the database.

Create routes admin

Directory

app/code/VendorName/ModuleName/etc/adminhtml/routes.xml

Content of 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 id="vendorname_modulename" frontName="vendorname_modulenam">
<module name="VendorName_ModuleName"/>
</route>
</router>
</config>

Create admin menu

Directory

app/code/VendorName/ModuleName/etc/adminhtml/menu.xml

Content for 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>
<add id="VendorName_ModuleName::newmenu" title="New Menu" module="VendorName_ModuleName" sortOrder="51" resource="VendorName_ModuleName::newmenu"/>
<add id="VendorName_ModuleName::configuration" title="Configuration" module="VendorName_ModuleName" sortOrder="10" action="vendorname_modulename/configuration" resource="VendorName_ModuleName::configuration" parent="VendorName_ModuleName::newmenu"/>
<add id="VendorName_ModuleName::management" title="Management" module="VendorName_ModuleName" sortOrder="99" parent="VendorName_ModuleName::newmenu" action="vendorname_modulename/management" resource="VendorName_ModuleName::management"/>
</menu>
</config>

Create Controller

Directory

app/code/VendorName/ModuleNa me/Controller/Adminhtml/Post/Index.php

Content of Index.php

<?php

namespace VendorName\ModuleName\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;
}

Create Admin Grid using Component

We can create an admin grid by use of two methods, now we will discuss these methods.

Method1:

Declare resource

Create the di.xml file to declare resource

Directory

app/code/VendorName/ModuleName/etc/di.xml

Content of di.xml

<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/ObjectManager/etc/config.xsd">
<type name="Magento\Framework\View\Element\UiComponent\DataProvider\CollectionFactory">
<arguments>
<argument name="collections" xsi:type="array">
<item name="vendorname_modulename_post_listing_data_source" xsi:type="string">VendorName\ModuleName\Model\ResourceModel\Post\Grid\Collection</item>
</argument>
</arguments>
</type>
<virtualType name="VendorName\ModuleName\Model\ResourceModel\Post\Grid\Collection" type="Magento\Framework\View\Element\UiComponent\DataProvider\SearchResult">
<arguments>
<argument name="mainTable" xsi:type="string">vendorname_modulename_post</argument>
<argument name="resourceModel" xsi:type="string">VendorName\ModuleName\Model\ResourceModel\Post</argument>
</arguments>
</virtualType>
</config>

Create layout file

Directory

app/code/VendorName/ModuleName/view/adminhtml/layout/vendorname_modulename_post_index.xml

Content of vendorname_modulename_post_index.xml

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
<update handle="styles"/>
<body>
<referenceContainer name="content">
<uiComponent name="vendorname_modulename_post_listing"/>
</referenceContainer>
</body>
</page>