Skip to content

Commit 582ddc1

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 69ed196 commit 582ddc1

File tree

22 files changed

+3117
-29
lines changed

22 files changed

+3117
-29
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,7 @@ Kendo UI Core is a free and open-source subset of Kendo UI. The following table
6868
| [Waterfall Charts](https://demos.telerik.com/kendo-ui/waterfall-charts/index) | :x: | :white_check_mark: | :white_check_mark: |
6969
| **Gauges** |
7070
| [ArcGauge](https://demos.telerik.com/kendo-ui/arc-gauge/index) | :x: | :white_check_mark: | :white_check_mark: |
71+
| [CircularGauge](https://demos.telerik.com/kendo-ui/circular-gauge/index) | :x: | :white_check_mark: | :white_check_mark: |
7172
| [LinearGauge](https://demos.telerik.com/kendo-ui/linear-gauge/index) | :x: | :white_check_mark: | :white_check_mark: |
7273
| [RadialGauge](https://demos.telerik.com/kendo-ui/radial-gauge/index) | :x: | :white_check_mark: | :white_check_mark: |
7374
| **Barcodes** |

‎docs-aspnet/_config-mvc.yml‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -371,6 +371,11 @@ defaults:
371371
path: "html-helpers/gauges/arcgauge"
372372
values:
373373
title_prefix: "ASP.NET MVC ArcGauge Component"
374+
-
375+
scope:
376+
path: "html-helpers/gauges/circulargauge"
377+
values:
378+
title_prefix: "ASP.NET MVC CircularGauge Component"
374379
-
375380
scope:
376381
path: "html-helpers/gauges/lineargauge"
@@ -397,6 +402,11 @@ defaults:
397402
values:
398403
title_prefix: "ASP.NET MVC Loader Component"
399404
-
405+
scope:
406+
path: "html-helpers/interactivity/skeletoncontainer"
407+
values:
408+
title_prefix: "ASP.NET MVC SkeletonContainer Component"
409+
400410
scope:
401411
path: "html-helpers/interactivity/progressbar"
402412
values:

‎docs-aspnet/_config.yml‎

Lines changed: 29 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@ navigation:
8484
position: 280
8585
"api":
8686
title: "API Reference"
87-
position: 0
87+
position: 0
8888
"getting-started":
8989
title: "Getting Started"
9090
position: 2
@@ -244,6 +244,8 @@ navigation:
244244
title: "Interactivity and UX"
245245
"tag-helpers/interactivity/loader":
246246
title: "Loader"
247+
"tag-helpers/interactivity/skeletoncontainer":
248+
title: "SkeletonContainer"
247249
"tag-helpers/media":
248250
title: "Media"
249251
"tag-helpers/pdf":
@@ -394,6 +396,8 @@ navigation:
394396
title: "Interactivity and UX"
395397
"html-helpers/interactivity/loader":
396398
title: "Loader"
399+
"html-helpers/interactivity/skeletoncontainer":
400+
title: "SkeletonContainer"
397401
"html-helpers/interactivity/sortable/integration":
398402
title: "Integration"
399403
position: 6
@@ -452,6 +456,8 @@ navigation:
452456
title: "Spreadsheet"
453457
"*arcgauge":
454458
title: "ArcGauge"
459+
"*circulargauge":
460+
title: "CircularGauge"
455461
"*autocomplete":
456462
title: "AutoComplete"
457463
"*barcode":
@@ -518,6 +524,8 @@ navigation:
518524
title: "Image Editor"
519525
"*loader":
520526
title: "Loader"
527+
"*SkeletonContainer":
528+
title: "SkeletonContainer"
521529
"*lineargauge":
522530
title: "LinearGauge"
523531
"*listbox":
@@ -875,6 +883,11 @@ defaults:
875883
path: "html-helpers/gauges/arcgauge"
876884
values:
877885
title_prefix: "ASP.NET Core ArcGauge Component"
886+
-
887+
scope:
888+
path: "html-helpers/gauges/circulargauge"
889+
values:
890+
title_prefix: "ASP.NET Core CircularGauge Component"
878891
-
879892
scope:
880893
path: "html-helpers/gauges/lineargauge"
@@ -895,6 +908,11 @@ defaults:
895908
path: "html-helpers/interactivity/loader"
896909
values:
897910
title_prefix: "ASP.NET Core Loader Component"
911+
912+
scope:
913+
path: "html-helpers/interactivity/skeletoncontainer"
914+
values:
915+
title_prefix: "ASP.NET Core SkeletonContainer Component"
898916
-
899917
scope:
900918
path: "html-helpers/interactivity/progressbar"
@@ -1295,6 +1313,11 @@ defaults:
12951313
path: "tag-helpers/gauges/arcgauge"
12961314
values:
12971315
title_prefix: "ASP.NET Core ArcGauge Component"
1316+
-
1317+
scope:
1318+
path: "tag-helpers/gauges/circulargauge"
1319+
values:
1320+
title_prefix: "ASP.NET Core CircularGauge Component"
12981321
-
12991322
scope:
13001323
path: "tag-helpers/gauges/lineargauge"
@@ -1316,6 +1339,11 @@ defaults:
13161339
values:
13171340
title_prefix: "ASP.NET Core Loader Component"
13181341
-
1342+
scope:
1343+
path: "tag-helpers/interactivity/skeletoncontainer"
1344+
values:
1345+
title_prefix: "ASP.NET Core SkeletonContainer Component"
1346+
13191347
scope:
13201348
path: "tag-helpers/interactivity/progressbar"
13211349
values:

‎docs-aspnet/getting-started-core/helper-basics/razor-pages-list-of-helpers.html‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -175,7 +175,7 @@
175175
</li>
176176
<li>
177177
<a href="/{{ site.platform }}/html-helpers/editors/upload/razor-page">Upload</a>
178-
</li>
178+
</li>
179179
</ul>
180180
</td>
181181
<td>
@@ -208,6 +208,9 @@
208208
<li>
209209
ArcGauge
210210
</li>
211+
<li>
212+
CircularGauge
213+
</li>
211214
<li>
212215
LinearGauge
213216
</li>

‎docs-aspnet/html-helpers/data-management/treelist/persist-state.md‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
---
2+
title: State Persistence
3+
page_title: State Persistence
4+
description: "Get started with the Telerik UI TreeList HtmlHelper for {{ site.framework }} and persist the state of the widget."
5+
slug: htmlhelpers_treelist_aspnetcore_persiststate
6+
position: 9
7+
---
8+
9+
# State Persistence
10+
11+
The TreeList component enables you to store the custom settings of the user and restore them when the user logs back in at some future moment. This feature is known as state persistence.
12+
13+
To persist the settings that were previously applied to its structure, use the `getOptions` and `setOptions` methods of the TreeList. These methods allow you to serialize the current state of the TreeList if needed and recover that state later.
14+
15+
The following example demonstrates how to automatically maintain an up-to-date state of the TreeList. Upon a page reload, the stored settings will be provided to the TreeList configuration and will be applied.
16+
17+
```View
18+
@(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
19+
.Name("treelist")
20+
.Columns(columns =>
21+
{
22+
columns.Add().Field(e => e.FirstName).Title("First Name").Width(250);
23+
columns.Add().Field(e => e.LastName).Title("Last Name");
24+
columns.Add().Field(e => e.Position);
25+
columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}").Filterable(false);
26+
27+
})
28+
.Filterable(true)
29+
.Sortable(true)
30+
.Reorderable(true)
31+
.Resizable(true)
32+
.ColumnMenu()
33+
.DataSource(dataSource => dataSource
34+
.ServerOperation(false)
35+
.Read(read => read.Action("All", "EmployeeDirectory"))
36+
.Model(m =>
37+
{
38+
m.Id(f => f.EmployeeId);
39+
m.ParentId(f => f.ReportsTo);
40+
m.Expanded(true);
41+
m.Field(f => f.FirstName);
42+
m.Field(f => f.LastName);
43+
m.Field(f => f.ReportsTo);
44+
m.Field(f => f.Position);
45+
m.Field(f => f.Extension);
46+
})
47+
)
48+
.Height(540)
49+
)
50+
51+
<script>
52+
$(document).ready(function () {
53+
var treeList = $("#treelist").data("kendoTreeList");
54+
55+
var options = localStorage["kendo-treelist-options"];
56+
if (options) {
57+
treeList.setOptions(JSON.parse(options)); // Load the stored TreeList options after its initialization
58+
}
59+
60+
$(window).on( "unload", function(e){
61+
e.preventDefault();
62+
localStorage["kendo-treelist-options"] = kendo.stringify(treeList.getOptions()); // Get and store the TreeList settings when navigating away from the page
63+
});
64+
});
65+
</script>
66+
```
67+
68+
## See Also
69+
70+
* [Persisting the State of the TreeList HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/treelist/persist-state)
71+
* [Server-Side API](/api/treelist)

‎docs-aspnet/html-helpers/interactivity/skeletoncontainer/items.md‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
---
2+
title: Items
3+
page_title: Items
4+
description: "Learn how to configure the items in the SkeletonContaienr HtmlHelper for {{ site.framework }}."
5+
slug: htmlhelpers_skeletoncontainer_aspnetcore_items
6+
position: 2
7+
---
8+
9+
# Items
10+
11+
The Telerik UI SkeletonContainer HtmlHelper for {{ site.framework }} uses the default [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) layout as a base. Each cell or group of cells from the CSS Grid can be represented by an item from the SkeletonContainer.
12+
13+
Each item contains the following properties:
14+
15+
* `ColStart` - indicates the starting column of the item.
16+
* `ColSpan` - indicates how many columns the item will occupy.
17+
* `CowStart` - indicates the starting row of the item.
18+
* `RowSpan` - indicates how many rows the item will occupy
19+
* `Shape` - the type of shape that will fill the selected cells.
20+
21+
The following example shows how to create a SkeletonContainer using a grid featuring all shape types:
22+
23+
```Razor
24+
@(Html.Kendo().SkeletonContainer()
25+
.Name("skeleton")
26+
.Height("340px")
27+
.Width("350px")
28+
.Animation(SkeletonContainerAnimation.Pulse)
29+
.Grid(g=> {
30+
g.Rows(20);
31+
g.Columns(20);
32+
g.Items(i=> {
33+
i.Add().ColStart(2).ColSpan(4).RowStart(2).RowSpan(4).Shape(SkeletonContainerItemShape.Circle);
34+
i.Add().ColStart(7).ColSpan(13).RowStart(2).RowSpan(2).Shape(SkeletonContainerItemShape.Text);
35+
i.Add().ColStart(7).ColSpan(9).RowStart(4).RowSpan(2).Shape(SkeletonContainerItemShape.Text);
36+
i.Add().ColStart(1).ColSpan(20).RowStart(7).RowSpan(11).Shape(SkeletonContainerItemShape.Rectangle);
37+
i.Add().ColStart(2).ColSpan(18).RowStart(19).RowSpan(1).Shape(SkeletonContainerItemShape.Text);
38+
});
39+
})
40+
)
41+
```
42+
```CSS
43+
<style>
44+
#skeleton {
45+
border: 1px solid;
46+
border-color: rgba(0, 0, 0, 0.08);
47+
}
48+
</style>
49+
```
50+
51+
## See Also
52+
53+
* [Overview of the SkeletonContainer (Demo)](https://demos.telerik.com/{{ site.platform }}/skeletoncontainer/index)
54+
* [Server-Side API](/api/skeletoncontainer)

‎docs-aspnet/html-helpers/interactivity/skeletoncontainer/overview.md‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: Overview
3+
page_title: Overview
4+
description: "Learn the basics when working with the Telerik UI SkeletonContainer HtmlHelper for {{ site.framework }}."
5+
slug: htmlhelpers_skeletoncontainer_aspnetcore_overview
6+
position: 1
7+
---
8+
9+
# SkeletonContainer Overview
10+
11+
The Telerik UI SkeletonContainer HtmlHelper for {{ site.framework }} is a server-side wrapper for the Kendo UI SkeletonContainer widget.
12+
13+
The SkeletonContainer widget indicates to the user that the content is coming but has not yet been loaded. It aims at helping the user focus on progress and makes the page load time appear shorter.
14+
15+
A SkeletonContainer is basically a simplified preview version of a page into which information is gradually loaded (i.e. via AJAX requests).
16+
17+
## Initializing the SkeletonContainer
18+
19+
It is recommended to initialize the widget from a div HTML element.
20+
21+
The following example demonstrates how to initialize the SkeletonContainer from an existing `<div>` element.
22+
23+
```Razor
24+
@(Html.Kendo().SkeletonContainer()
25+
.Name("skeleton")
26+
)
27+
```
28+
29+
## Functionality and Features
30+
31+
The Telerik UI SkeletonContainer for {{ site.framework }} accepts either a template or a CSS Grid. While the developer can pass merely anything at the template, the CSS Grid exposes an `Item` object that has a set of predefined properties. Find out more about the CSS Grid setup here:
32+
33+
* [Items]({% slug htmlhelpers_skeletoncontainer_aspnetcore_items %})
34+
35+
## See Also
36+
37+
* [Overview of the SkeletonContainer HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/skeletoncontainer/index)
38+
* [Server-Side API](/api/skeletoncontainer)

‎docs-aspnet/list-of-helpers.html‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -222,6 +222,9 @@
222222
<li>
223223
<a href="/{{ site.platform }}/html-helpers/gauges/arcgauge/overview">ArcGauge</a>
224224
</li>
225+
<li>
226+
<a href="/{{ site.platform }}/html-helpers/gauges/circulargauge/overview">CircularGauge</a>
227+
</li>
225228
<li>
226229
<a href="/{{ site.platform }}/html-helpers/gauges/lineargauge/overview">LinearGauge</a>
227230
</li>

‎docs-aspnet/tag-helpers/interactivity/skeletoncontainer/overview.md‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
---
2+
title: Overview
3+
page_title: Overview
4+
description: "Learn the basics when working with the Telerik UI SkeletonContainer TagHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: taghelpers_skeletoncontainer_aspnetcore
6+
position: 1
7+
---
8+
9+
# SkeletonContainer TagHelper Overview
10+
11+
The Telerik UI SkeletonContainer TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI SkeletonContainer widget.
12+
13+
The SkeletonContainer widget indicates to the user that the content is coming but has not yet been loaded. It aims at helping the user focus on progress and makes the page load time appear shorter.
14+
15+
A SkeletonContainer is basically a simplified preview version of a page into which information is gradually loaded (i.e. via AJAX requests).
16+
17+
## Initializing the SkeletonContainer
18+
19+
The SkeletonContainer TagHelper configuration options are passed as attributes of the tag.
20+
21+
```tagHelper
22+
23+
<kendo-skeletoncontainer name="skeleton" animation="SkeletonContainerAnimation.Pulse"
24+
template-id="tmpl">
25+
</kendo-skeletoncontainer>
26+
```
27+
```JavaScript
28+
<script id="tmpl" type="text/html">
29+
<div class='k-card'>
30+
<div class='k-card-header'>
31+
<div>
32+
<span data-shape-circle class='k-card-image avatar'></span>
33+
</div>
34+
<div class='user-info'>
35+
<span data-shape-text class='k-card-title'></span>
36+
<span data-shape-text class='k-card-subtitle'></span>
37+
</div>
38+
</div>
39+
<span data-shape-rectangle style='width: 340px; height: 225px; '></span>
40+
<div class='k-card-body'>
41+
<span data-shape-text></span>
42+
</div>
43+
</div>
44+
</script>
45+
```
46+
47+
## See Also
48+
49+
* [Basic Usage of the SkeletonContainer TagHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/skeletoncontainer/tag-helper)
50+
* [Server-Side API](/api/skeletoncontainer)

0 commit comments

Comments
 (0)