New to Telerik UI for ASP.NET Core? Start a 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:
- Select the search entry entered in the search panel.
- Access the Editor's HTML content and split it by empty space to create an array of substrings.
- Loop through the array and check if any of its elements contains the search entry.
- Wrap each occurrence in a
span
element with a classhighlight
and store the new content in a string variable. - Update the Editor content based on the string variable.
- 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: