Skip to content

Commit 8b5f64d

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 3784702 commit 8b5f64d

File tree

8 files changed

+426
-9
lines changed

8 files changed

+426
-9
lines changed

‎docs-aspnet/knowledge-base/grid-automatically-persist-state.md

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
title: Persist the State of the Grid Automatically
3+
description: Learn how to persist the state of the {{ site.product }} Grid on page close.
4+
type: how-to
5+
page_title: Persist State Automatically - {{ site.product }} Data Grid
6+
slug: grid-automatically-persist-state
7+
tags: grid, state, persisting, persist, automatic, leave, page, save, restore, changes, options, keep, recreate, retain, load
8+
res_type: kb
9+
component: grid
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tr>
16+
<td>Product</td>
17+
<td>Progress® {{ site.product }} Grid</td>
18+
</tr>
19+
</table>
20+
21+
22+
## Description
23+
24+
How can I automatically persist the sort, filter, and group Grid options when the user leaves the page and keep the look of the Grid the same as the user closed the tab?
25+
26+
## Solution
27+
28+
The state of the Grid is persisted in the [`beforeunload`](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload) event handler. This way, any operation which the user performs before leaving the page is persisted. To restore the Grid state, use the [`document.ready`](https://learn.jquery.com/using-jquery-core/document-ready/) event.
29+
30+
````C#
31+
@(Html.Kendo().Grid<TelerikMvcApp9.Models.OrderViewModel>()
32+
.Name("grid")
33+
.Columns(columns =>
34+
{
35+
columns.Bound(p => p.OrderID).Filterable(false);
36+
columns.Bound(p => p.Freight);
37+
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
38+
columns.Bound(p => p.ShipName);
39+
columns.Bound(p => p.ShipCity);
40+
})
41+
.Pageable()
42+
.Sortable()
43+
.Scrollable()
44+
.Filterable()
45+
.Groupable()
46+
.HtmlAttributes(new { style = "height:550px;" })
47+
.DataSource(dataSource => dataSource
48+
.Ajax()
49+
.PageSize(20)
50+
.Read(read => read.Action("Orders_Read", "Grid"))
51+
)
52+
)
53+
54+
<script>
55+
$(document).ready(function () {
56+
var options = localStorage["grid-options"];
57+
58+
var grid = $("#grid").data("kendoGrid");
59+
60+
if (options) {
61+
grid.setOptions(JSON.parse(options));
62+
}
63+
64+
window.onbeforeunload = function() {
65+
localStorage["grid-options"] = kendo.stringify(grid.getOptions());
66+
67+
return;
68+
}
69+
});
70+
</script>
71+
````

‎docs-aspnet/knowledge-base/persist-state-and-function-references.md

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
---
2+
title: Persist the State of the Grid alongside the Function Handlers
3+
description: Learn how to persist the state of the {{ site.product }} Data Grid and include the function definitions in the saved options.
4+
type: how-to
5+
page_title: Persist the State of the {{ site.product }} Grid alongside the Function Handlers - {{ site.product }} Data Grid
6+
slug: grid-persist-state-with-functions
7+
tags: kendoui, jquery, data, grid, persist, state, save, options, restore, function, functions, handler, handlers
8+
res_type: kb
9+
---
10+
11+
## Environment
12+
13+
<table>
14+
<tr>
15+
<td>Product</td>
16+
<td>Progress® {{ site.product }} Grid</td>
17+
</tr>
18+
</table>
19+
20+
21+
## Description
22+
23+
By default, the [`JSON.stringify()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify) method cannot serialize function definitions. Event handlers and other similar Grid configurations are lost when the state of the component is persisted with [`getOptions`](/api/javascript/ui/grid/methods/getoptions) and [`setOptions`](/api/javascript/ui/grid/methods/setoptions).
24+
25+
How can I persist the state of the Data Grid and include the function definitions in the saved options?
26+
27+
## Solution
28+
29+
To achieve the desired scenario, implement a custom JSON [`reviver`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#using_the_reviver_parameter) parameter, which can serialize and deserialize the function definitions.
30+
31+
````C#
32+
<script>
33+
$(document).ready(function () {
34+
$("#save").click(function (e) {
35+
e.preventDefault();
36+
var grid = $("#grid").data("kendoGrid");
37+
localStorage["kendo-grid-options"] = kendo.stringify(grid.getOptions());
38+
});
39+
40+
$("#load").click(function (e) {
41+
e.preventDefault();
42+
var grid = $("#grid").data("kendoGrid");
43+
var options = localStorage["kendo-grid-options"];
44+
if (options) {
45+
var parsedOptions = JSON.parse(options)
46+
// Add the function reference
47+
parsedOptions.columns[0].command[0].click = showDetails;
48+
grid.setOptions(parsedOptions);
49+
}
50+
});
51+
});
52+
53+
function showDetails(e) {
54+
e.preventDefault();
55+
var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
56+
console.log(dataItem);
57+
}
58+
</script>
59+
60+
<div class="box wide">
61+
<button href="#" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" id="save">Save State</button>
62+
<button href="#" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary" id="load">Load State</button>
63+
</div>
64+
<br />
65+
@(Html.Kendo().Grid<TelerikMvcApp9.Models.OrderViewModel>()
66+
.Name("grid")
67+
.Columns(columns =>
68+
{
69+
columns.Command(command => command.Custom("View Details").Click("showDetails")).Width(180);
70+
columns.Bound(p => p.OrderID).Filterable(false);
71+
columns.Bound(p => p.Freight);
72+
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
73+
columns.Bound(p => p.ShipName);
74+
columns.Bound(p => p.ShipCity);
75+
})
76+
.Pageable()
77+
.Sortable()
78+
.Scrollable()
79+
.Filterable()
80+
.Groupable()
81+
.HtmlAttributes(new { style = "height:550px;" })
82+
.DataSource(dataSource => dataSource
83+
.Ajax()
84+
.PageSize(20)
85+
.Read(read => read.Action("Orders_Read", "Grid"))
86+
)
87+
)
88+
89+
````

‎docs-aspnet/styles-and-layout/sass-themes/font-icons-migration.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -86,16 +86,18 @@ To continue using font icons as the default icon type, call the `kendo.setDefaul
8686
</script>
8787
```
8888
89-
Alternatively, you can set the default icon type on the server:
90-
9189
{% if site.core %}
90+
Alternatively, you can set the default icon type in the minimal hosting model of the application.
91+
9292
```C#
9393
services.AddKendo(x =>
9494
{
9595
x.IconType = IconType.Font;
9696
});
9797
```
9898
{% else %}
99+
Alternatively, you can set the default icon type on the server. Namely, within the `Global.asax.cs` file.
100+
99101
```C#
100102
KendoMvc.Setup(x =>
101103
{

‎docs/api/javascript/ui/expansionpanel.md

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -151,9 +151,17 @@ A whitespace-delimited string of animation effects that are used when an item is
151151
});
152152
</script>
153153

154-
### collapseIconClass `String` *(default: "k-icon k-i-arrow-chevron-up")*
154+
### collapseIconClass `String` *(default: "chevron-up")*
155155

156-
The class of the collapse icon.
156+
The name of the collapse icon.
157+
158+
<div id="expansionPanel">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
159+
</div>
160+
<script>
161+
$("#expansionPanel").kendoExpansionPanel({
162+
collapseIconClass: "minus"
163+
});
164+
</script>
157165

158166
### disabled `Boolean` *(default: false)*
159167

@@ -183,9 +191,17 @@ If set to true the widget will be expanded by default.
183191
});
184192
</script>
185193

186-
### expandIconClass `String` *(default: "k-icon k-i-arrow-chevron-down")*
194+
### expandIconClass `String` *(default: "chevron-down")*
187195

188-
The class of the collapse icon.
196+
The class of the expand icon.
197+
198+
<div id="expansionPanel">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
199+
</div>
200+
<script>
201+
$("#expansionPanel").kendoExpansionPanel({
202+
expandIconClass: "plus"
203+
});
204+
</script>
189205

190206
### height `Number|String`
191207

‎docs/api/javascript/ui/imageeditor.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -411,7 +411,7 @@ The path to the image or a base64 string.
411411
$("#imageEditor").kendoImageEditor();
412412
var imageEditor = $("#imageEditor").data("kendoImageEditor");
413413

414-
imageEditor.drawImage("image.jpg").done(function (image) {
414+
imageEditor.drawImage("https://demos.telerik.com/kendo-ui/content/shared/images/photos/2.jpg").done(function (image) {
415415
imageEditor.drawCanvas(image);
416416
}).fail(function (ev) {
417417
alert("Something went wrong!");

‎docs/controls/grid/paging.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ As of the Kendo UI 2017 R3 release, the Grid enables you to toggle the visibilit
5353
* If after a `delete` or a `filter` operation, or an update in the `pageSize` the total number of items in the data source becomes lower than the `pageSize` value, the pager will be hidden.
5454
* If after an `insert` or a `filter` operation, or an update in the `pageSize` the total number of items in the data source becomes greater than or equal to the `pageSize` value, the pager will be displayed.
5555

56-
For a runnable example, refer to the [demo on controlling the pager visibility in the Grid](https://demos.telerik.com/kendo-ui/grid/pager-visibility).
56+
For a runnable example, refer to the [demo on controlling the pager visibility in the Grid](https://demos.telerik.com/kendo-ui/grid/pager-functionality).
5757

5858
## KB Articles on Paging
5959

@@ -62,5 +62,5 @@ For a runnable example, refer to the [demo on controlling the pager visibility i
6262

6363
## See Also
6464

65-
* [Pager Visibility by the Grid (Demo)](https://demos.telerik.com/kendo-ui/grid/pager-visibility)
65+
* [Pager Visibility by the Grid (Demo)](https://demos.telerik.com/kendo-ui/grid/pager-functionality)
6666
* [JavaScript API Reference of the Grid](/api/javascript/ui/grid)

0 commit comments

Comments
 (0)