Filter Not Working for custom column ui_component grid Magento 2

Question

I have a grid with an admin UI component. There is a custom collection in the column. But when I apply the filter for that column then it shows me an error.

Please check my code below for the ui_componenet listing XML file.

<column name="sample_info" class="Namespace\Sampleproduct\Ui\Component\Listing\Column\SampleInfo">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="sortable" xsi:type="boolean">false</item>
                    <item name="dataType" xsi:type="string">text</item>
                    <item name="bodyTmpl" xsi:type="string">ui/grid/cells/html</item>
                    <item name="label" xsi:type="string" translate="true">Sample Request Information</item>
                    <item name="sortOrder" xsi:type="number">4</item>
                </item>
            </argument>
        </column>

Please check my data provider code below,

  <?php
namespace Namespace\Sampleproduct\Ui\Component\Listing\Column;

class SampleInfo extends \Magento\Ui\Component\Listing\Columns\Column
{
    protected $jsonHelper;

    /**
     * CustomerInfo constructor.
     * @param \Magento\Framework\View\Element\UiComponent\ContextInterface $context
     * @param \Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory
     * @param \Magento\Framework\Json\Helper\Data $jsonHelper
     * @param array $components
     * @param array $data
     */
    public function __construct(
        \Magento\Framework\View\Element\UiComponent\ContextInterface $context,
        \Magento\Framework\View\Element\UiComponentFactory $uiComponentFactory,
        \Magento\Framework\Json\Helper\Data $jsonHelper,
        array $components = [],
        array $data = []
    ){
        $this->jsonHelper = $jsonHelper;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    public function prepareDataSource(array $dataSource)
    {
        if(isset($dataSource['data']['items'])){
            foreach($dataSource['data']['items'] as &$item){
                $sampleInfo  = '<b>Product: </b>'.$item['product_name'].'<br/>';
                $sampleInfo .= '<b>Materials & Colors: </b><br/>';
                try {
                    $sampleColors = $this->jsonHelper->jsonDecode($item['colors']);
                    foreach($sampleColors as $materialName=>$colorData) {
                        $sampleInfo .= $materialName.' - '.implode(', ',$colorData).'<br/>';
                    }
                } catch (\Exception $e) {
                    $materials = explode(',',$item['material']);
                    if(!empty($materials[0])) {
                        $sampleInfo .= $materials[0].' - ';
                    }
                    $sampleInfo .= $item['colors'].'<br/>';
                }

                $item['sample_info'] = $sampleInfo;
            }
        }
        return $dataSource;
    }
}

When I search for any string, it throws the error. Please check the attached screenshot,

Please let me know how can I filter the custom column with the custom collection.

Thanks. Your help would be appreciated.!!!!

Answer 1

In Your DataProvider File, there is a function named : addFilter(\Magento\Framework\Api\Filter $filter)

You have to modify that a little bit, I have added the sample code here, In which you can replace your attribute_code from which you want to filter the values with collection.

public function addFilter(\Magento\Framework\Api\Filter $filter)
    {
        if (isset($this->addFilterStrategies[$filter->getField()])) {
            $this->addFilterStrategies[$filter->getField()]
                ->addFilter(
                    $this->getCollection(),
                    $filter->getField(),
                    [$filter->getConditionType() => $filter->getValue()]
                );
        } else {
            // Custom code for Filter
            if ($filter->getField() == 'sample_info') {
                if ($filter->getValue() == 'your_filter_value') {
                    $filterData = [
                        [
                            'attribute' => 'your_attribute_name',
                            'null' => true
                        ]
                    ];
                    $this->getCollection()->addAttributeToFilter($filterData);
                } else {
                    $filterData = [
                        [
                            'attribute' => 'your_attribute_name',
                            'eq' => $filter->getValue()
                        ]
                    ];
                    $this->getCollection()->addAttributeToFilter($filterData);
                }
            }
            // End
            else {
                parent::addFilter($filter);
            }
        }
    }

Answer 2

try to add column by below method.

https://meetanshi.com/blog/add-custom-column-in-order-grid-in-magento-2/

OR

https://amasty.com/knowledge-base/how-to-add-a-custom-column-to-the-order-grid-in-magento-2.html