How To Use Grid Renderer In Magento 2

How To Use Grid Renderer In Magento 2 : In this post, we will learn how to use grid renderer in magento 2 grid. it is quite simple to use renderer in grid. Please check the below code.

1 => here i need a category name by a category id in a column

<?php

namespace CompanyName\ModuleName\Block\Adminhtml\CustomCategory\Edit\Tab;

use Magento\Backend\Block\Widget\Grid;
use Magento\Backend\Block\Widget\Grid\Column;
use Magento\Backend\Block\Widget\Grid\Extended;

class CustomCategoryGrid extends \Magento\Backend\Block\Widget\Grid\Extended
{
    /**
     * @var \Magento\Backend\Block\Template\Context
     */
    protected $context;
    /**
     * @var \Magento\Backend\Helper\Data
     */
    protected $backendHelper;

    /**
     * @param \Magento\Backend\Block\Template\Context $context
     * @param \Magento\Backend\Helper\Data            $backendHelper
     * @param array                                   $data
     */
    public function __construct(
        \Magento\Backend\Block\Template\Context $context,
        \Magento\Backend\Helper\Data $backendHelper,
        array $data = []
    ) {
        parent::__construct($context, $backendHelper, $data);
    }

    /**
     * @return void
     */
    protected function _construct()
    {
        parent::_construct();
        $this->setId('custom_category_grid');
        $this->setDefaultSort('id');
        $this->setUseAjax(true);
    }

    /**
     * @return Grid
     */
    protected function _prepareCollection()
    {
        $collection = /* get the collection */
        $this->setCollection($collection);
        return parent::_prepareCollection();
    }

    /**
     * @return Extended
     */
    protected function _prepareColumns()
    {
        $this->addColumn(
            'entity_id',
            [
                'header' => __('Entity Id'),
                'sortable' => true,
                'index' => 'entity_id',
                'header_css_class' => 'col-id',
                'column_css_class' => 'col-id'
            ]
        );
        $this->addColumn(
            'category_id',
            [
                'header' => __('Category Name'),
                'sortable' => true,
                'index' => 'category_id',
                'renderer'  => 'Webkul\ModuleName\Block\Adminhtml\CustomCategory\Edit\Tab\Renderer\MageCategoryName'

            ]
        );

        return parent::_prepareColumns();
    }
}

In above code i have set renderer file path in renderer attribute in category_id column.

2 => i have get the category name in renderer file , check the below code

<?php

namespace CompanyName\ModuleName\Block\Adminhtml\CustomCategory\Edit\Tab\Renderer;

use Magento\Framework\DataObject;

class MageCategoryName extends \Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer
{
    /**
     * @var \Magento\Catalog\Model\CategoryFactory
     */
    protected $categoryFactory;
    /**
     * @param \Magento\Catalog\Model\CategoryFactory $categoryFactory
     */
    public function __construct(
        \Magento\Catalog\Model\CategoryFactory $categoryFactory
    ) {
        $this->categoryFactory = $categoryFactory;
    }

    /**
     * get category name
     * @param  DataObject $row
     * @return string
     */
    public function render(DataObject $row)
    {
        $mageCateId = $row->getMageCatId();
        $storeCat = $this->categoryFactory->create()->load($mageCateId);
        return $storeCat->getName();
    }
}

I got the category name in render function of MageCategoryName class and return it.

Hope so it will help you

Thanks