Back to Top

Magento2 – Display Grid in Tab Magento Admin

Updated 1 March 2023

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.

Searching for an experienced
Magento 2 Company ?
Find out More
<?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.
Display Grid

That’s all for display grid in tab.
if you have any query or issue, comment below.

. . .

Leave a Comment

Your email address will not be published. Required fields are marked*


7 comments

  • Niteen Barde
  • Thomas Lindner
    • Webkul Support
      • Thomas Lindner
  • Charlotte Ac
    • Webkul Support
  • Parth
  • Back to Top

    Message Sent!

    If you have more details or questions, you can reply to the received confirmation email.

    Back to Home