[hightlight text] when searching for content in the display grid wijmo

[hightlight text] when searching for content in the display grid wijmo

Posted by: tvhau.dev on 28 April 2022, 2:59 pm EST

• 

  tvhau.dev

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 28 April 2022, 2:59 pm EST

  Hi,
  
  I’m using wijimo version 5.20192.631 and angularjs
  
  I’m currently investigating the [hightlight text] solution when searching for content in the display grid
  
  I have tried reciprocal like sample below
  
  Sample: * “https://jsfiddle.net/tvhaudev/691xw57g/51/”

  In addition, If there is a better, more optimal solution than the solution above, please help.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 1 May 2022, 9:57 pm EST

  Hello,

  You may refer to the below sample link demonstrating, how to highlight the searched data into FlexGrid:

  https://jsfiddle.net/ngx01fbL/1/

  Also, Wijmo provides FlexGridSearch to search and highlight the data in the grid with better performance and few lines of code. You need to upgrade your wijmo build to the latest to use the control. You can refer to the below demo link for reference:
  
  https://www.grapecity.com/wijmo/demos/Grid/FilteringSearching/FlexGridSearch/angular

  Regards

• 

  tvhau.dev

  • Post Options:
  • Link
    Copy

  Posted 3 May 2022, 1:14 am EST

  Thank you for the help. I will try using that.

• 

  tvhau.dev

  • Post Options:
  • Link
    Copy

  Posted 14 May 2022, 2:12 am EST - Updated 3 October 2022, 2:58 am EST

  Hi,
  
  I tried your solution and it worked as expected. However, I have another question
  
  In case the data contains a span tag, the string wrapped by the span tag is not highlighted, but directly displays the span tag to the grid like the red frame of the image below.
  
  
  
  how to highlight string wrapped by span tag without showing span tag on grid?

  sample: https://jsfiddle.net/tvhaudev/73ypukc6/4/

  please help.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 15 May 2022, 7:25 pm EST

  Hello,

  You may set the isContentHtml property of the Column to true, to hide the HTML content from the cell data. Also, please remove the CSS applied for ‘.Highlighting span’ as it is not required. Please refer to the updated sample link below demonstrating the same:

  https://jsfiddle.net/1k4vw7h2/

  Regards

• 

  tvhau.dev

  • Post Options:
  • Link
    Copy

  Posted 28 May 2022, 12:14 am EST

  Thanks sonu.pandey
  
  Your solution helped me a lot.