forked from telerik/kendo-ui-core
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Kendo Bot
committed
Apr 19, 2021
1 parent
69ed196
commit 582ddc1
Showing
22 changed files
with
3,117 additions
and
29 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
71 changes: 71 additions & 0 deletions
71
docs-aspnet/html-helpers/data-management/treelist/persist-state.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| --- | ||
| title: State Persistence | ||
| page_title: State Persistence | ||
| description: "Get started with the Telerik UI TreeList HtmlHelper for {{ site.framework }} and persist the state of the widget." | ||
| slug: htmlhelpers_treelist_aspnetcore_persiststate | ||
| position: 9 | ||
| --- | ||
|
|
||
| # State Persistence | ||
|
|
||
| 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. | ||
|
|
||
| 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. | ||
|
|
||
| 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. | ||
|
|
||
| ```View | ||
| @(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>() | ||
| .Name("treelist") | ||
| .Columns(columns => | ||
| { | ||
| columns.Add().Field(e => e.FirstName).Title("First Name").Width(250); | ||
| columns.Add().Field(e => e.LastName).Title("Last Name"); | ||
| columns.Add().Field(e => e.Position); | ||
| columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}").Filterable(false); | ||
| }) | ||
| .Filterable(true) | ||
| .Sortable(true) | ||
| .Reorderable(true) | ||
| .Resizable(true) | ||
| .ColumnMenu() | ||
| .DataSource(dataSource => dataSource | ||
| .ServerOperation(false) | ||
| .Read(read => read.Action("All", "EmployeeDirectory")) | ||
| .Model(m => | ||
| { | ||
| m.Id(f => f.EmployeeId); | ||
| m.ParentId(f => f.ReportsTo); | ||
| m.Expanded(true); | ||
| m.Field(f => f.FirstName); | ||
| m.Field(f => f.LastName); | ||
| m.Field(f => f.ReportsTo); | ||
| m.Field(f => f.Position); | ||
| m.Field(f => f.Extension); | ||
| }) | ||
| ) | ||
| .Height(540) | ||
| ) | ||
| <script> | ||
| $(document).ready(function () { | ||
| var treeList = $("#treelist").data("kendoTreeList"); | ||
| var options = localStorage["kendo-treelist-options"]; | ||
| if (options) { | ||
| treeList.setOptions(JSON.parse(options)); // Load the stored TreeList options after its initialization | ||
| } | ||
| $(window).on( "unload", function(e){ | ||
| e.preventDefault(); | ||
| localStorage["kendo-treelist-options"] = kendo.stringify(treeList.getOptions()); // Get and store the TreeList settings when navigating away from the page | ||
| }); | ||
| }); | ||
| </script> | ||
| ``` | ||
|
|
||
| ## See Also | ||
|
|
||
| * [Persisting the State of the TreeList HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/treelist/persist-state) | ||
| * [Server-Side API](/api/treelist) |
54 changes: 54 additions & 0 deletions
54
docs-aspnet/html-helpers/interactivity/skeletoncontainer/items.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| --- | ||
| title: Items | ||
| page_title: Items | ||
| description: "Learn how to configure the items in the SkeletonContaienr HtmlHelper for {{ site.framework }}." | ||
| slug: htmlhelpers_skeletoncontainer_aspnetcore_items | ||
| position: 2 | ||
| --- | ||
|
|
||
| # Items | ||
|
|
||
| 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. | ||
|
|
||
| Each item contains the following properties: | ||
|
|
||
| * `ColStart` - indicates the starting column of the item. | ||
| * `ColSpan` - indicates how many columns the item will occupy. | ||
| * `CowStart` - indicates the starting row of the item. | ||
| * `RowSpan` - indicates how many rows the item will occupy | ||
| * `Shape` - the type of shape that will fill the selected cells. | ||
|
|
||
| The following example shows how to create a SkeletonContainer using a grid featuring all shape types: | ||
|
|
||
| ```Razor | ||
| @(Html.Kendo().SkeletonContainer() | ||
| .Name("skeleton") | ||
| .Height("340px") | ||
| .Width("350px") | ||
| .Animation(SkeletonContainerAnimation.Pulse) | ||
| .Grid(g=> { | ||
| g.Rows(20); | ||
| g.Columns(20); | ||
| g.Items(i=> { | ||
| i.Add().ColStart(2).ColSpan(4).RowStart(2).RowSpan(4).Shape(SkeletonContainerItemShape.Circle); | ||
| i.Add().ColStart(7).ColSpan(13).RowStart(2).RowSpan(2).Shape(SkeletonContainerItemShape.Text); | ||
| i.Add().ColStart(7).ColSpan(9).RowStart(4).RowSpan(2).Shape(SkeletonContainerItemShape.Text); | ||
| i.Add().ColStart(1).ColSpan(20).RowStart(7).RowSpan(11).Shape(SkeletonContainerItemShape.Rectangle); | ||
| i.Add().ColStart(2).ColSpan(18).RowStart(19).RowSpan(1).Shape(SkeletonContainerItemShape.Text); | ||
| }); | ||
| }) | ||
| ) | ||
| ``` | ||
| ```CSS | ||
| <style> | ||
| #skeleton { | ||
| border: 1px solid; | ||
| border-color: rgba(0, 0, 0, 0.08); | ||
| } | ||
| </style> | ||
| ``` | ||
|
|
||
| ## See Also | ||
|
|
||
| * [Overview of the SkeletonContainer (Demo)](https://demos.telerik.com/{{ site.platform }}/skeletoncontainer/index) | ||
| * [Server-Side API](/api/skeletoncontainer) |
38 changes: 38 additions & 0 deletions
38
docs-aspnet/html-helpers/interactivity/skeletoncontainer/overview.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| --- | ||
| title: Overview | ||
| page_title: Overview | ||
| description: "Learn the basics when working with the Telerik UI SkeletonContainer HtmlHelper for {{ site.framework }}." | ||
| slug: htmlhelpers_skeletoncontainer_aspnetcore_overview | ||
| position: 1 | ||
| --- | ||
|
|
||
| # SkeletonContainer Overview | ||
|
|
||
| The Telerik UI SkeletonContainer HtmlHelper for {{ site.framework }} is a server-side wrapper for the Kendo UI SkeletonContainer widget. | ||
|
|
||
| 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. | ||
|
|
||
| A SkeletonContainer is basically a simplified preview version of a page into which information is gradually loaded (i.e. via AJAX requests). | ||
|
|
||
| ## Initializing the SkeletonContainer | ||
|
|
||
| It is recommended to initialize the widget from a div HTML element. | ||
|
|
||
| The following example demonstrates how to initialize the SkeletonContainer from an existing `<div>` element. | ||
|
|
||
| ```Razor | ||
| @(Html.Kendo().SkeletonContainer() | ||
| .Name("skeleton") | ||
| ) | ||
| ``` | ||
|
|
||
| ## Functionality and Features | ||
|
|
||
| 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: | ||
|
|
||
| * [Items]({% slug htmlhelpers_skeletoncontainer_aspnetcore_items %}) | ||
|
|
||
| ## See Also | ||
|
|
||
| * [Overview of the SkeletonContainer HtmlHelper for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/skeletoncontainer/index) | ||
| * [Server-Side API](/api/skeletoncontainer) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
50 changes: 50 additions & 0 deletions
50
docs-aspnet/tag-helpers/interactivity/skeletoncontainer/overview.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| --- | ||
| title: Overview | ||
| page_title: Overview | ||
| description: "Learn the basics when working with the Telerik UI SkeletonContainer TagHelper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)." | ||
| slug: taghelpers_skeletoncontainer_aspnetcore | ||
| position: 1 | ||
| --- | ||
|
|
||
| # SkeletonContainer TagHelper Overview | ||
|
|
||
| The Telerik UI SkeletonContainer TagHelper for ASP.NET Core is a server-side wrapper for the Kendo UI SkeletonContainer widget. | ||
|
|
||
| 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. | ||
|
|
||
| A SkeletonContainer is basically a simplified preview version of a page into which information is gradually loaded (i.e. via AJAX requests). | ||
|
|
||
| ## Initializing the SkeletonContainer | ||
|
|
||
| The SkeletonContainer TagHelper configuration options are passed as attributes of the tag. | ||
|
|
||
| ```tagHelper | ||
| <kendo-skeletoncontainer name="skeleton" animation="SkeletonContainerAnimation.Pulse" | ||
| template-id="tmpl"> | ||
| </kendo-skeletoncontainer> | ||
| ``` | ||
| ```JavaScript | ||
| <script id="tmpl" type="text/html"> | ||
| <div class='k-card'> | ||
| <div class='k-card-header'> | ||
| <div> | ||
| <span data-shape-circle class='k-card-image avatar'></span> | ||
| </div> | ||
| <div class='user-info'> | ||
| <span data-shape-text class='k-card-title'></span> | ||
| <span data-shape-text class='k-card-subtitle'></span> | ||
| </div> | ||
| </div> | ||
| <span data-shape-rectangle style='width: 340px; height: 225px; '></span> | ||
| <div class='k-card-body'> | ||
| <span data-shape-text></span> | ||
| </div> | ||
| </div> | ||
| </script> | ||
| ``` | ||
|
|
||
| ## See Also | ||
|
|
||
| * [Basic Usage of the SkeletonContainer TagHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/skeletoncontainer/tag-helper) | ||
| * [Server-Side API](/api/skeletoncontainer) |
Oops, something went wrong.