If you want to set clickable value in the Magento 2 Grid then please follow the below steps. I have made this type of functionality for my custom module.

Step 1: Please add this code to your UI Listing XML. We have added bodyTmpl to make value clickable in the UI column.

<column name="holiday_id" class="Magemonkeys\Holidaylisting\Ui\Component\Listing\Column\HolidayId">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">ID #</item>
            <item name="sortOrder" xsi:type="number">10</item>
            <item name="filter" xsi:type="string">text</item>
            <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
        </item>
    </argument>
</column>

<item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>

</item>

</argument>

</column>

Step 2: We have to paste the below code for Class which is defined in the <column> tag.
Path : app\code\Magemonkeys\Holidaylisting\Ui\Component\Listing\Column\HolidayId.php

<?php

namespace Magemonkeys\Holidaylisting\Ui\Component\Listing\Column;

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


class HolidayId extends Column
{
    private $urlBuilder;

    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        UrlInterface $urlBuilder,
        array $components = [],
        array $data = []
    ) {
        $this->urlBuilder = $urlBuilder;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as & $item) {
                if (isset($item['holiday_id'])) {
                    $url = $this->urlBuilder->getUrl('holiday/view', ['holiday_id' => $item['holiday_id']]);
            		$link = '<a href="' . $url . '"">' . $item['holiday_id'] . '</a>';
                    $item['holiday_id'] = $link;
                }
            }
        }
        return $dataSource;
    }
}

<?php

namespace Magemonkeys\Holidaylisting\Ui\Component\Listing\Column;

use Magento\Framework\UrlInterface;

use Magento\Ui\Component\Listing\Columns\Column;

use Magento\Framework\View\Element\UiComponentFactory;

use Magento\Framework\View\Element\UiComponent\ContextInterface;

class HolidayId extends Column

{

private $urlBuilder;

public function __construct(

ContextInterface $context,

UiComponentFactory $uiComponentFactory,

UrlInterface $urlBuilder,

array $components = [],

array $data = []

) {

$this->urlBuilder = $urlBuilder;

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

}

public function prepareDataSource(array $dataSource)

{

if (isset($dataSource['data']['items'])) {

foreach ($dataSource['data']['items'] as & $item) {

if (isset($item['holiday_id'])) {

$url = $this->urlBuilder->getUrl('holiday/view', ['holiday_id' => $item['holiday_id']]);

$link = '<a href="' . $url . '"">' . $item['holiday_id'] . '</a>';

$item['holiday_id'] = $link;

}

return $dataSource;

}

Now you can see the Id column values are clickable.

Fill the below form if you have any Magento programming need.

Magento 2 : Get request params in your controller file
If you want get query string params in controller file,...
Magento 2 : Redirect custom page after login using plugin
Create di.xml and add the below code Magemonkey/Redirect/etc/frontend/di.xml [crayon-628769ae79705399398501/] Create...
Magento 2 – How to change local date to UTC date?
You can try below code to change local date to...
How to change order status using cron?
Step 1: First you need to add registration.php file in...
Magento 2: How to add close button on error and success message?
Step1 : Override message.js in current theme file on the...

Author Info

Hire A. Patel

Fill the form & Get Installation Support

Make clickable Value of Grid (UI Column)

Recent Articles

Author Info

Get a Free Quote

Connect With Us