0

I want to add custom HTML in Magento 2 Product Grid Column. I have added the column using this :

<?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="product_columns">
    <column name="stock_status" component="Magento_Ui/js/grid/columns/select" sortOrder="76">
          <settings>
                <addField>true</addField>
                <options class="Magento\Config\Model\Config\Source\Yesno"/>
                <filter>select</filter>
                <dataType>select</dataType>
                <sortable>false</sortable>
                <label translate="true">Custom Html</label>
         </settings>
   </column>
</columns> 
</listing>

enter image description here

But how to add HTML in this column and how to remove the link on clicking like right now when I click on it it will open the product page I don't want that by onclick.

1

1 Answer 1

0

Need to Create a custom Module :

app/code/Vendor/Module/view/adminhtml/ui_component/product_listing.xml

<column name="column_name" class="Vendor\Module\Ui\Component\Listing\Column\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="label" xsi:type="string" translate="true">Update Data</item>
        <item name="sortOrder" xsi:type="number">50</item>
        <item name="fieldClass" xsi:type="string">tnbl_product_update_data</item>
    </item>
</argument>

app/code/Vendor/Module/Ui/Component/Listing/Column/Mycolumn.php

<?php
    namespace Vendor\Module\Ui\Component\Listing\Column;
     
    use \Magento\Sales\Api\OrderRepositoryInterface;
    use \Magento\Framework\View\Element\UiComponent\ContextInterface;
    use \Magento\Framework\View\Element\UiComponentFactory;
    use \Magento\Ui\Component\Listing\Columns\Column;
    use \Magento\Framework\Api\SearchCriteriaBuilder;

     
    use Magento\Framework\Pricing\PriceCurrencyInterface;
     
    class Mycolumn extends Column
    {
        protected $_orderRepository;
        protected $_searchCriteria;
        protected $orderCollectionFactory;

        public function __construct(
         PriceCurrencyInterface $priceCurrency,
         ContextInterface $context,
         UiComponentFactory $uiComponentFactory,
         OrderRepositoryInterface $orderRepository,
         SearchCriteriaBuilder $criteria,
         \Magento\Sales\Model\ResourceModel\Order\CollectionFactory  $orderCollectionFactory,
         array $components = [],
         array $data = [])
        {
         $this->_orderRepository = $orderRepository;
         $this->orderCollectionFactory = $orderCollectionFactory;
         $this->_searchCriteria  = $criteria;

         $this->priceCurrency = $priceCurrency;
         parent::__construct($context, $uiComponentFactory, $components, $data);
        }
        public function prepareDataSource(array $dataSource)
        {
          if (isset($dataSource['data']['items'])) {
                foreach ($dataSource['data']['items'] as & $item) {
                    $customerOrder = $this->orderCollectionFactory->create()->addFieldToFilter('customer_id', $item['entity_id']);
                    $item[$this->getData('name')] = '<div>Save</div>';
                }
            }
         return $dataSource;
        }
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.