{"id":1802,"date":"2021-06-16T13:10:34","date_gmt":"2021-06-16T13:10:34","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/use-grid-renderer-in-magento-2\/"},"modified":"2025-07-16T17:41:25","modified_gmt":"2025-07-16T12:11:25","slug":"use-grid-renderer-in-magento-2","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/use-grid-renderer-in-magento-2\/","title":{"rendered":"How to Use Grid Renderer in Magento 2"},"content":{"rendered":"\n

Magento 2 admin grids<\/a> 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.<\/p>\n\n\n\n

Additionally, the admin may\u00a0use grid renderer in Magento 2<\/strong><\/em>\u00a0to 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\u00a0Magento 2\u00a0that holds a path of a PHP file and redirects to that file.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

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.<\/p>\n\n\n\n

Method to Use Grid Renderer in Magento 2<\/h2>\n\n\n\n

1. Use the below code in the registration.php<\/strong> file at app\\code\\Vendor\\Module<\/strong><\/strong><\/p>\n\n\n\n

<?php\n\n\\Magento\\Framework\\Component\\ComponentRegistrar::register(\n    \\Magento\\Framework\\Component\\ComponentRegistrar::MODULE,\n    'Vendor_Module', __DIR__\n);<\/pre>\n\n\n\n
2. Create the module.xml<\/strong> file at app\\code\\Vendor\\Module\\etc<\/strong><\/strong><\/strong><\/strong><\/p>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\"\n        xsi:noNamespaceSchemaLocation=\"urn:magento:framework:Module\/etc\/module.xsd\">\n    <module name=\"Vendor_Module\" setup_version=\"1.0.0\"\/>\n<\/config><\/pre>\n\n\n\n
3. Create the Grid.php<\/strong> file at app\\code\\Vendor\\Module\\Block\\Adminhtml\\CustomField\\Edit\\Tab<\/strong><\/strong><\/strong><\/strong><\/p>\n\n\n\n
<?php\n\nnamespace Vendor\\Module\\Block\\Adminhtml\\CustomField\\Edit\\Tab;\n\nuse Vendor\\Module\\Model\\ResourceModel\\ModuleHistory\\CollectionFactory;\n\nclass Grid extends \\Magento\\Backend\\Block\\Widget\\Grid\\Extended\n{\n    protected $context;\n    protected $backendHelper;\n    protected $collectionFactory;\n\n    public function __construct(\n        \\Magento\\Backend\\Block\\Template\\Context $context,\n        \\Magento\\Backend\\Helper\\Data $backendHelper,\n        CollectionFactory $collectionFactory,\n        array $data = []\n    )\n    {\n        $this->collectionFactory = $collectionFactory;\n        parent::__construct($context, $backendHelper, $data);\n    }\n\n    protected function _construct()\n    {\n        parent::_construct();\n        $this->setId('custom_field');\n        $this->setDefaultSort('id');\n        $this->setUseAjax(true);\n    }\n\n    protected function _prepareCollection()\n    {\n        $collection = $this->collectionFactory->create()->addFieldToFilter(\"customer_id\", $this->_coreRegistry\n            ->registry(RegistryConstants::CURRENT_CUSTOMER_ID));\n        $this->setCollection($collection);\n        return parent::_prepareCollection();\n    }\n\n    protected function _prepareColumns()\n    {\n        $this->addColumn(\n            'entity_id',\n            [\n                'header' => __('Entity Id'),\n                'sortable' => true,\n                'index' => 'entity_id',\n                'header_css_class' => 'col-id',\n                'column_css_class' => 'col-id'\n            ]\n        );\n        $this->addColumn(\n            'Balance',\n            [\n                'header' => __('Balance'),\n                'sortable' => true,\n                'index' => 'category_id',\n                'renderer' => 'Vendor\\Module\\Block\\Adminhtml\\Customer\\Grid\\Renderer\\Balance'\n\n            ]\n        );\n\n        return parent::_prepareColumns();\n    }\n}<\/pre>\n\n\n\n
4. Create Balance.php<\/strong> file at app\\code\\Vendor\\Module\\Block\\Adminhtml\\Customer\\Grid\\Renderer<\/strong><\/strong><\/strong><\/strong><\/p>\n\n\n\n
<?php\n\nnamespace Vendor\\Module\\Block\\Adminhtml\\Customer\\Grid\\Renderer;\n\nuse Magento\\Backend\\Block\\Context;\nuse Magento\\Backend\\Block\\Widget\\Grid\\Column\\Renderer\\AbstractRenderer;\nuse Magento\\Catalog\\Helper\\Image;\nuse Magento\\Framework\\DataObject;\nuse Magento\\Store\\Model\\StoreManagerInterface;\nuse Vendor\\Module\\Model\\ResourceModel\\ModuleHistory\\CollectionFactory;\n\nclass Balance extends AbstractRenderer\n{\n    private $_storeManager;\n    private $imageHelper;\n    private $collectionFactory;\n\n    public function __construct(\n        Context $context,\n        Image $imageHelper,\n        StoreManagerInterface $storemanager,\n        CollectionFactory $collectionFactory,\n        array $data = []\n    )\n    {\n        $this->_storeManager = $storemanager;\n        parent::__construct($context, $data);\n        $this->_authorization = $context->getAuthorization();\n        $this->imageHelper = $imageHelper;\n        $this->collectionFactory = $collectionFactory;\n    }\n\n    public function render(DataObject $row)\n    {\n        if ($row->getIsDeduct()) {\n            $difference = '<span class=\"price\" style=\"color:red\">-' . $this->_storeManager->getStore()\n                    ->getCurrentCurrency()->getCurrencySymbol() . $row->getBalance() . '<\/span>';\n        } else {\n            $difference = '<span class=\"price\" style=\"color:green\">+' . $this->_storeManager->getStore()\n                    ->getCurrentCurrency()->getCurrencySymbol() . $row->getBalance() . '<\/span>';\n        }\n        return $difference;\n    }\n}<\/pre>\n\n\n\n
The output of the above implementation will be:<\/p>\n\n\n
\n
\"How<\/figure>\n<\/div>\n\n\n
That\u2019s it to use grid renderer in Magento 2!<\/p>\n\n\n\n
Feel free to share the solution with Magento Community via social media.<\/p>\n\n\n\n
Thank You.<\/p>\n","protected":false},"excerpt":{"rendered":"
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…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-1802","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1802","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=1802"}],"version-history":[{"count":5,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1802\/revisions"}],"predecessor-version":[{"id":18049,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/1802\/revisions\/18049"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=1802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=1802"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=1802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}