Make record field as a hyperlink in Magento 2 Grid

Question

I've created a custom grid, and in my custom grid there is a product id column, I've created it like this:

<column name="product_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="label" translate="true" xsi:type="string">Product ID</item>
                </item>
            </argument>
        </column>

The problem is that I need to make each record of product id in grid as hyperlink to redirect to product page, is there a way to do this?

Answer 1

I'd like to address Raphael's answer in two ways (sorry, not enough rep to comment):

1. The URL should be specified as ->getUrl('catalog/product/edit', [...], at least in Magento 2.1. (Instead of 'adminhtml/catalog_product/edit', which did not work for me.) It will still be in the adminhtml region.

2. Furthermore, you will need to specify that the column is HTML otherwise it will print out the HTML of the link itself instead of creating a link. This is done using the bodyTmpl as in this example:

   <column name="myColumn">
       <argument name="data" xsi:type="array">
           <item name="config" xsi:type="array">
               <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
               <item name="filter" xsi:type="string">text</item>
               <item name="sorting" xsi:type="string">asc</item>
               <item name="label" xsi:type="string" translate="true">My Column</item>
           </item>
       </argument>
   </column>
   

An important thing to point out here is that this will only change the rendering of the column to be a link; the value of the column itself is still what is pulled out of the database. So if you change the display text of the link and then in the UI sort by that column, it will still sort by the original value from the query. To change the queried value, you have to change the Grid/Collection object that is implementing the SearchResultsInterface.

Answer 2

You can do that by doing the following modification:

<column name="product_id" class="Vendor\Module\Ui\Component\Listing\Columns\ProductId">

Then you need to create Ui\Component\Listing\Columns\ProductId.php in your module folder with the following content:

<?php

namespace Vendor\Module\Ui\Component\Listing\Columns;

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

class ProductId extends \Magento\Ui\Component\Listing\Columns\Column
{
    /**
     * 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) {
                if (isset($item[$fieldName])) {
                    $html = "<a href='" . $this->context->getUrl('adminhtml/catalog_product/edit',['id'=>$item[$fieldName]]) . "'>";
                    $html .= __('Product Page');
                    $html .= "</a>";
                    $item[$fieldName] = $html;
                }
            }
        }

        return $dataSource;
    }
}