Filtering template image columns

[Carlos Rodríguez García]

Hi,

I have a column where a template like this is applied:

            <script type="text/x-jsrender" id="statusTemplatePLP">

                <img src="/Content/Images/status/{{*: data.status}}.png" alt="{{*: data.status}}" title="{{*: data.status}}" />

            </script>

That status can be something like "In Review".

I am using the filtering bar to filter records and on this field, I cannot use it as it does not filter. If I try to type "In" it yields no results as the image is there instead of the text. I have also tried adding a <a>In review</a> in front of the image and still it does not work.

Is there a way to apply a custom filter for a specific field?

Thank you for your support!

Kind regards,

Carlos

[Ragavee U S]

Hi Carlos, 

Generally, the filtering action is performed based on the field property of the column. However if you want to apply custom filter on a column, then we suggest you to use the filterBarTemplate feature of the grid. Please refer to the below online sample link for more information on this feature. 

Online Sample Link: http://js.syncfusion.com/demos/web/#!/bootstrap/grid/filtering/defaultfunctionalities 

Please refer to the below demo link in which we have achieved your requirement to apply custom filter for a column. 

http://jsplayground.syncfusion.com/orawtxsp 

In the above sample, we have bound “Title” field for the template column and have displayed images based on the “EmployeeID” column. Using the filterBarTemplate feature, we have created an input element using create event And have bound the read function in the focusout event of the input element. 

As you can see, in the read function, we have invoked the filterColumn method of the grid passing the field, value and operator for performing filtering operation on that specific field. 

Regards, 

Ragavee U S. 

[Carlos Rodríguez García]

Hi,

Thank you very much for the information, this has solved my issue and given me some great ideas!

Again, thank you for your support!

Kind regards,

Carlos

[Ragavee U S]

Hi Carlos, 

  

Thanks for your update. 

 

We are happy that your requirement is achieved. 

  

Regards, 

Ragavee U S.