Highlight Filtering Characters in Popup

[Nagendra Gupta]

Hello Team,

I want to Highlight Typed Characters on Popup. Eg. If I type "del" and popup will show records started with Characters del like Delhi. "Del" will be highlighted in Delhi.

How to achieve this task. 

[Berly Christopher]

Hi Nagendra, 

  

Greetings from Syncfusion support. 

  

We can achieve the filtering with highlight feature with help of highlightSearch method as mentioned in the below code example. 

  

// maps the appropriate column to fields property 

  public fields: Object = { 

    text: "Name", 

    value: "Code", 

    itemCreated: (e: any) => { 

      highlightSearch(e.item, this.queryString, true, "StartsWith"); 

    } 

  }; 

  // filtering event handler to filter a Country 

  public onFiltering: EmitType<FilteringEventArgs> = ( 

    e: FilteringEventArgs 

  ) => { 

    // take text for highlight the character in list items. 

    this.queryString = e.text; 

    let query: Query = new Query(); 

    //frame the query based on search string with filter type. 

    query = 

      e.text !== "" ? query.where("Name", "startswith", e.text, true) : query; 

    //pass the filter data source, filter query to updateData method. 

    e.updateData(this.data, query); 

  }; 

} 

 

  

Sample Link: https://stackblitz.com/edit/highlight-filtering?file=app.component.ts  

  

Regards, 

Berly B.C 

[Nagendra Gupta]

Hi Berly,

Thanks for your update, but unfortunately your given example is not working with the column template option. Please suggest how to achieve this task with the template option.

Regards, 

Nagendra Gupta

[Berly Christopher]

Hi Nagendra, 

  

While using the template option, the data will be fetched with some delay. So, we suggest you to call the highlightSearch method in the setTimeOut as mentioned in the below code example. 

  

  public fields: Object = { 

    text: "Name", 

    value: "Code", 

    itemCreated: (e: any) => { 

      setTimeout(() => { 

        highlightSearch(e.item, this.queryString, true, "StartsWith"); 

      }); 

    } 

  }; 

 

  

Sample Link: https://stackblitz.com/edit/highlight-filtering-usm9jr?file=app.component.ts  

  

Regards, 

Berly B.C