Magento 2 - How to create custom grid menu in admin?

Question

I want to create a grid menu in the admin panel. I'm stuck at creating layout using components. I have some records in a table. Now how can I display it in the admin grid?

The following is the code that I now used.

I created Hiren/Employee/etc/module.xml:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Hiren_Employee" setup_version="0.0.1"/>
</config>

I created **Hiren/Employee/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 id="employee" frontName="employee">
        <module name="Hiren_Employee"/>
    </route>
</router>
</config>

I created Hiren/Employee/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>
    <add id="Hiren_Employee::EmpManage" title="Manage Employee" module="Hiren_Employee" sortOrder="51" resource="Hiren_Employee::EmpManage"/>
    <add id="Hiren_Employee::viewData" title="View" module="Hiren_GridMenu" sortOrder="10" action="employee/view" resource="Hiren_Employee::viewData" parent="Hiren_Employee::EmpManage"/>       
</menu>
</config>

I created Hiren/Employee/Setup/InstallSchema.php:

<?php

namespace Hiren\Employee\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('emp_table'))
        {
            $table = $installer->getConnection()->newTable($installer->getTable('emp_table'))
            ->addColumn('no', \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER, null, ['identity' => true, 'unsigned' => true, 'nullable' => false, 'primary' => true], 'no')
            ->addColumn('name', \Magento\Framework\DB\Ddl\Table::TYPE_TEXT, 255, ['nullable => false'], 'Name')
            ->addColumn('city', \Magento\Framework\DB\Ddl\Table::TYPE_TEXT, 255, [], 'city')->setComment('Employee Table');

            $installer->getConnection()->createTable($table);
            $installer->getConnection()->addIndex($installer->getTable('emp_table'), $setup->getIdxName($installer->getTable('emp_table'), ['no', 'name', 'city'], \Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT), ['no', 'name', 'city'], \Magento\Framework\DB\Adapter\AdapterInterface::INDEX_TYPE_FULLTEXT);
        }
        $installer->endSetup();
    }
}

I created Hiren/Employee/Controller/Adminhtml/view/Index.php:

<?php

namespace Hiren\Employee\Controller\Adminhtml\view;

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((__('VIEW')));
        return $resultPage;
    }
}

Answer 1

You will need to create mass action and grid directory to show data from the database in the grid.

app\code\Hiren\Employee\view\adminhtml\templates\employee\grid
massaction_extended.phtml

and

app\code\Hiren\Employee\view\adminhtml\templates\employee\
employee.phtml

You can create the complete module from module creator

http://www.silksoftware.com/magento-module-creator/magento2x.php

Hope this will help you.

Answer 2

Use https://mage2gen.com/ to generate whole module - the only thing you probably will need is to configure grid columns and form fields.

Answer 3

Create view/adminhtml/layout/employee_view_index.xml file,

<?xml version="1.0"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Hiren\Employee\Block\Adminhtml\Grid" name="grid_grid_listing"/>
        </referenceContainer>
    </body>
</page>

Create Hiren/Employee/Block/Adminhtml/Grid.php

<?php

namespace Hiren\Employee\Block\Adminhtml;

class Grid extends \Magento\Backend\Block\Widget\Container
{
    protected $_template = 'grid/view.phtml';

    public function __construct(
        \Magento\Backend\Block\Widget\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

    protected function _prepareLayout()
    {
        $addButtonProps = [
            'id' => 'add_new_grid',
            'label' => __('Add New'),
            'class' => 'add',
            'button_class' => '',
            'class_name' => 'Magento\Backend\Block\Widget\Button\SplitButton',
            'options' => $this->_getAddButtonOptions(),
        ];
        $this->buttonList->add('add_new', $addButtonProps);
        $this->setChild(
            'grid',
           $this->getLayout()->createBlock('Hiren\Employee\Block\Adminhtml\Grid\Grid',
            'grid.view.grid'));
        return parent::_prepareLayout();
    }

    protected function _getAddButtonOptions()
    {
        $splitButtonOptions[] = [
            'label' => __('Add New'),
            'onclick' => "setLocation('" . $this->_getCreateUrl() . "')"
        ];
        return $splitButtonOptions;
    }

    protected function _getCreateUrl()
    {
        return $this->getUrl(
            'employee/*/new'
        );
    }

    public function getGridHtml()
    {
        return $this->getChildHtml('grid');
    }
}

Create Hiren/Employee/Block/Adminhtml/Grid/Grid.php

<?php
namespace Hiren\Employee\Block\Adminhtml\Grid;

class Grid extends \Magento\Backend\Block\Widget\Grid\Extended
{
    protected $moduleManager;
    protected $_gridFactory;
    protected $_status;

    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Backend\Helper\Data $backendHelper,
        \Hiren\Employee\Model\GridFactory $gridFactory,
        \Hiren\Employee\Model\Status $status,
        \Magento\Framework\Module\Manager $moduleManager,
        array $data = []
    ) {
        $this->_gridFactory = $gridFactory;
        $this->_status = $status;
        $this->moduleManager = $moduleManager;
        parent::__construct($context, $backendHelper, $data);
    }

    protected function _construct()
    {
        parent::_construct();
        $this->setId('gridGrid');
        $this->setDefaultSort('id');
        $this->setDefaultDir('DESC');
        $this->setSaveParametersInSession(true);
        $this->setUseAjax(true);
        $this->setVarNameFilter('grid_record');
    }

    protected function _prepareCollection()
    {
        $collection = $this->_gridFactory->create()->getCollection();
        $this->setCollection($collection);
        parent::_prepareCollection();
        return $this;
    }

    protected function _prepareColumns()
    {
        $this->addColumn(
            'no',
            [
                'header' => __('No'),
                'type' => 'number',
                'index' => 'id',
                'header_css_class' => 'col-id',
                'column_css_class' => 'col-id'
            ]
        );
        $this->addColumn(
            'name',
            [
                'header' => __('Name'),
                'index' => 'name',                
                'class' => 'xxx'
            ]
        );

        $this->addColumn(
            'city',
            [
                'header' => __('City'),
                'index' => 'city',                
                'class' => 'xxx'
            ]

        );

        $block = $this->getLayout()->getBlock('grid.bottom.links');
        if ($block) {
            $this->setChild('grid.bottom.links', $block);
        }

        return parent::_prepareColumns();
    }

    public function getGridUrl()
    {
        return $this->getUrl('employee/*/grid', ['_current' => true]);
    }

    public function getRowUrl($row)
    {
        return $this->getUrl(
            'employee/*/edit',
            ['id' => $row->getId()]
        );
    }
}

Please try this.