How to make clickable link on admin grid in Magento 2 - Magesan

How to make clickable link on admin grid in Magento 2

How to make clickable link on admin grid in Magento 2

You need to add bodyTmpl path will be ui/grid/cells/html. This line of code is responsible for to act like as a html.

Two ways to do :

1) : bodyTmpl to add via column

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

Full code of below to get an example of how you can add bodyTml in you ui component xml file.

<column name="store_name" class="Magesan\Extension\Ui\Component\Listing\Column\StoreName">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Store Name</item>
            <item name="sortOrder" xsi:type="number">20</item>
            <item name="filter" xsi:type="string">text</item>
            <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
        </item>
    </argument>
</column>

2) : bodyTmpl to add via column settings

<bodyTmpl>ui/grid/cells/html</bodyTmpl>

Full code of below to get an example of how you can add bodyTml in you ui component xml file.

<column name="store_name" class="Magesan\Extension\Ui\Component\Listing\Column\StoreName" sortOrder="3">
	<settings>
		<filter>text</filter>
		<bodyTmpl>ui/grid/cells/html</bodyTmpl>
		<label translate="true">Store Name</label>
	</settings>
</column>

In the class Magesan\Extension\Ui\Component\Listing\Column\StoreName

StoreName.php

<?php

namespace Magesan\Extension\Ui\Component\Listing\Column;

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

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

    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            $fieldName = $this->getData('name');
            foreach ($dataSource['data']['items'] as &$item) {
                $link = "magesan.com";
                if ($link) {
                    $item[$fieldName] = "<a target='_blank' href='" . $link . "'>" . $item["store_name"] . "</a>";
                } else {
                    $item[$fieldName] = "<a href='javascript:void(0)'>" . $item["store_name"] . "</a>";
                }
            }
        }

        return $dataSource;
    }
}

This is how it will look in grid.

Note : You can remove target=’_blank’ from anchor if you don’t want to redirect to new tab.

Happy Coding…

Leave a Reply

Your email address will not be published. Required fields are marked *.

*
*
You may use these <abbr title="HyperText Markup Language">HTML</abbr> tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>