Magento – Magento 2.0 – Render Custom Sales Order Grid Column as Link instead of plain text

magento2

I managed to add a column on my sales order grid by adding a column to sales_order_grid table and added the following xmls respectively:

di.xml

<virtualType name="Magento\Sales\Model\ResourceModel\Order\Grid" type="Magento\Sales\Model\ResourceModel\Grid">
    <arguments>
        <argument name="columns" xsi:type="array">
            <item name="rahaha_transaction_id" xsi:type="string">sales_order.rahaha_transaction_id</item>
        </argument>
    </arguments>
</virtualType>

sales_order_grid.xml

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="sales_order_columns">
        <column name="rahaha_transaction_id">
            <argument name="data" xsi:type="array">
                <item name="js_config" xsi:type="array">
                    <item name="component" xsi:type="string">Magento_Ui/js/grid/columns/column</item>
                </item>
                <item name="config" xsi:type="array">
                    <item name="visible" xsi:type="boolean">true</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="align" xsi:type="string">left</item>
                    <item name="label" xsi:type="string" translate="true">Rahaha Txn</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

while I can hardcode the link on the column I added to the sales_order_grid table, is it possible to programmatically convert instead the grid column to show up as an HTML link, instead of plain text?

UPDATE
Ok I have managed to find a "potential" solution, the link shows up but, when you click on the link, it wont open the url but instead go to the Order details page. Any of you know how to solve this? This updated potential solution seems to be better since it also adds a filter to the custom column (which I was supposed to implement next after I have solved this issue).

sales_order_grid.xml

<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <columns name="sales_order_columns">
        <column name="rahaha_transaction_id" class="Rahaha\AdminSample\Ui\Component\Listing\Column\IsRahahaOrder">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
                    <item name="visible" xsi:type="boolean">false</item>
                    <item name="label" xsi:type="string" translate="true">Rahaha Txn</item>
                </item>
            </argument>
        </column>
    </columns>
</listing>

IsRahahaOrder.php Class

<?php
namespace Rahaha\AdminSample\Ui\Component\Listing\Column;

use Magento\Framework\Escaper;
use Magento\Ui\Component\Listing\Columns\Column;
use Magento\Framework\View\Element\UiComponent\ContextInterface;
use Magento\Framework\View\Element\UiComponentFactory;
use Magento\Sales\Model\ResourceModel\Order\Status\CollectionFactory;

class IsRahahaOrder extends Column
{
    protected $_resource;
    protected $_scopeConfig;
    protected $escaper;

    public function __construct(
        ContextInterface $context,
        UiComponentFactory $uiComponentFactory,
        Escaper $escaper,
        array $components = [],
        array $data = []
    ) {
        $this->escaper = $escaper;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }
    /**
     * Prepare Data Source
     *
     * @param array $dataSource
     * @return array
     */
    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as & $item) {
                $item[$this->getData('name')] = "{$item[$this->getData('name')]}";
            }
        }
        return $dataSource;
    }
}

Best Answer

Change the <column> tag to <actionsColumn>. So:

<column name="rahaha_transaction_id" class="Rahaha\AdminSample\Ui\Component\Listing\Column\IsRahahaOrder">

Becomes

<actionsColumn name="rahaha_transaction_id" class="Rahaha\AdminSample\Ui\Component\Listing\Column\IsRahahaOrder">
Related Topic