New to Telerik UI for ASP.NET Core? Download free 30-day trial

Highlight a Search Entry in the Editor Content

Environment

Product Version 2024.1.130
Product Editor for Progress® Telerik® UI for ASP.NET Core

Description

How can I highlight all occurrences of a search entry into the Editor's content?

This article uses the following use case to demonstrate this functionality—A Grid component contains a custom command that opens a Window with an Editor that binds to a specified Grid property. When the user searches through the Grid's data and opens the Window that holds the Editor, all occurrences of the search entry must be highlighted in the Editor.

Solution

The example below relies on the following key steps:

  1. Select the search entry entered in the search panel.
  2. Access the Editor's HTML content and split it by empty space to create an array of substrings.
  3. Loop through the array and check if any of its elements contains the search entry.
  4. Wrap each occurrence in a span element with a class highlight and store the new content in a string variable.
  5. Update the Editor content based on the string variable.
  6. Set a background color to the highlight class.
    @(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("NotesAudit")
    .Columns(columns => {
        columns.Bound(e => e.FirstName);
        columns.Bound(e => e.LastName);
        columns.Bound(e => e.Title);
        columns.Command(command => command.Custom("Notes").Click("showDetails")).Title("Notes").Width(70);
    })
    .ToolBar(toolbar =>
    {
        toolbar.Search().Text("Search Notes...");
    })
    .Search(s =>
    {
        s.Field(f => f.Title, "contains");
    })
    .DataSource(dataSource => dataSource
        .Ajax()
        .Read(read => read.Action("CustomCommand_Read", "Grid"))
    )
    )

    @(Html.Kendo().Window()
    .Name("Notes")
    .Title("Notes")
    .Visible(false)
    .Modal(true)
    .Draggable(true)
    .Content(@<text>
        @(Html.Kendo().Editor()
        .Name("NotesEditor")
        .Encoded(true)
        .HtmlAttributes(new { data_bind = "value: Title", style = "width:100%; height:720px" })
        )
    </text>)
    .Width(1300)
    .Height(900)
    )
    @addTagHelper *, Kendo.Mvc

    <kendo-grid name="NotesAudit">
        <datasource type="DataSourceTagHelperType.Ajax">
            <transport>
                <read url="@Url.Action("CustomCommand_Read", "Grid")"/>
            </transport>
        </datasource>
        <columns>
            <column field="FirstName"/>
            <column field="LastName"/>
            <column field="Title"/>
            <column width="70" title="Notes">
                <commands>
                    <column-command text="Notes" click="showDetails"/>
                </commands>
            </column>
        </columns>
        <toolbar>
            <toolbar-button name="search"></toolbar-button> 
        </toolbar>
        <search fields-extended="@(new object[] { new { Name = "Title", Operator = "contains"}})"></search>
    </kendo-grid>

    <kendo-window name="Notes"
        title="Notes"
        visible="false"
        modal="true"
        draggable="true" 
        width="1300"
        height="900">
        <content>
        <kendo-editor name="NotesEditor" encoded="true" data-bind="value: Title" style="width:100%; height:720px">
        </kendo-editor>
        </content>
    </kendo-window>
<script type="text/javascript">
    function showDetails(event) {
        var grid = $("#NotesAudit").getKendoGrid(); // Get a reference to the Grid.
        let dataItem = grid.dataItem($(event.target).closest("tr")); //Get the data item of the respective row.
        var window = $("#Notes").data("kendoWindow"); // Get a reference to the Window.
        var editor = $("#NotesEditor").data("kendoEditor"); // Get a reference to the Editor.
        kendo.bind(editor.element, dataItem); // Bind the Editor to the data item.
        let searchedText = $(".k-searchbox input").val().toLowerCase(); // Access the search panel entry.
        var editorBody = $(editor.body); // Get the Editor's body element.

        window.open().center(); // Open the Window.
        highlight(searchedText, editorBody); // Call the "highlight" function.
    }

    function highlight(text, editorBody) {
        var editorBodyHTML= $(editorBody).html();
        var splittedContent = $(editorBody).html().split(" "); // Convert the Editor's content into an array of substrings.
        var newContent = "";
        for(var i = 0; i < splittedContent.length; i++){ // Loop through the array.
            var index = splittedContent[i].toLowerCase().indexOf(text);
            if(index >= 0) { // Check for an occurrence.
                splittedContent[i] = splittedContent[i].substring(0,index) + "<span class='highlight'>" + splittedContent[i].substring(index,index+text.length) + "</span>" + splittedContent[i].substring(index + text.length); // Wrap each occurrence in a "span" element.
            }
            newContent += (" " + splittedContent[i]);
        }

        $(editorBody).html(newContent); // Update the Editor's content.
        $(editorBody).find('.highlight').css('background-color', 'yellow'); // Highlight the occurrences.
    }
</script>

For a runnable example based on the code above, refer to the following REPL samples:

More ASP.NET Core Editor Resources

See Also

In this article