How to Use Grid Renderer in Magento 2

Magento 2 admin grids in the backend help the admin to manage the data of orders, customers, products, etc. He can edit, update or delete the data from the admin grid.

Additionally, the admin may use grid renderer in Magento 2 to change the default formatting of the columns such as highlighting, uploading images, change the text color or background, etc. A renderer is one of the methods of Magento 2 that holds a path of a PHP file and redirects to that file.

For instance, your Magento 2 store allows users to create profiles and upload their profile images. In the backend Customers grid, the admin can get the profile picture column using the below solution.

Also, the column entries can be diversified with colors such as a male customer with red and female customer with green color. It helps the admin visually understand the data diversification and get the ratio of their customers by gender.

Check the below solution to implement any such scenarios where you need to change the default formatting of the admin grid columns in Magento 2.

Method to Use Grid Renderer in Magento 2

1. Use the below code in the registration.php file at app\code\Vendor\Module
   
   <?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'Vendor_Module', __DIR__ );

   1 2 3 4 5 6

   <?php   \Magento\Framework\Component\ComponentRegistrar::register(     \Magento\Framework\Component\ComponentRegistrar::MODULE,     'Vendor_Module', __DIR__ );

2. Create the module.xml file at app\code\Vendor\Module\etc
   
   
   <?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="Vendor_Module" setup_version="1.0.0"/> </config>

   1 2 3 4 5

   <?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="Vendor_Module" setup_version="1.0.0"/> </config>

3. Create the Grid.php file at app\code\Vendor\Module\Block\Adminhtml\CustomField\Edit\Tab
   
   
   <?php namespace Vendor\Module\Block\Adminhtml\CustomField\Edit\Tab; use Vendor\Module\Model\ResourceModel\ModuleHistory\CollectionFactory; class Grid extends \Magento\Backend\Block\Widget\Grid\Extended { protected $context; protected $backendHelper; protected $collectionFactory; public function __construct( \Magento\Backend\Block\Template\Context $context, \Magento\Backend\Helper\Data $backendHelper, CollectionFactory $collectionFactory, array $data = [] ) { $this->collectionFactory = $collectionFactory; parent::__construct($context, $backendHelper, $data); } protected function _construct() { parent::_construct(); $this->setId('custom_field'); $this->setDefaultSort('id'); $this->setUseAjax(true); } protected function _prepareCollection() { $collection = $this->collectionFactory->create()->addFieldToFilter("customer_id", $this->_coreRegistry ->registry(RegistryConstants::CURRENT_CUSTOMER_ID)); $this->setCollection($collection); return parent::_prepareCollection(); } 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( 'Balance', [ 'header' => __('Balance'), 'sortable' => true, 'index' => 'category_id', 'renderer' => 'Vendor\Module\Block\Adminhtml\Customer\Grid\Renderer\Balance' ] ); return parent::_prepareColumns(); } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

   <?php   namespace Vendor\Module\Block\Adminhtml\CustomField\Edit\Tab;   use Vendor\Module\Model\ResourceModel\ModuleHistory\CollectionFactory;   class Grid extends \Magento\Backend\Block\Widget\Grid\Extended {     protected $context;     protected $backendHelper;     protected $collectionFactory;       public function __construct(         \Magento\Backend\Block\Template\Context $context,         \Magento\Backend\Helper\Data $backendHelper,         CollectionFactory $collectionFactory,         array $data = []     )     {         $this->collectionFactory = $collectionFactory;         parent::__construct($context, $backendHelper, $data);     }       protected function _construct()     {         parent::_construct();         $this->setId('custom_field');         $this->setDefaultSort('id');         $this->setUseAjax(true);     }       protected function _prepareCollection()     {         $collection = $this->collectionFactory->create()->addFieldToFilter("customer_id", $this->_coreRegistry             ->registry(RegistryConstants::CURRENT_CUSTOMER_ID));         $this->setCollection($collection);         return parent::_prepareCollection();     }       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(             'Balance',             [                 'header' => __('Balance'),                 'sortable' => true,                 'index' => 'category_id',                 'renderer' => 'Vendor\Module\Block\Adminhtml\Customer\Grid\Renderer\Balance'               ]         );           return parent::_prepareColumns();     } }

4. Create Balance.php file at app\code\Vendor\Module\Block\Adminhtml\Customer\Grid\Renderer
   
   
   <?php namespace Vendor\Module\Block\Adminhtml\Customer\Grid\Renderer; use Magento\Backend\Block\Context; use Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer; use Magento\Catalog\Helper\Image; use Magento\Framework\DataObject; use Magento\Store\Model\StoreManagerInterface; use Vendor\Module\Model\ResourceModel\ModuleHistory\CollectionFactory; class Balance extends AbstractRenderer { private $_storeManager; private $imageHelper; private $collectionFactory; public function __construct( Context $context, Image $imageHelper, StoreManagerInterface $storemanager, CollectionFactory $collectionFactory, array $data = [] ) { $this->_storeManager = $storemanager; parent::__construct($context, $data); $this->_authorization = $context->getAuthorization(); $this->imageHelper = $imageHelper; $this->collectionFactory = $collectionFactory; } public function render(DataObject $row) { if ($row->getIsDeduct()) { $difference = '<span class="price" style="color:red">-' . $this->_storeManager->getStore() ->getCurrentCurrency()->getCurrencySymbol() . $row->getBalance() . '</span>'; } else { $difference = '<span class="price" style="color:green">+' . $this->_storeManager->getStore() ->getCurrentCurrency()->getCurrencySymbol() . $row->getBalance() . '</span>'; } return $difference; } }

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

   <?php   namespace Vendor\Module\Block\Adminhtml\Customer\Grid\Renderer;   use Magento\Backend\Block\Context; use Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer; use Magento\Catalog\Helper\Image; use Magento\Framework\DataObject; use Magento\Store\Model\StoreManagerInterface; use Vendor\Module\Model\ResourceModel\ModuleHistory\CollectionFactory;   class Balance extends AbstractRenderer {     private $_storeManager;     private $imageHelper;     private $collectionFactory;       public function __construct(         Context $context,         Image $imageHelper,         StoreManagerInterface $storemanager,         CollectionFactory $collectionFactory,         array $data = []     )     {         $this->_storeManager = $storemanager;         parent::__construct($context, $data);         $this->_authorization = $context->getAuthorization();         $this->imageHelper = $imageHelper;         $this->collectionFactory = $collectionFactory;     }       public function render(DataObject $row)     {         if ($row->getIsDeduct()) {             $difference = '<span class="price" style="color:red">-' . $this->_storeManager->getStore()                     ->getCurrentCurrency()->getCurrencySymbol() . $row->getBalance() . '</span>';         } else {             $difference = '<span class="price" style="color:green">+' . $this->_storeManager->getStore()                     ->getCurrentCurrency()->getCurrencySymbol() . $row->getBalance() . '</span>';         }         return $difference;     } }

The output of the above implementation will be:

That’s it to use grid renderer in Magento 2!

If you have any doubts regarding this post, just mention them in the Comments section below.

I would be happy to help.

Feel free to share the solution with Magento Community via social media.

Thank You.