Magento 2 : External link in admin order grid not linking when click

Question

I have an extra column in my Magento 2 admin order grid, with a column with external urls. This is working well (I see an overview of al my hyperlinks).

But when I click on a url, I go to the order detail page instead of my external url. I suppose, this is due the "data-bind" Knockout code. How can I make working urls? Can I disable the onclick events for a single column?

(tricks like css z-index:999 are not working...)

Answer 1

If You are using custom class for rendering column ( for example <column name="link" class="My\Module\Ui\Component\Listing\Column\Link">) which convert your column value to link html along with cells html js ui component (<item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>) you can disable default action which fires on grid row click by adding to your column config item:

<item name="fieldAction" xsi:type="boolean">false</item>

• Ranjit Shinde: Thanks. It worked for me. I missed to add <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>

Answer 2

I had the same issue for UI grid and resolved it by rewriting component for current cell:

Vendor/MyModule/view/adminhtml/ui_component/my_grid_listing.xml file:

<column name="link">
 <argument name="data" xsi:type="array">
 <item name="config" xsi:type="array">
 <item name="label" xsi:type="string" translate="true">Link</item>
 <item name="component" xsi:type="string">Vendor_MyModule/js/grid/cells/link</item>
 <item name="sortOrder" xsi:type="number">50</item>
 <item name="sortable" xsi:type="boolean">false</item>
 <item name="disableAction" xsi:type="boolean">true</item>
 </item>
 </argument>
</column>

and disabled function getFieldHandler() in:

Vendor/MyModule/view/adminhtml/web/js/grid/cells/link.js

define([
 'Magento_Ui/js/grid/columns/column'
 ],
 function (Column) {
 'use strict';
 return Column.extend({
 defaults: {
 bodyTmpl: 'Vendor_MyModule/grid/cells/link',
 },
 getFieldHandler: function (record) {
 return false;
 }
 });
 }
);

Template:

Vendor/MyModule/view/adminhtml/web/template/grid/cells/link.html

<a class="action-menu-item"
 text="$col.getLabel($row())"
 attr="href: $col.getLabel($row())"
 target="_blank"/>

• Rutvee Sojitra: It's not working

Answer 3

You can create Render File for clickable that URL.

URL.php inside Renderer Folder

<?php
namespace Namespace\Modulename\Block\Adminhtml\Module\Edit\Tab\Renderer;
use Magento\Framework\DataObject;
class Url extends \Magento\Backend\Block\Widget\Grid\Column\Renderer\AbstractRenderer
{
 public function render(DataObject $row)
 {
 $rowId = $row->getId();
 $objectManager = \Magento\Framework\App\ObjectManager::getInstance();
 $storeManager = $objectManager->get('\Magento\Store\Model\StoreManagerInterface');
 $baseUrl = $storeManager->getStore()->getBaseUrl();
 return '<a target="_blank" href="'.$baseUrl.'">'.$baseUrl.'</a>';
 }
}

And inside your Grid.php

protected function _prepareColumns()
{
 $this->addColumn('id', [
 'header' => __('URL'),
 'index' => 'id',
 'renderer' => 'Namespace\Modulename\Block\Adminhtml\Module\Edit\Tab\Renderer\Url'
 ]);
}

Your URL will be clickable and open that URL in new tab. Hope it helps :)