Highlight the filtered string in multiselect

[Sushanth]

Hello,

I need to highlight using a css the filtered strings in a kendo ui multiselect for angular.

Is there an option for this?

Thanks

[John]

<ng-template kendoDropDownListItemTemplate let-dataItem>
  <span innerHtml="{{ dataItem.name }}"></span>
</ng-template>

If you have added the <strong> </strong> around the text, you can use the innerHtml of the angular span to provide the highlight.

[Svet]

Hi Sushanth,

In order to clarify the requirement, could I ask you to answer one question about the specific requirement. Is it supposed to highlight the text part in each item that is the same as the entered text in the input of the MultiSelect ? In the following example:

https://stackblitz.com/edit/angular-2s1p9k?file=app/app.component.ts

 if "a" is typed in, then is it required that the letter "a" is highlighted in the dropdown items: "Small" and "Large"

Thank you. We are looking forward to your reply.

Regards,
Svetlin
Progress Telerik

[Sushanth]

Hi Svetlin,

This is exactly what i was looking for..

ie if "a" is typed in, then it is required that the letter "a" is highlighted in the dropdown items: "Small" and "Large".

Regards

Sushanth.B

[Sushanth]

Hello,

Please provide me a solution for this.

Thanks

[Sushanth]

Hello,

Please provide a solution for this

[Svet]

Hi Sushant,

Thank you for confirming.

Indeed, there isn't such built-in feature that can be used out-of-the-box. Instead some solution based on custom JavaScript logic should be implemented. You may check the following article extracted from StackOverflow suggesting such approach:

https://stackoverflow.com/questions/8644428/how-to-highlight-text-using-javascript

Basically, what they suggest is to change the innerHTML of the elements that should support the highlighting functionality. I tried to implement that scenario in the context of the MultiSelect. Please check the following example:

https://stackblitz.com/edit/angular-2s1p9k-8wuv3v?file=app%2Fapp.component.ts

On (filterChange) event of the MultiSelect I am implementing the suggested logic and modifying the underlying DOM of each item in the popup to demonstrate the parts that are the same as the input text. However if the popup isn't closed and then it is searched again, there will be some undesired behavior as the default DOM of the items has been manually modified. What could be further done in order to enhance the example is to check if there are span elements with the "highlight" class available in the DOM on (filterChange) event and remove them.

I hope the provided suggestion helps you to achieve the desired custom functionality.

Regards,
Svetlin
Progress Telerik

[Svet]

Hi Sushant,

What else could be done is to manually close and open the popup when filtering by calling the toggle() method of the MultiSelect. That will ensure that the DOM is as by default when filtering. Here is an updated example:

https://stackblitz.com/edit/angular-2s1p9k-l1c3xd?file=app%2Fapp.component.ts

Indeed, that isn't an ideal solution, but I hope it helps or points you in the right direction of achieving the required custom functionality. I would like to add that the the suggested approach isn't based on a built-in or supported feature of Kendo UI for Angular and thus it should be used at the developer own discretion.

Regards,
Svetlin
Progress Telerik

[John]

The innerHtml allows you to insert actual HTML into a DOM element.

<ng-template kendoDropDownListItemTemplate let-dataItem>
  <span innerHtml="{{ dataItem.name }}"></span>
</ng-template>

Where .name is the property you have inserted your highlight HTML. 

Something like this to insert highlight html.

dateItem.name = dataItem.name.replace( \(findMe)\gi, "<strong>$1</strong>");

See if this works for you.