Find and highlight the searched text in DataGrid

[JC]

Hi there,

I found the following enhancement was completed in March 2021 for Blazor. May I know more information about this, like a sample, or documentation related to this? By the way, I am using ASP.NET Core, if there is any similar sample for ASP.NET Core, that will be wonderful. 

Provide support for find and highlight the searched text in DataGrid in Blazor | Feedback Portal (syncfusion.com)

Many thanks in advance.

[Rajapandiyan Settu]

Hi,

Thanks for contacting Syncfusion support.

You can highlight the search text in the Grid by using queryCellInfo event (It is triggered before rendering the cell in DOM) of the Grid. In that event, the search value in the cell’s inner HTML is replaced with a span tag(containing the search value inside it) with a custom class. Find the below code example and sample for your reference.

queryCellInfo: https://ej2.syncfusion.com/javascript/documentation/api/grid/#querycellinfo

highlight the search text: https://ej2.syncfusion.com/javascript/documentation/grid/searching/#highlight-the-search-text

 

<script>

    // Grid’s queryCellInfo event handler

    function queryCellInfo(args){

        if(this.searchSettings.key.length > 0 && !args.cell.classList.contains('e-templatecell')){

            var key = this.searchSettings.key;

            // The cell content is received

            var cellContent = args.data[args.column.field];

            // The cell content is parsed to lower case

            var parsedContent = cellContent.toString().toLowerCase();

            // The search text(parsed to lower case) is checked if it is present in the parsed content

            if (parsedContent.includes(key.toLowerCase())) {

                var i = 0;

                var searchStr = '';

                // The actual search text is retrieved from the parsed content

                while (i < key.length) {

                    var index = parsedContent.indexOf(key[i]);

                    searchStr = searchStr + cellContent.toString()[index];

                    i++;

                }

                // The cell’s inner html is replaced with span tag(containing the search value)

                args.cell.innerHTML = args.cell.innerText.replaceAll(searchStr, "<span class='customcss'>" + searchStr + '</span>');

            }           

        }

       

    }

</script>

 

Then the required color is provided for the span tag’s custom class for highlighting the text.

 

<style>

    .e-grid .customcss {

        color: red;

        background: yellow;

    }

</style>

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_grid_highlight_search_text841227344.zip

Please get back to us if you require any further assistance.

Regards,

Rajapandiyan S

[JC]

Hi,  Rajapandiyan,

I want to thank you very much for this information. This gives me a good pointer. Thanks again for the help.

By the way, I am just curious about another question striking my brain. Because this is ASP.NET Core application, what if I do this at the server before sending the HTMLs back to the browser. For example, when the server receives the request from the Grid, the server queries the database and the server can markup the text. For example, instead of sending a text like "... ABCD....", the server can send "...<span class='customcss'>ABCD</span>...." back to the browser.

I just quickly tested the above and realized the text is indeed shown as-is. I see " ...<span class='customcss'>ABCD</span>...." is literally shown in the Grid. 

Jamie

[Rajapandiyan Settu]

Hi Jamie,

Thanks for your update.

In EJ2 Grid, the htmlString is shown as like in the dataSource which is bound to the Grid. By setting the disbleHtmlEncode property of the column as false, you can decode the htmlString into HTML Elements for that column. This can be explained in the below documentation.

Displaying Html content Doc: https://ej2.syncfusion.com/aspnetcore/documentation/grid/cell/content

DisableHtmlEncode: https://ej2.syncfusion.com/javascript/documentation/api/grid/column/#disablehtmlencode

 

<e-grid-column field="CustomerID" headerText="<span> Customer ID </span>" disableHtmlEncode="false" width="120"></e-grid-column> 

 

Regards,

Rajapandiyan S