April 8^th 2016

photo credit: tpe10-bloom-f25-l7-1920 via photopin (license)

How to add a custom renderer to the admin grid in Magento 2

Tags: magento 2

So you want to add a custom render to the admin grid in Magento 2 huh? Well, today I was faced with just that same task:
One parameter of my custom model was a reference to the manufacturer ID. So the manufacturer ID is stored in the database, but in my grid I wanted to show the name of the manufacturer instead of it’s ID of course. So I needed to add a custom renderer for this column. Lucky for me, achieving this is fairly simple in Magento 2.

Add a renderer to your grid XML

In my grid XML, on the position where I declare the manufacturer column, I added an argument called ‘renderer’. The value of this argument pointed to my custom renderer:

<block class="Magento\Backend\Block\Widget\Grid\Column" as="manufacturer_id">
    <arguments>
        <argument name="header" xsi:type="string" translate="true">Manufacturer</argument>
        <argument name="index" xsi:type="string">manufacturer_id</argument>
        <argument name="type" xsi:type="string">text</argument>
        <argument name="renderer" xsi:type="string">Your\Module\Block\Widget\Grid\Column\Renderer\Manufacturer</argument>
        <argument name="column_css_class" xsi:type="string">col-id</argument>
        <argument name="header_css_class" xsi:type="string">col-id</argument>
    </arguments>
</block>

<argument name="header" xsi:type="string" translate="true">Manufacturer</argument>

<argument name="index" xsi:type="string">manufacturer_id</argument>

<argument name="renderer" xsi:type="string">Your\Module\Block\Widget\Grid\Column\Renderer\Manufacturer</argument>

</arguments>

</block>

Note the renderer -argument in the example above. Now let’s take a look at …

The renderer class

<?php

namespace Your\Module\Block\Widget\Grid\Column\Renderer;

use Magento\Backend\Block\Context;
use Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer;
use Magento\Catalog\Model\ResourceModel\Eav\AttributeFactory;
use Magento\Framework\Registry;

class Manufacturer extends AbstractRenderer
{
    /**
     * @var Registry
     */
    protected $registry;
    
    /**
     * @var AttributeFactory
     */
    protected $attributeFactory;
    
    /**
     * Manufacturer constructor.
     * @param AttributeFactory $attributeFactory
     * @param Context $context
     * @param array $data
     */
    public function __construct(
        Registry $registry,
        AttributeFactory $attributeFactory,
        Context $context,
        array $data = array()
    )
    {
        $this->attributeFactory = $attributeFactory;
        $this->registry = $registry;
        parent::__construct($context, $data);
    }

    /**
     * Renders grid column
     *
     * @param \Magento\Framework\DataObject $row
     * @return mixed
     */
    public function _getValue(\Magento\Framework\DataObject $row)
    {
        // Get default value:
        $value = parent::_getValue($row);
        
        $options = $this->registry->registry('manufacturer_options');

        if (!$options) {
            $options = $this->attributeFactory->create()->loadByCode('catalog_product', 'manufacturer')->getOptions();
            $this->registry->register('manufacturer_options', $options);
        }
        
        foreach ($options as $option) {
            if ($option->getValue() == $value) {
                return $option->getLabel();
            }
        }
        
        return $value;
    }
}

<?php

namespace Your\Module\Block\Widget\Grid\Column\Renderer;

use Magento\Backend\Block\Context;

use Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer;

use Magento\Catalog\Model\ResourceModel\Eav\AttributeFactory;

use Magento\Framework\Registry;

class Manufacturer extends AbstractRenderer

{

/**

* @var Registry

protected $registry;

/**

* @var AttributeFactory

protected $attributeFactory;

/**

* Manufacturer constructor.

* @param AttributeFactory $attributeFactory

* @param Context $context

* @param array $data

public function __construct(

Registry $registry,

AttributeFactory $attributeFactory,

Context $context,

array $data = array()

)

{

$this->attributeFactory = $attributeFactory;

$this->registry = $registry;

parent::__construct($context, $data);

}

/**

* Renders grid column

* @param \Magento\Framework\DataObject $row

* @return mixed

public function _getValue(\Magento\Framework\DataObject $row)

{

// Get default value:

$value = parent::_getValue($row);

$options = $this->registry->registry('manufacturer_options');

if (!$options) {

$options = $this->attributeFactory->create()->loadByCode('catalog_product', 'manufacturer')->getOptions();

$this->registry->register('manufacturer_options', $options);

}

foreach ($options as $option) {

if ($option->getValue() == $value) {

return $option->getLabel();

}

return $value;

}

Let’s break this code down:

In the constructor I used dependency injection so I can have access to the registry and the attribute factory (that will help me later on loading the manufacturer attribute).
In the _getValue() -method I load the manufacturer-attribute, fetch it’s options, and return the label of the option that matches with my ID.
I also make use of the registry so that the $options -array only needs to be loaded once, and used many (which is of course best practice when rendering columns in the grid).

That’s it. Hoped this helps you some…

Visitors give this article an average rating of 3.6 out of 5.

How would you rate this article?

★ ★ ★ ★ ★