how to display input with anchor link in admin grid using ui component in magento2?

Question

I want to display product name with anchor link with specify that products' url in admin grid using ui component.

I am using magento 2.2.5 version.

 <column name="productname">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="filter" xsi:type="string">text</item>
 <item name="editor" xsi:type="array">
 <item name="editorType" xsi:type="string">text</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">true</item>
 </item>
 </item>
 <item name="label" xsi:type="string" translate="true">Product Name</item>
 </item>
 </argument>
 </column>

enter image description here

• Ashish Viradiya: This might help you: magento.stackexchange.com/a/200590/62614
• Rohan Hapani: Can you please post your file code from where this data display?
• Rutvee Sojitra: @RohanHapani i added code in question which is used in ui component listing file
• Rutvee Sojitra: @RohanHapani have you try Magento_Ui/js/grid/columns/link?
• Rohan Hapani: No. I didn't try that. But, you can solve your question using this answer.

Answer 1

Try to use this below solution. Create separate file to apply link content before prepare datasource of ui grid. If you want to convert your rendering value into html along with cells html, then you need to add <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item> inside your column item :

<column name="productname" class="VendorName\ModuleName\Ui\Component\Listing\Column\ProductName">
 <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="editor" xsi:type="array">
 <item name="editorType" xsi:type="string">text</item>
 <item name="validation" xsi:type="array">
 <item name="required-entry" xsi:type="boolean">true</item>
 </item>
 </item>
 <item name="label" xsi:type="string" translate="true">Product Name</item>
 </item>
 </argument>
</column>

Create file at VendorName\ModuleName\Ui\Component\Listing\Column\ProductName.php :

<?php
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
namespace VendorName\ModuleName\Ui\Component\Listing\Column;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\UrlInterface;
class ProductName extends Column {
 protected $_productFactory;
 protected $_urlBuilder;
 public function __construct(
 ....
 \Magento\Catalog\Model\ProductFactory $productFactory,
 UrlInterface $urlBuilder,
 \Magento\Framework\View\Element\UiComponent\ContextInterface $context,
 \Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory,
 array $components = [],
 array $data = []
 ) {
 ....
 $this->_urlBuilder = $urlBuilder;
 $this->_productFactory = $productFactory;
 parent::__construct($context, $uiComponentFactory, $components, $data);
 ....
 }
 public function prepareDataSource(array $dataSource) {
 if (isset($dataSource['data']['items'])) {
 foreach ($dataSource['data']['items'] as $key => $items) {
 $product = $this->_productFactory->create()->load(1);
 $product_name = html_entity_decode('<a href="' . $this->_urlBuilder->getUrl($product->getProductUrl()) . '">' . $items['title'] . '</a>');
 $dataSource['data']['items'][$key]['productname'] = $product_name;
 }
 }
 return $dataSource;
 }
}

UPDATE :

You can set your product url in href attribute. If you don't have product url then you need to get it and then use this below code :

public function prepareDataSource(array $dataSource) {
 if (isset($dataSource['data']['items'])) {
 foreach ($dataSource['data']['items'] as $key => $items) {
 $product_name = [
 'href' => your product URL,
 'label' => __($items['productname'])
 ];
 $dataSource['data']['items'][$key]['productname'] = $product_name;
 }
 }
 return $dataSource;
}

• Rutvee Sojitra: How the link will set here?
• Rohan Hapani: in your table field, data should be set like this : <a href="a.phtml"> Test link </a>
• Rohan Hapani: In your table's field which format value is set? can you give me example?
• Rutvee Sojitra: product_name TestProduct
• Rutvee Sojitra: I want to display in grid this product name with producturl