Magento 2 Create custom renderer in admin grid

Today we discussed How to create Magento 2 Create custom renderer in admin grid. Sometime we need get some other values than current values. For example get product name instead of product id. For that we need to create a custom renderer for gird that will show the product name instead of product id so here we start. First we need to add column class that we need to renderer.

Step 1:

Create a ui class of column.

<column name="vendor_id" class="QaisarSatti\HelloWorld\Ui\Component\Listing\Column\Testing">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Vendor</item>
</item>
</argument>
</column>

Step 2:

Create a renderer file for that particular column.

PME\PoManager\Ui\Component\Listing\Column\Vendor

<?php
namespace QaisarSatti\HelloWorld\Ui\Component\Listing\Column;

use Magento\Framework\Escaper;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Ui\Component\Listing\Columns\Column;

class Testing extends Column
{
protected $escaper;

protected $systemStore;
protected $productloader;

public function __construct(
ContextInterface $context,
UiComponentFactory $uiComponentFactory,
\Magento\Catalog\Model\ProductFactory $productloader,
Escaper $escaper,
array $components = [],
array $data = []
) {
$this->escaper = $escaper;
$this->productloader = $productloader;
parent::__construct($context, $uiComponentFactory, $components, $data);
}

/**
* Prepare Data Source
*
* @param array $dataSource
* @return array
*/
public function prepareDataSource(array $dataSource)
{
if (isset($dataSource['data']['items'])) {
foreach ($dataSource['data']['items'] as & $item) {
$product = $this->productloader>create()->load((int)$item[$this->getData('name')]);

$item[$this->getData('name')] =$product->getName();
}
}

return $dataSource;
}
}

Qaisar Satti

Hi, I'm Qaisar Satti! I've been a developer for over 20 years, and now I love sharing what I've learned through tutorials and guides. Whether you're working with Magento, PrestaShop, or WooCommerce, my goal is to make your development journey a bit easier and more fun. When I'm not coding or writing, you can find me exploring new tech trends and hanging out with the amazing developer community. Thanks for stopping by, and happy coding!

One thought on “Magento 2 Create custom renderer in admin grid”

bhavar says:

January 30, 2018 at 12:02 pm

I have create the xml file Bliss/Callforprice/view/adminhtml/ui_component/my_custom_pname.xml
and created the class Bliss/Callforprice/Ui/Component/Listing/Column/Product.php.

I just want to add the custom column in the grid but it does not appeared.

I have created my grid using blocks. so can i create the custom column in the grid?

if yes then how can i call this render file in my grid.php?

Log in to Reply