Here we will see how to display grid in tab in admin.
Display Grid in Tab
To display grid in tab first of all Create Tabs.php block file in folder Webkul\Hello\Block\Adminhtml\Hello\Edit
This file is created to add tabs in edit form.
<?php /** * Webkul Hello Hello Edit Tabs Admin Block * * @category Webkul * @package Webkul_Hello * @author Webkul Software Private Limited * */ namespace Webkul\Hello\Block\Adminhtml\Hello\Edit; class Tabs extends \Magento\Backend\Block\Template { protected $_template = 'Webkul_Hello::products.phtml'; protected $blockGrid; public function getBlockGrid() { if (null === $this->blockGrid) { $this->blockGrid = $this->getLayout()->createBlock( \Webkul\Hello\Block\Adminhtml\Hello\Edit\Tab\Grid\Product::class, 'custom.product.grid'); } return $this->blockGrid; } public function getGridHtml() { return $this->getBlockGrid()->toHtml(); } }
Now Create Product.php Block file in folder Webkul\Hello\Block\Adminhtml\Hello\Edit\Tab\Grid
This file is created to add grid columns and collection.
<?php /** * Webkul Hello Hello Edit Tab Grid Block * * @category Webkul * @package Webkul_Hello * @author Webkul Software Private Limited * */ namespace Webkul\Hello\Block\Adminhtml\Hello\Edit\Tab; class Product extends \Magento\Backend\Block\Widget\Grid\Extended { /** * @var \Webkul\Catalog\Model\ProductFactory */ protected $productFactory; public function __construct( \Magento\Backend\Block\Template\Context $context, \Magento\Backend\Helper\Data $backendHelper, \Magento\Catalog\Model\ProductFactory $productFactory, \Magento\Framework\Registry $coreRegistry, array $data = [] ) { $this->productFactory = $productFactory; $this->_coreRegistry = $coreRegistry; parent::__construct($context, $backendHelper, $data); } /** * @return void */ protected function _construct() { parent::_construct(); $this->setId('hello_tab_grid'); $this->setDefaultSort('entity_id'); $this->setUseAjax(true); } /** * @return Grid */ protected function _prepareCollection() { $collection = $this->_productFactory->create() ->getCollection()->addAttributeToSelect('name') ->addAttributeToSelect('sku'); $this->setCollection($collection); return parent::_prepareCollection(); } /** * @return Extended */ protected function _prepareColumns() { $this->addColumn( 'entity_id', [ 'header' => __('Product Id'), 'sortable' => true, 'index' => 'entity_id', 'header_css_class' => 'col-id', 'column_css_class' => 'col-id' ] ); $this->addColumn( 'name', [ 'header' => __('Product Name'), 'index' => 'name' ] ); $this->addColumn( 'sku', [ 'header' => __('Sku'), 'index' => 'sku' ] ); return parent::_prepareColumns(); } /** * @return string */ public function getGridUrl() { return $this->getUrl('hello/*/helloGrid', ['_current' => true]); } }
Create HelloGrid.php Controller file in folder Webkul\Hello\Controller\Adminhtml\Hello.
<?php /** * Hello Admin Hello helloGrid Controller * * @category Webkul * @package Webkul_Hello * @author Webkul Software Private Limited * */ namespace Webkul\Hello\Controller\Adminhtml\Hello; class HelloGrid extends \Magento\Backend\App\Action { /** * @var \Magento\Framework\Controller\Result\RawFactory */ protected $resultRawFactory; public function __construct( \Magento\Backend\App\Action\Context $context, \Magento\Framework\Controller\Result\RawFactory $resultRawFactory, \Magento\Framework\View\LayoutFactory $layoutFactory ) { parent::__construct($context); $this->resultRawFactory = $resultRawFactory; $this->layoutFactory = $layoutFactory; } public function execute() { $resultRaw = $this->resultRawFactory->create(); return $resultRaw->setContents( $this->layoutFactory->create()->createBlock(\Webkul\Hello\Block\Adminhtml\Hello\Edit\Tab\Grid\Product::class, 'cutom.product.grid')->toHtml()); } }
Now create template file products.phtml in folder Webkul\Hello\view\adminhtml\templates
<?= $block->getGridHtml() ?>
After creating all the files output will be look like the image.
That’s all for display grid in tab.
if you have any query or issue, comment below.
But I got blank page. How can I add tabs to custom page. And each tab will have separate grid.