New to Telerik UI for ASP.NET CoreStart a free 30-day trial

Highlight a Search Entry in the Editor Content

Environment

Product Version2024.1.130
ProductEditor 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.
Razor
    @(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)
    )

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

More ASP.NET Core Editor Resources

See Also