Magento 2.2 – Custom Column Value in UI Grid Listing

columngridmagento2.2ui

I followed this link How to display Yes/No values in admin grid (Magento2)?
to get the dynamic custom column value where the column field in grid was

app/code/Vendor/Theme/view/adminhtml/ui_component/your_ui_grid.xml

<column name="instock" class="Vendor\Module\Ui\Component\Listing\Column\InStock">
<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="sortOrder" xsi:type="number">60</item>
        <item name="label" translate="true" xsi:type="string">InStock</item>
        <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>
        <item name="dataType" xsi:type="string">select</item>
    </item>
</argument>

The file in Ui is:

app/code/Vendor/Module/Ui/Component/Listing/Column/InStock.php

<?php

namespace Vendor\Module\Ui\Component\Listing\Column;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Ui\Component\Listing\Columns\Column;

class Status extends Column
{
public function __construct(
    ContextInterface $context,
    UiComponentFactory $uiComponentFactory,
    array $components = [],
    array $data = []
) {
    parent::__construct($context, $uiComponentFactory, $components, $data);
}

public function prepareDataSource(array $dataSource)
{
    if (isset($dataSource['data']['items'])) {
        foreach ($dataSource['data']['items'] as &$items) {
            // $items['instock'] is column name
            if ($items['instock'] == 1) {
                $items['instock'] = 'Yes';
            } else {
                $items['instock'] = 'No';
            }
        }
    }
    return $dataSource;
}
}

The column value in prepareDataSource(array $dataSource) is received fine , but when I apply the condition and return $dataSource – It does not display in the grid colum . Can any one figure out the issue?

Best Answer

Remove argument component from

app/code/Vendor/Theme/view/adminhtml/ui_component/your_ui_grid.xml

<item name="component" xsi:type="string">Magento_Ui/js/grid/columns/select</item>

If you return HTML data then pass bodyTmpl argument <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>

Final your_ui_grid.xml

<column name="instock" class="Vendor\Module\Ui\Component\Listing\Column\InStock">
<argument name="data" xsi:type="array">
    <item name="config" xsi:type="array">
        <item name="sortOrder" xsi:type="number">60</item>
        <item name="label" translate="true" xsi:type="string">InStock</item>
        <item name="dataType" xsi:type="string">select</item>
        <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
    </item>
</argument>
Related Topic