New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Items
Updated over 6 months ago
The Telerik UI SkeletonContainer component for ASP.NET MVC uses the default CSS Grid 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 occupyShape- 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); }); }) )