Skip to content

Commit c2ce438

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent de4c4a0 commit c2ce438

File tree

4 files changed

+230
-0
lines changed

4 files changed

+230
-0
lines changed

‎docs/framework/datasource/datasource-operations.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -284,6 +284,8 @@ The following example features local data but the data returned by a `transport`
284284
});
285285
```
286286

287+
A full implementation of Server Grouping with Virtualization you can see in [this official Grid demo](https://demos.telerik.com/kendo-ui/grid/server-grouppaging-virtualization).
288+
287289
## Mixed Data Operation Mode
288290

289291
Note that all data operations have to occur either on the server or on the client. Therefore, while you can still use the mixed data operation mode of the DataSource, this approach is not recommended as it leads to undesired side effects.

‎docs/intro/installation/using-license-code.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,15 @@ The following example shows how to use the CDN reference by utilizing the predef
100100
<!-- Rest of the HTML -->
101101
```
102102

103+
In case you are using ECMAScript modules to load the Kendo files you need to add `type='module'` on the license script reference.
104+
105+
```html
106+
<script src="https://kendo.cdn.telerik.com/***/kendo.all.min.js" type="module"></script>
107+
<script src="./kendo-ui-license.js" type="module"></script>
108+
109+
<!-- Rest of the HTML -->
110+
```
111+
103112
### Use JS or TS Modules
104113

105114
Import the `kendo-ui-license.js` file right after the import of the Kendo UI modules.

‎docs/knowledge-base/filter-kendo-ui-grid-by-checkbox.md‎

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
---
2+
title: Filtering Kendo UI Grid Based on Checkbox Selection
3+
description: Learn how to filter a Kendo UI Grid by checkbox selection using the dataSource filter method.
4+
type: how-to
5+
page_title: How to Filter Grid Rows in Kendo UI Based on Checkbox Clicks
6+
slug: filter-kendo-ui-grid-by-checkbox
7+
tags: kendo ui, grid, filter, checkbox, datasource
8+
res_type: kb
9+
ticketid: 1660908
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Grid for Progress® Kendo UI®</td>
19+
</tr>
20+
<tr>
21+
<td>Version</td>
22+
<td>2024.1.130</td>
23+
</tr>
24+
</tbody>
25+
</table>
26+
27+
## Description
28+
29+
Filtering data in a Kendo UI Grid based on user interaction, such as a checkbox click, is a common scenario. This article demonstrates how to achieve this functionality by leveraging the dataSource [`filter()`](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/filter) method.
30+
31+
This KB article also answers the following questions:
32+
- How can I filter Grid records using a checkbox?
33+
- Is it possible to toggle Grid data filtering based on a checkbox state?
34+
- What method allows filtering Kendo UI Grid rows based on certain conditions?
35+
36+
## Solution
37+
38+
To filter the Kendo UI Grid records based on the state of a checkbox, follow these steps:
39+
40+
1. Initialize the checkbox as a Kendo UI CheckBox component.
41+
2. Subscribe to the [`change`](https://docs.telerik.com/kendo-ui/api/javascript/ui/checkbox/events/change) event of the CheckBox to apply or remove the filter from the Grid's dataSource based on the checkbox state.
42+
43+
Here is a practical example where a Grid is filtered to show only the records where the field "Discontinued" is `true` when the checkbox is checked. If the checkbox is unchecked, the filter is removed, and all records are shown.
44+
45+
```html
46+
<!-- Include the necessary Kendo UI scripts and styles in your project -->
47+
48+
<div id="eq1"></div>
49+
<div id="grid"></div>
50+
51+
<script>
52+
$(document).ready(function() {
53+
// Initialize the checkbox
54+
$('#eq1').kendoCheckBox({
55+
label: "Filter the True records",
56+
change: function(e) {
57+
var grid = $("#grid").data("kendoGrid");
58+
if(e.checked) {
59+
// Apply the filter
60+
grid.dataSource.filter({ field: "Discontinued", operator: "eq", value: true });
61+
} else {
62+
// Remove the filter
63+
grid.dataSource.filter({});
64+
}
65+
}
66+
});
67+
68+
// Initialize the Grid (ensure dataSource is configured)
69+
$("#grid").kendoGrid({
70+
// Grid configuration
71+
});
72+
});
73+
</script>
74+
```
75+
76+
For a live example, check the below Dojo demo.
77+
78+
```dojo
79+
<script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>
80+
81+
<div id="example">
82+
<input type="checkbox" id="eq1" />
83+
<br>
84+
<br>
85+
<div id="grid"></div>
86+
87+
<script>
88+
$(document).ready(function() {
89+
90+
$('#eq1').kendoCheckBox({
91+
label: "Filter the True records",
92+
change: function(e) {
93+
if(e.checked) {
94+
$("#grid").data("kendoGrid").dataSource.filter({ field: "Discontinued", operator: "eq", value: true });
95+
} else {
96+
$("#grid").data("kendoGrid").dataSource.filter({});
97+
}
98+
99+
}
100+
});
101+
102+
$("#grid").kendoGrid({
103+
dataSource: {
104+
data: products,
105+
schema: {
106+
model: {
107+
fields: {
108+
ProductName: { type: "string" },
109+
UnitPrice: { type: "number" },
110+
UnitsInStock: { type: "number" },
111+
Discontinued: { type: "boolean" }
112+
}
113+
}
114+
},
115+
pageSize: 20
116+
},
117+
height: 550,
118+
scrollable: true,
119+
sortable: true,
120+
filterable: true,
121+
pageable: {
122+
input: true,
123+
numeric: false
124+
},
125+
columns: [
126+
"ProductName",
127+
{ field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
128+
{ field: "UnitsInStock", title: "Units In Stock", width: "130px" },
129+
{ field: "Discontinued", width: "130px" }
130+
]
131+
});
132+
});
133+
</script>
134+
```
135+
136+
## See Also
137+
138+
- [Kendo UI Grid DataSource Filter Method Documentation](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/filter)
139+
- [Kendo UI CheckBox Component Documentation](https://docs.telerik.com/kendo-ui/controls/editors/checkbox/overview)
140+
- [Kendo UI Grid Overview](https://docs.telerik.com/kendo-ui/controls/data-management/grid/overview)

‎docs/knowledge-base/get-current-view-date-range-kendo-ui-calendar.md‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
---
2+
title: Getting the Date Range of the Current View in Kendo UI Calendar
3+
description: Learn how to retrieve the date range of the currently displayed view in the Kendo UI Calendar component.
4+
type: how-to
5+
page_title: How to Get the Current View Date Range in a Kendo UI Calendar
6+
slug: get-current-view-date-range-kendo-ui-calendar
7+
tags: kendo-ui, calendar, date-range, view, javascript
8+
res_type: kb
9+
ticketid: 1660926
10+
---
11+
12+
## Environment
13+
<table>
14+
<tbody>
15+
<tr>
16+
<td>Product</td>
17+
<td>Calendar for Progress® Kendo UI®</td>
18+
</tr>
19+
<tr>
20+
<td>Version</td>
21+
<td>2024.2.514</td>
22+
</tr>
23+
</tbody>
24+
</table>
25+
26+
## Description
27+
When using the [Calendar](https://docs.telerik.com/kendo-ui/api/javascript/ui/calendar) component, you might need to get the date range of the current view, such as:
28+
29+
- From 08/01/2024 to 08/31/2024 for a month view
30+
- From 01/01/2024 to 12/31/2024 for a year view
31+
- From 01/01/2020 to 12/31/2029 for a decade view
32+
33+
This KB article also answers the following questions:
34+
- How can I determine the start and end dates of the current Calendar view?
35+
- Is it possible to get the visible date range in the Kendo UI Calendar?
36+
- How do I find the date range of the currently selected view in a Calendar?
37+
38+
## Solution
39+
To get the date range of the current view in a Kendo UI Calendar, use the [`view()`](https://docs.telerik.com/kendo-ui/api/javascript/ui/calendar/methods/view) and [`current()`](https://docs.telerik.com/kendo-ui/api/javascript/ui/calendar/methods/current) methods.
40+
41+
Below is an example for the month view:
42+
43+
```javascript
44+
$("#calendar").kendoCalendar();
45+
46+
var calendar = $("#calendar").data("kendoCalendar");
47+
var current = calendar.current();
48+
var view = calendar.view();
49+
if(view.name == "month") {
50+
var firstDay = new Date(current.getFullYear(), current.getMonth(), 1);
51+
var lastDay = new Date(current.getFullYear(), current.getMonth() + 1, 0);
52+
console.log(firstDay, lastDay)
53+
}
54+
```
55+
56+
This code snippet initializes a Kendo UI Calendar and calculates the first and last day of the month view based on the current date. You can adapt this approach for other views by adjusting the calculation of `firstDay` and `lastDay` accordingly.
57+
58+
For a complete example and to see the code in action, check the following Dojo demo:
59+
60+
```dojo
61+
<div id="calendar"></div>
62+
<script>
63+
$("#calendar").kendoCalendar();
64+
65+
var calendar = $("#calendar").data("kendoCalendar");
66+
var current = calendar.current();
67+
var view = calendar.view();
68+
if(view.name == "month") {
69+
var firstDay = new Date(current.getFullYear(), current.getMonth(), 1);
70+
var lastDay = new Date(current.getFullYear(), current.getMonth() + 1, 0);
71+
console.log(firstDay, lastDay)
72+
}
73+
</script>
74+
```
75+
76+
## See Also
77+
- [Calendar Overview](https://docs.telerik.com/kendo-ui/controls/editors/calendar/overview)
78+
- [Calendar Methods API Documentation](https://docs.telerik.com/kendo-ui/api/javascript/ui/calendar/methods)
79+
- [Kendo UI Dojo - Interactive Examples](https://dojo.telerik.com/)

0 commit comments

Comments
 (0)