Highlight Filtering Characters in Popup

Question

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 · Accepted Answer

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 · Answer

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 · Answer

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