Magento2 – Display Grid in Tab Magento Admin

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.