Highlight a Search Entry in the Editor Content
Environment
| Product Version | 2024.1.130 |
| Product | Editor for Progress® Telerik® UI for ASP.NET MVC |
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
spanelement with a classhighlightand store the new content in a string variable. - Update the Editor content based on the string variable.
- Set a background color to the
highlightclass.
@(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)
)
<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 REPL example on highlighting the search entry within Editor's content.