Skip to content

Commit 1d62c78

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 3dca971 commit 1d62c78

File tree

3 files changed

+484
-0
lines changed

3 files changed

+484
-0
lines changed

‎docs-aspnet/knowledge-base/editor-highlight-search-entry.md‎

Lines changed: 194 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,194 @@
1+
---
2+
title: Highlight a Search Entry in the Editor Content
3+
description: How can I highlight a search entry in the content of the Telerik UI for {{ site.framework }} Editor?
4+
type: how-to
5+
page_title: Highlight a Search Entry in the Editor Content
6+
slug: editor-highlight-search-entry
7+
tags: editor, highlight, search, entry, grid, window
8+
res_type: kb
9+
component: editor
10+
---
11+
12+
## Environment
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product Version</td>
17+
<td>2024.1.130</td>
18+
</tr>
19+
<tr>
20+
<td>Product</td>
21+
<td>Editor for Progress® Telerik® {{ site.product_short }}</td>
22+
</tr>
23+
</tbody>
24+
</table>
25+
26+
## Description
27+
28+
How can I highlight all occurrences of a search entry into the Editor's content?
29+
30+
This article uses the following use case to demonstrate this functionality&#8212;A [Grid](https://demos.telerik.com/{{ site.platform }}/grid/search-panel) component contains a custom command that opens a [Window](https://demos.telerik.com/{{ site.platform }}/window) with an [Editor](https://demos.telerik.com/{{ site.platform }}/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.
31+
32+
## Solution
33+
34+
The example below relies on the following key steps:
35+
36+
1. Select the search entry entered in the search panel.
37+
1. Access the Editor's HTML content and split it by empty space to create an array of substrings.
38+
1. Loop through the array and check if any of its elements contains the search entry.
39+
1. Wrap each occurrence in a `span` element with a class `highlight` and store the new content in a string variable.
40+
1. Update the Editor content based on the string variable.
41+
1. Set a background color to the `highlight` class.
42+
43+
```HtmlHelper
44+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
45+
.Name("NotesAudit")
46+
.Columns(columns => {
47+
columns.Bound(e => e.FirstName);
48+
columns.Bound(e => e.LastName);
49+
columns.Bound(e => e.Title);
50+
columns.Command(command => command.Custom("Notes").Click("showDetails")).Title("Notes").Width(70);
51+
})
52+
.ToolBar(toolbar =>
53+
{
54+
toolbar.Search().Text("Search Notes...");
55+
})
56+
.Search(s =>
57+
{
58+
s.Field(f => f.Title, "contains");
59+
})
60+
.DataSource(dataSource => dataSource
61+
.Ajax()
62+
.Read(read => read.Action("CustomCommand_Read", "Grid"))
63+
)
64+
)
65+
66+
@(Html.Kendo().Window()
67+
.Name("Notes")
68+
.Title("Notes")
69+
.Visible(false)
70+
.Modal(true)
71+
.Draggable(true)
72+
.Content(@<text>
73+
@(Html.Kendo().Editor()
74+
.Name("NotesEditor")
75+
.Encoded(true)
76+
.HtmlAttributes(new { data_bind = "value: Title", style = "width:100%; height:720px" })
77+
)
78+
</text>)
79+
.Width(1300)
80+
.Height(900)
81+
)
82+
```
83+
{% if site.core %}
84+
```TagHelper
85+
@addTagHelper *, Kendo.Mvc
86+
87+
<kendo-grid name="NotesAudit">
88+
<datasource type="DataSourceTagHelperType.Ajax">
89+
<transport>
90+
<read url="@Url.Action("CustomCommand_Read", "Grid")"/>
91+
</transport>
92+
</datasource>
93+
<columns>
94+
<column field="FirstName"/>
95+
<column field="LastName"/>
96+
<column field="Title"/>
97+
<column width="70" title="Notes">
98+
<commands>
99+
<column-command text="Notes" click="showDetails"/>
100+
</commands>
101+
</column>
102+
</columns>
103+
<toolbar>
104+
<toolbar-button name="search"></toolbar-button>
105+
</toolbar>
106+
<search fields-extended="@(new object[] { new { Name = "Title", Operator = "contains"}})"></search>
107+
</kendo-grid>
108+
109+
<kendo-window name="Notes"
110+
title="Notes"
111+
visible="false"
112+
modal="true"
113+
draggable="true"
114+
width="1300"
115+
height="900">
116+
<content>
117+
<kendo-editor name="NotesEditor" encoded="true" data-bind="value: Title" style="width:100%; height:720px">
118+
</kendo-editor>
119+
</content>
120+
</kendo-window>
121+
```
122+
{% endif %}
123+
```Scripts
124+
<script type="text/javascript">
125+
function showDetails(event) {
126+
var grid = $("#NotesAudit").getKendoGrid(); // Get a reference to the Grid.
127+
let dataItem = grid.dataItem($(event.target).closest("tr")); //Get the data item of the respective row.
128+
var window = $("#Notes").data("kendoWindow"); // Get a reference to the Window.
129+
var editor = $("#NotesEditor").data("kendoEditor"); // Get a reference to the Editor.
130+
kendo.bind(editor.element, dataItem); // Bind the Editor to the data item.
131+
let searchedText = $(".k-searchbox input").val().toLowerCase(); // Access the search panel entry.
132+
var editorBody = $(editor.body); // Get the Editor's body element.
133+
134+
window.open().center(); // Open the Window.
135+
highlight(searchedText, editorBody); // Call the "highlight" function.
136+
}
137+
138+
function highlight(text, editorBody) {
139+
var editorBodyHTML= $(editorBody).html();
140+
var splittedContent = $(editorBody).html().split(" "); // Convert the Editor's content into an array of substrings.
141+
var newContent = "";
142+
for(var i = 0; i < splittedContent.length; i++){ // Loop through the array.
143+
var index = splittedContent[i].toLowerCase().indexOf(text);
144+
if(index >= 0) { // Check for an occurrence.
145+
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.
146+
}
147+
newContent += (" " + splittedContent[i]);
148+
}
149+
150+
$(editorBody).html(newContent); // Update the Editor's content.
151+
$(editorBody).find('.highlight').css('background-color', 'yellow'); // Highlight the occurrences.
152+
}
153+
</script>
154+
```
155+
156+
{% if site.core %}
157+
For a runnable example based on the code above, refer to the following REPL samples:
158+
159+
* [Sample code with the Editor HtmlHelper](https://netcorerepl.telerik.com/meOHnFvd41L6YZkY45)
160+
* [Sample code with the Editor TagHelper](https://netcorerepl.telerik.com/QIanHFbH44hh6jUB16)
161+
{% else %}
162+
For a runnable example based on the code above, refer to the [REPL example on highlighting the search entry within Editor's content](https://netcorerepl.telerik.com/meOHnFvd41L6YZkY45).
163+
{% endif %}
164+
165+
## More {{ site.framework }} Editor Resources
166+
167+
* [{{ site.framework }} Editor Documentation]({%slug htmlhelpers_editor_aspnetcore%})
168+
169+
* [{{ site.framework }} Editor Demos](https://demos.telerik.com/{{ site.platform }}/editor)
170+
171+
{% if site.core %}
172+
* [{{ site.framework }} Editor Product Page](https://www.telerik.com/aspnet-core-ui/editor)
173+
174+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
175+
176+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
177+
178+
{% else %}
179+
* [{{ site.framework }} Editor Product Page](https://www.telerik.com/aspnet-mvc/editor)
180+
181+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
182+
183+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
184+
{% endif %}
185+
186+
## See Also
187+
188+
* [Client-Side API Reference of the Editor for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/ui/editor)
189+
* [Server-Side API Reference of the Editor for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/editor)
190+
{% if site.core %}
191+
* [Server-Side TagHelper API Reference of the Editor for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/editor)
192+
{% endif %}
193+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
194+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

‎docs-aspnet/knowledge-base/filtering-components-with-shared-datasource.md‎

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
---
2+
title: Filtering Components Independently that Use a Shared DataSource
3+
description: Learn how to filter different components independently that use a shared DataSource.
4+
type: how-to
5+
page_title: Filtering Components Independently that Use a Shared DataSource
6+
slug: filtering-components-with-shared-datasource
7+
tags: DataSource, shared, filtering, widgets, components, telerik, core, mvc
8+
res_type: kb
9+
---
10+
11+
## Environment
12+
<table>
13+
<tbody>
14+
<tr>
15+
<td>Product Version</td>
16+
<td>2023.2.829</td>
17+
</tr>
18+
<tr>
19+
<td>Product</td>
20+
<td>DataSource for {{ site.framework }}</td>
21+
</tr>
22+
</tbody>
23+
</table>
24+
25+
26+
## Description
27+
28+
By design, the components that bind to a shared DataSource listen for the `change` event of the DataSource and refresh automatically when it fires. As a result, when filtering one of the components, the rest of the components will rebind and display the filtered data, as well.
29+
30+
How can I filter the components that use a shared DataSource independently?
31+
32+
## Solution
33+
34+
The example below shows how to bind two Grids to the same DataSource and allow the user to filter them independently.
35+
36+
1. Create an additional DataSource for each Grid that is not bound to data and has an initial filter criteria:
37+
38+
```HtmlHelper
39+
@(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.ProductViewModel>()
40+
.Name("mainDS")
41+
.Ajax(dataSource => dataSource
42+
.Read(read => read.Action("Products_Read", "Grid"))
43+
.ServerOperation(false)
44+
)
45+
)
46+
47+
@(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.ProductViewModel>()
48+
.Name("dataSourceGrid1")
49+
.Ajax(dataSource => dataSource
50+
.Filter(filters =>
51+
{
52+
filters.Add(product => product.Discontinued).IsEqualTo(true);
53+
})
54+
.ServerOperation(false)
55+
)
56+
)
57+
58+
@(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.ProductViewModel>()
59+
.Name("dataSourceGrid2")
60+
.Ajax(dataSource => dataSource
61+
.Filter(filters =>
62+
{
63+
filters.Add(product => product.Discontinued).IsEqualTo(false);
64+
})
65+
.ServerOperation(false)
66+
)
67+
)
68+
69+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
70+
.Name("grid1")
71+
.AutoBind(false)
72+
.DataSource("dataSourceGrid1")
73+
...
74+
)
75+
76+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
77+
.Name("grid2")
78+
.AutoBind(false)
79+
.DataSource("dataSourceGrid2")
80+
...
81+
)
82+
```
83+
{% if site.core %}
84+
```TagHelper
85+
@addTagHelper *, Kendo.Mvc
86+
87+
<kendo-datasource name="mainDS" type="DataSourceTagHelperType.Ajax" server-operation="false">
88+
<transport>
89+
<read url="@Url.Action("Products_Read", "Grid")" />
90+
</transport>
91+
</kendo-datasource>
92+
93+
<kendo-datasource name="dataSourceGrid1" type="DataSourceTagHelperType.Ajax" server-operation="false">
94+
<filters>
95+
<datasource-filter logic="and">
96+
<filters>
97+
<datasource-filter field="Discontinued" operator="eq" value="true"></datasource-filter>
98+
</filters>
99+
</datasource-filter>
100+
</filters>
101+
</kendo-datasource>
102+
103+
<kendo-datasource name="dataSourceGrid2" type="DataSourceTagHelperType.Ajax" server-operation="false">
104+
<filters>
105+
<datasource-filter logic="and">
106+
<filters>
107+
<datasource-filter field="Discontinued" operator="eq" value="false"></datasource-filter>
108+
</filters>
109+
</datasource-filter>
110+
</filters>
111+
</kendo-datasource>
112+
113+
<kendo-grid name="grid1" datasource-id="dataSourceGrid1" auto-bind="false">
114+
...
115+
</kendo-grid>
116+
117+
<kendo-grid name="grid2" datasource-id="dataSourceGrid2" auto-bind="false">
118+
...
119+
</kendo-grid>
120+
```
121+
{% endif %}
122+
123+
1. Within the `$(document).ready()` function, access the main DataSource and handle once its [`requestEnd`](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/events/requestend) event to access the data when it is received from the server. Use the [`data()`](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/data) method to set the received data to the additional DataSources that are used by the Grids.
124+
125+
```Scripts
126+
<script>
127+
$(document).ready(function () {
128+
mainDS.read();
129+
mainDS.one("requestEnd", function (e) {
130+
if (e.response.Data.length > 0) {
131+
dataSourceGrid1.data(e.response.Data); // Set the received data to the DataSource of "grid1".
132+
dataSourceGrid2.data(e.response.Data); // Set the received data to the DataSource of "grid2".
133+
}
134+
});
135+
});
136+
</script>
137+
138+
```
139+
140+
141+
## More {{ site.framework }} DataSource Resources
142+
143+
* [{{ site.framework }} DataSource Documentation]({%slug htmlhelpers_datasource_aspnetcore%})
144+
145+
* [{{ site.framework }} DataSource Demos](https://demos.telerik.com/{{ site.platform }}/datasource/index)
146+
147+
{% if site.core %}
148+
149+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiforcore%})
150+
151+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-core-ui)
152+
153+
{% else %}
154+
155+
* [Telerik UI for {{ site.framework }} Video Onboarding Course (Free for trial users and license holders)]({%slug virtualclass_uiformvc%})
156+
157+
* [Telerik UI for {{ site.framework }} Forums](https://www.telerik.com/forums/aspnet-mvc)
158+
{% endif %}
159+
160+
## See Also
161+
162+
* [Client-Side API Reference of the DataSource for {{ site.framework }}](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource)
163+
* [Server-Side API Reference of the DataSource for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/datasource)
164+
{% if site.core %}
165+
* [Server-Side TagHelper API Reference of the DataSource for {{ site.framework }}](https://docs.telerik.com/{{ site.platform }}/api/taghelpers/datasource)
166+
{% endif %}
167+
* [Telerik UI for {{ site.framework }} Breaking Changes]({%slug breakingchanges_2023%})
168+
* [Telerik UI for {{ site.framework }} Knowledge Base](https://docs.telerik.com/{{ site.platform }}/knowledge-base)

0 commit comments

Comments
 (0)