Skip to content

Commit d228508

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 445ab97 commit d228508

File tree

12 files changed

+575
-190
lines changed

12 files changed

+575
-190
lines changed

‎docs-aspnet/html-helpers/data-management/grid/how-to/Appearance/use-groupheadertemplate-foreignkeycolumn.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ slug: howto_usegroupheadertemplate_foreignkeycolumn_gridaspnetmv
88

99
# Use GroupHeaderTemplate with ForeignKeyColumn
1010

11-
To see the example, refer to the project on how to [use the `GropuHeaderTemplate` with the `ForeignKeyColumn` configuration](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/grid-foreingkeycolumn-groupheadertemplate) in a Kendo UI Grid in ASP.NET MVC applications.
11+
To see the example, refer to the project on how to [use the `GroupHeaderTemplate` with the `ForeignKeyColumn` configuration](https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/grid-foreingkeycolumn-groupheadertemplate) in a Kendo UI Grid in ASP.NET MVC applications.
1212

1313
## See Also
1414

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

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,49 @@ The following example shows how to create a SkeletonContainer using a grid featu
3939
})
4040
)
4141
```
42+
{% if site.core %}
43+
```TagHelper
44+
<kendo-skeletoncontainer name="skeleton"
45+
height="340"
46+
width="350"
47+
animation="SkeletonContainerAnimation.Pulse">
48+
<grid rows="20" columns="20">
49+
<items>
50+
<item col-start="2"
51+
col-span="4"
52+
row-start="2"
53+
row-span="4"
54+
shape="SkeletonContainerItemShape.Circle">
55+
</item>
56+
<item col-start="7"
57+
col-span="13"
58+
row-start="2"
59+
row-span="2"
60+
shape="SkeletonContainerItemShape.Text">
61+
</item>
62+
<item col-start="7"
63+
col-span="9"
64+
row-start="4"
65+
row-span="2"
66+
shape="SkeletonContainerItemShape.Text">
67+
</item>
68+
<item col-start="1"
69+
col-span="20"
70+
row-start="7"
71+
row-span="11"
72+
shape="SkeletonContainerItemShape.Rectangle">
73+
</item>
74+
<item col-start="2"
75+
col-span="18"
76+
row-start="19"
77+
row-span="1"
78+
shape="SkeletonContainerItemShape.Text">
79+
</item>
80+
</items>
81+
</grid>
82+
</kendo-skeletoncontainer>
83+
```
84+
{% endif %}
4285
```CSS
4386
<style>
4487
#skeleton {

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,16 @@ The following example demonstrates how to initialize the SkeletonContainer from
3232
```HtmlHelper
3333
@(Html.Kendo().SkeletonContainer()
3434
.Name("skeleton")
35+
.Animation(SkeletonContainerAnimation.Pulse)
36+
.TemplateId("tmpl")
3537
)
3638
```
3739
{% if site.core %}
3840
```TagHelper
3941
40-
<kendo-skeletoncontainer name="skeleton" animation="SkeletonContainerAnimation.Pulse"
41-
template-id="tmpl">
42+
<kendo-skeletoncontainer name="skeleton"
43+
animation="SkeletonContainerAnimation.Pulse"
44+
template-id="tmpl">
4245
</kendo-skeletoncontainer>
4346
```
4447
```JavaScript

‎docs-aspnet/html-helpers/layout/responsivepanel/overview.md‎

Lines changed: 7 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -36,35 +36,8 @@ The following example demonstrates how to define the Responsive Panel.
3636
```
3737
{% if site.core %}
3838
```TagHelper
39-
<kendo-responsivepanel name="slidebar" breakpoint="1000" orientation="left">
40-
<div id="profile" class="widget">
41-
<h3>Profile</h3>
42-
<div>
43-
<div class="profile-photo"></div>
44-
<h4>Lynda Schleifer</h4>
45-
<p>Sales Associate</p>
46-
</div>
47-
</div>
48-
<div id="teammates" class="widget">
49-
<h3>Teammates</h3>
50-
<div>
51-
<div class="team-mate">
52-
<img src="@Url.Content("~/content/web/panelbar/andrew.jpg")" alt="Andrew Fuller">
53-
<h4>Andrew Fuller</h4>
54-
<p>Team Lead</p>
55-
</div>
56-
<div class="team-mate">
57-
<img src="@Url.Content("~/content/web/panelbar/nancy.jpg")" alt="Nancy Leverling">
58-
<h4>Nancy Leverling</h4>
59-
<p>Sales Associate</p>
60-
</div>
61-
<div class="team-mate">
62-
<img src="@Url.Content("~/content/web/panelbar/robert.jpg")" alt="Robert King">
63-
<h4>Robert King</h4>
64-
<p>Business System Analyst</p>
65-
</div>
66-
</div>
67-
</div>
39+
<kendo-responsivepanel name="sidebar" breakpoint="1000">
40+
<p>This content will collapse if the width is less than 1000px</p>
6841
</kendo-responsivepanel>
6942
```
7043
{% endif %}
@@ -92,6 +65,11 @@ The following example demonstrates the basic configuration of the Responsive Pan
9265
```
9366
{% if site.core %}
9467
```TagHelper
68+
<div class="dash-head">
69+
<!-- toggle button for responsive panel, hidden on large screens -->
70+
<button class="k-rpanel-toggle"><span class="k-icon k-i-menu"></span></button>
71+
</div>
72+
<!-- responsive panel, collapsed on small screens -->
9573
<kendo-responsivepanel name="slidebar" breakpoint="1000" orientation="left">
9674
<div id="profile" class="widget">
9775
<h3>Profile</h3>

‎docs-aspnet/html-helpers/navigation/timeline/actions.md‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,46 @@ The `href` attribute of an action will be set to the value of the `src` field of
1616
The example below shows how you can a few actions actions for one event.
1717

1818
```HtmlHelper
19-
@(Html.Kendo().Timeline<Kendo.Mvc.Examples.Models.TimelineEventModel>()
20-
.Name("Timeline")
21-
.DataDateField("EventDate")
22-
.DataDescriptionField("Description")
23-
.DataSubTitleField("Subtitle")
24-
.DataTitleField("Title")
25-
.DataActionsField("Actions")
26-
.Orientation("horizontal")
27-
.DataSource(dt => dt.Read("GetTimelineData", "Timeline"))
28-
)
19+
@(Html.Kendo().Timeline<Kendo.Mvc.Examples.Models.TimelineEventModel>()
20+
.Name("Timeline")
21+
.DataDateField("EventDate")
22+
.DataDescriptionField("Description")
23+
.DataSubTitleField("Subtitle")
24+
.DataTitleField("Title")
25+
.DataActionsField("Actions")
26+
.Orientation("horizontal")
27+
.DataSource(dt => dt.Read("GetTimelineData", "Timeline"))
28+
)
2929
```
30+
{% if site.core %}
31+
```TagHelper
32+
<kendo-timeline name="Timeline"
33+
orientation="horizontal"
34+
datadatefield="EventDate"
35+
datatitlefield="Title"
36+
datasubtitlefield="Subtitle"
37+
datadescriptionfield="Description"
38+
dataactionsfield="Actions"
39+
dataimagesfield="Images">
40+
<datasource>
41+
<transport>
42+
<read url="@Url.Action("GetTimelineData","Timeline")" />
43+
</transport>
44+
<schema>
45+
<model>
46+
<fields>
47+
<field name="EventDate" type="date"></field>
48+
<field name="Title" type="string"></field>
49+
<field name="Subtitle" type="string"></field>
50+
<field name="Description" type="string"></field>
51+
</fields>
52+
</model>
53+
</schema>
54+
</datasource>
55+
</kendo-timeline>
56+
```
57+
{% endif %}
58+
3059
```Controller
3160
public partial class Timeline : BaseController
3261
{

‎docs-aspnet/html-helpers/navigation/timeline/images.md‎

Lines changed: 38 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,45 @@ The example below shows how you can add an image for the events.
1717
1818

1919
```HtmlHelper
20-
@(Html.Kendo().Timeline<Kendo.Mvc.Examples.Models.TimelineEventModel>()
21-
.Name("Timeline")
22-
.DataDateField("EventDate")
23-
.DataDescriptionField("Description")
24-
.DataSubTitleField("Subtitle")
25-
.DataTitleField("Title")
26-
.DataImagesField("Images")
27-
.Orientation("vertical")
28-
.DataSource(dt => dt.Read("GetTimelineData", "Timeline"))
29-
)
20+
@(Html.Kendo().Timeline<Kendo.Mvc.Examples.Models.TimelineEventModel>()
21+
.Name("Timeline")
22+
.DataDateField("EventDate")
23+
.DataDescriptionField("Description")
24+
.DataSubTitleField("Subtitle")
25+
.DataTitleField("Title")
26+
.DataImagesField("Images")
27+
.Orientation("vertical")
28+
.DataSource(dt => dt.Read("GetTimelineData", "Timeline"))
29+
)
3030
```
31+
{% if site.core %}
32+
```TagHelper
33+
<kendo-timeline name="Timeline"
34+
orientation="vertical"
35+
datadatefield="EventDate"
36+
datatitlefield="Title"
37+
datasubtitlefield="Subtitle"
38+
datadescriptionfield="Description"
39+
dataactionsfield="Actions"
40+
dataimagesfield="Images">
41+
<datasource>
42+
<transport>
43+
<read url="@Url.Action("GetTimelineData","Timeline")" />
44+
</transport>
45+
<schema>
46+
<model>
47+
<fields>
48+
<field name="EventDate" type="date"></field>
49+
<field name="Title" type="string"></field>
50+
<field name="Subtitle" type="string"></field>
51+
<field name="Description" type="string"></field>
52+
</fields>
53+
</model>
54+
</schema>
55+
</datasource>
56+
</kendo-timeline>
57+
```
58+
{% endif %}
3159
```Controller
3260
public partial class Timeline : BaseController
3361
{

‎docs-aspnet/html-helpers/navigation/timeline/orientation.md‎

Lines changed: 82 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -20,20 +20,50 @@ You can have the events render alternatingly on both sides of the axis by adding
2020
If you add the `.CollapsibleEvents()` option, all events will start out collapsed (by default, all events are expanded). The user can then expand a particular event to see more than its title and subtitle.
2121

2222
```HtmlHelper
23-
@(Html.Kendo().Timeline<MyApp.Models.TimelineEventModel>()
24-
.Name("Timeline")
25-
.Orientation("vertical") // defines the layout of the widget
26-
.AlternatingMode() // renders the events on both sides of the axis in vertical mode
27-
.CollapsibleEvents() // starts all events collapsed in vertical mode
28-
.DataDateField("EventDate")
29-
.DataDescriptionField("Description")
30-
.DataSubTitleField("Subtitle")
31-
.DataTitleField("Title")
32-
.DataImagesField("Images")
33-
.DataActionsField("Actions")
34-
.DataSource(dt => dt.Read("GetTimelineData", "Timeline"))
35-
)
23+
@(Html.Kendo().Timeline<MyApp.Models.TimelineEventModel>()
24+
.Name("Timeline")
25+
.Orientation("vertical") // defines the layout of the widget
26+
.AlternatingMode() // renders the events on both sides of the axis in vertical mode
27+
.CollapsibleEvents() // starts all events collapsed in vertical mode
28+
.DataDateField("EventDate")
29+
.DataDescriptionField("Description")
30+
.DataSubTitleField("Subtitle")
31+
.DataTitleField("Title")
32+
.DataImagesField("Images")
33+
.DataActionsField("Actions")
34+
.DataSource(dt => dt.Read("GetTimelineData", "Timeline"))
35+
)
3636
```
37+
{% if site.core %}
38+
```TagHelper
39+
<kendo-timeline name="Timeline"
40+
orientation="vertical"
41+
datadatefield="EventDate"
42+
datatitlefield="Title"
43+
datasubtitlefield="Subtitle"
44+
datadescriptionfield="Description"
45+
dataactionsfield="Actions"
46+
dataimagesfield="Images"
47+
alternating-mode="true"
48+
collapsible-events="true">
49+
<datasource>
50+
<transport>
51+
<read url="@Url.Action("GetTimelineData","Timeline")" />
52+
</transport>
53+
<schema>
54+
<model>
55+
<fields>
56+
<field name="EventDate" type="date"></field>
57+
<field name="Title" type="string"></field>
58+
<field name="Subtitle" type="string"></field>
59+
<field name="Description" type="string"></field>
60+
</fields>
61+
</model>
62+
</schema>
63+
</datasource>
64+
</kendo-timeline>
65+
```
66+
{% endif %}
3767
```Controller
3868
public partial class Timeline : BaseController
3969
{
@@ -123,18 +153,46 @@ The horizontal mode renders the event details on demand (only when they are sele
123153
Alternating rendering and collapsing is not available for the events in this mode.
124154

125155
```HtmlHelper
126-
@(Html.Kendo().Timeline<MyApp.Models.TimelineEventModel>()
127-
.Name("Timeline")
128-
.Orientation("horizontal") // defines the layout of the widget
129-
.DataDateField("EventDate")
130-
.DataDescriptionField("Description")
131-
.DataSubTitleField("Subtitle")
132-
.DataTitleField("Title")
133-
.DataImagesField("Images")
134-
.DataActionsField("Actions")
135-
.DataSource(dt => dt.Read("GetTimelineData", "Timeline"))
136-
)
156+
@(Html.Kendo().Timeline<MyApp.Models.TimelineEventModel>()
157+
.Name("Timeline")
158+
.Orientation("horizontal") // defines the layout of the widget
159+
.DataDateField("EventDate")
160+
.DataDescriptionField("Description")
161+
.DataSubTitleField("Subtitle")
162+
.DataTitleField("Title")
163+
.DataImagesField("Images")
164+
.DataActionsField("Actions")
165+
.DataSource(dt => dt.Read("GetTimelineData", "Timeline"))
166+
)
167+
```
168+
{% if site.core %}
169+
```TagHelper
170+
<kendo-timeline name="Timeline"
171+
orientation="horizontal"
172+
datadatefield="EventDate"
173+
datatitlefield="Title"
174+
datasubtitlefield="Subtitle"
175+
datadescriptionfield="Description"
176+
dataactionsfield="Actions"
177+
dataimagesfield="Images">
178+
<datasource>
179+
<transport>
180+
<read url="@Url.Action("GetTimelineData","Timeline")" />
181+
</transport>
182+
<schema>
183+
<model>
184+
<fields>
185+
<field name="EventDate" type="date"></field>
186+
<field name="Title" type="string"></field>
187+
<field name="Subtitle" type="string"></field>
188+
<field name="Description" type="string"></field>
189+
</fields>
190+
</model>
191+
</schema>
192+
</datasource>
193+
</kendo-timeline>
137194
```
195+
{% endif %}
138196
```Controller
139197
public partial class Timeline : BaseController
140198
{

0 commit comments

Comments
 (0)