Skip to content

Commit 706a7a0

Browse files
author
Kendo Bot
committed
Sync with Kendo UI Professional
1 parent 60040a8 commit 706a7a0

File tree

79 files changed

+1006
-281
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

79 files changed

+1006
-281
lines changed

‎docs-aspnet-core/helpers/tag-helpers/barcode.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: Barcode
3+
page_title: Barcode | Telerik UI for ASP.NET Core Tag Helpers
4+
description: "Learn the basics when working with the Barcode tag helper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: taghelpers_barcode_aspnetcore
6+
---
7+
8+
# Barcode Tag Helper Overview
9+
10+
The Barcode tag helper helps you configure the Kendo UI Barcode widget in ASP.NET Core applications.
11+
12+
## Basic Usage
13+
14+
The following example demonstrates how to define the Barcode by using the Barcode tag helper.
15+
16+
###### Example
17+
18+
<kendo-barcode name="BarCode"></kendo-barcode>
19+
20+
## Configuration
21+
22+
The Barcode tag helper configuration options are passed as attributes of the tag.
23+
24+
###### Example
25+
26+
```tab-tagHelper
27+
<kendo-barcode name="barcode" value="10110110" type="BarcodeSymbology.Code128" width="200" height="100">
28+
<border color="red" width="2"/>
29+
</kendo-barcode>
30+
```
31+
```tab-cshtml
32+
33+
@(Html.Kendo().Barcode()
34+
.Name("gudbrands")
35+
.Value("10110110")
36+
.Encoding(BarcodeSymbology.Code128)
37+
.Width(200)
38+
.Height(100)
39+
.Border(border => border.Color("red").Width(2)))
40+
)
41+
```
42+
43+
## See Also
44+
45+
* [Overview of Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})
46+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects]({% slug gettingstarted_aspnetmvc6_aspnetmvc %})
47+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects on Linux]({% slug gettingstartedlinux_aspnetmvc6_aspnetmvc %})
48+
* [Known Issues with Telerik UI for ASP.NET Core]({% slug knownissues_aspnetmvc6_aspnetmvc %})

‎docs-aspnet-core/helpers/tag-helpers/button-group.md

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
---
2+
title: ButtonGroup
3+
page_title: ButtonGroup | Telerik UI for ASP.NET Core Tag Helpers
4+
description: "Learn the basics when working with the ButtonGroup tag helper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
previous_url: /aspnet-core/helpers/button-group
6+
slug: taghelpers_buttongroup_aspnetcore
7+
---
8+
9+
# ButtonGroup Tag Helper Overview
10+
11+
The ButtonGroup tag helper helps you configure the Kendo UI ButtonGroup widget in ASP.NET Core applications.
12+
13+
## Basic Usage
14+
15+
The following example demonstrates how to define the ButtonGroup by using the ButtonGroup tag helper.
16+
17+
###### Example
18+
19+
<kendo-buttongroup name="buttonGroup">
20+
<buttongroup-items>
21+
<item text="Click here!"></item>
22+
</buttongroup-items>
23+
</kendo-buttongroup>
24+
25+
## Configuration
26+
27+
The Button tag helper configuration options are passed as attributes of the tag. The buttons are specified in the `buttongroup-items` child tag collection.
28+
29+
###### Example
30+
31+
```tab-tagHelper
32+
33+
<kendo-buttongroup name="player">
34+
<buttongroup-items>
35+
<item icon="play" text="Play" selected="true"></item>
36+
<item icon="pause" text="Pause" enabled="false"></item>
37+
<item icon="stop" text="Stop"></item>
38+
</buttongroup-items>
39+
</kendo-buttongroup>
40+
```
41+
```tab-cshtml
42+
43+
@(Html.Kendo().ButtonGroup()
44+
.Name("player")
45+
.Items(t =>
46+
{
47+
t.Add().Text("Play").Icon("play").Selected(true);
48+
t.Add().Text("Pause").Icon("pause").Enabled(false);
49+
t.Add().Text("stop").Icon("stop");
50+
})
51+
)
52+
```
53+
54+
## See Also
55+
56+
* [Overview of Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})
57+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects]({% slug gettingstarted_aspnetmvc6_aspnetmvc %})
58+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects on Linux]({% slug gettingstartedlinux_aspnetmvc6_aspnetmvc %})
59+
* [Known Issues with Telerik UI for ASP.NET Core]({% slug knownissues_aspnetmvc6_aspnetmvc %})

‎docs-aspnet-core/helpers/tag-helpers/chart.md

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
---
2+
title: Chart
3+
page_title: Chart | Telerik UI for ASP.NET Core Tag Helpers
4+
description: "Learn the basics when working with the Chart tag helper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: taghelpers_chart_aspnetcore
6+
---
7+
8+
# Chart Tag Helper Overview
9+
10+
The Chart tag helper helps you configure the Kendo UI Chart widget in ASP.NET Core applications.
11+
12+
## Basic Usage
13+
14+
The following example demonstrates how to define the Chart by using the Chart tag helper.
15+
16+
###### Example
17+
18+
<kendo-chart name="chart"></kendo-chart>
19+
20+
## Configuration
21+
22+
The Chart tag helper configuration options are passed as attributes of the tag. The following **tagHelper** and **razor** configurations are equivalent.
23+
24+
###### Example
25+
26+
```tab-tagHelper
27+
<kendo-chart name="chart">
28+
<title text="Gross domestic product growth /GDP annual %/"></title>
29+
<legend position="ChartLegendPosition.Top"></legend>
30+
<series-defaults type="ChartSeriesType.Column"></series-defaults>
31+
32+
<series>
33+
<series-item name="India" data="new double[] { 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 }"></series-item>
34+
<series-item name="Russian Federation" data="new double[] { 4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3 }"></series-item>
35+
<series-item name="Germany" data="new double[] { 0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995 }"></series-item>
36+
<series-item name="World" data="new double[] { 1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727 }"></series-item>
37+
</series>
38+
39+
<value-axis>
40+
<value-axis-item>
41+
<labels format="{0}%"></labels>
42+
<line visible="false" />
43+
</value-axis-item>
44+
</value-axis>
45+
46+
<category-axis>
47+
<category-axis-item categories='new string[] { "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "20010", "2011", }'>
48+
<labels>
49+
<chart-category-axis-labels-padding top="135" />
50+
</labels>
51+
<line visible="false" />
52+
</category-axis-item>
53+
</category-axis>
54+
55+
<tooltip visible="true" format="{0}%" template="#= series.name #: #= value #"></tooltip>
56+
</kendo-chart>
57+
```
58+
```tab-cshtml
59+
@(Html.Kendo().Chart()
60+
.Name("chart")
61+
.Title("Gross domestic product growth /GDP annual %/")
62+
.Legend(legend => legend
63+
.Position(ChartLegendPosition.Top)
64+
)
65+
.ChartArea(chartArea => chartArea
66+
.Background("transparent")
67+
)
68+
.Series(series =>
69+
{
70+
series.Column(new double[] { 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 }).Name("India");
71+
series.Column(new double[] { 4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3 }).Name("Russian Federation");
72+
series.Column(new double[] { 0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995 }).Name("Germany");
73+
series.Column(new double[] { 1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727 }).Name("World");
74+
})
75+
.CategoryAxis(axis => axis
76+
.Name("series-axis")
77+
.Line(line => line.Visible(false))
78+
)
79+
.CategoryAxis(axis => axis
80+
.Name("label-axis")
81+
.Categories("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011")
82+
)
83+
.ValueAxis(axis => axis
84+
.Numeric()
85+
.Labels(labels => labels.Format("{0}%"))
86+
87+
// Move the label-axis all the way down the value axis
88+
.AxisCrossingValue(0, int.MinValue)
89+
)
90+
.Tooltip(tooltip => tooltip
91+
.Visible(true)
92+
.Format("{0}%")
93+
.Template("#= series.name #: #= value #")
94+
)
95+
)
96+
```
97+
98+
## See Also
99+
100+
* [Overview of Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})
101+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects]({% slug gettingstarted_aspnetmvc6_aspnetmvc %})
102+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects on Linux]({% slug gettingstartedlinux_aspnetmvc6_aspnetmvc %})
103+
* [Known Issues with Telerik UI for ASP.NET Core]({% slug knownissues_aspnetmvc6_aspnetmvc %})

‎docs-aspnet-core/helpers/tag-helpers/datasource.md

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
---
2+
title: DataSource
3+
page_title: DataSource | Telerik UI for ASP.NET Core Tag Helpers
4+
description: "Learn the basics when working with the DataSource tag helper for ASP.NET Core (MVC 6 or ASP.NET Core MVC)."
5+
slug: taghelpers_datasource_aspnetcore
6+
---
7+
8+
# DataSource Tag Helper Overview
9+
10+
The DataSource tag helper helps you configure the Kendo UI DataSource component in ASP.NET Core applications.
11+
12+
## Basic Usage
13+
14+
The following example demonstrates how to define the DataSource by using the DataSource tag helper.
15+
16+
###### Example
17+
18+
<kendo-datasource name="datasource"></kendo-datasource >
19+
20+
## Configuration
21+
22+
The DataSource tag helper configuration options are passed as attributes of the tag. The DataSource is an abstraction for binding the Kendo UI widgets to local and remote data and to handle various data operations with the `databound` Kendo UI TagHelpers.
23+
24+
###### Example
25+
26+
```tab-tagHelper
27+
<kendo-datasource name="dataSource" type="DataSourceTagHelperType.Ajax" server-operation="false" page-size="5">
28+
<transport>
29+
<read url="/DataSource/Products_Read" />
30+
</transport>
31+
<sorts>
32+
<sort field="fieldName" direction="asc" />
33+
</sorts>
34+
</kendo-datasource>
35+
```
36+
```tab-cshtml
37+
@(Html.Kendo().DataSource<Kendo.Mvc.Examples.Models.ProductViewModel>()
38+
.Name("dataSource1")
39+
.Ajax(dataSource => dataSource
40+
.Read(read => read.Action("Products_Read", "DataSource"))
41+
.ServerOperation(false)
42+
.PageSize(5)
43+
.Sort(sort => sort.Add("FieldName").Ascending())
44+
)
45+
)
46+
```
47+
48+
## DataSource Types
49+
50+
The DataSource supports the following types of binding:
51+
52+
1. Ajax&mdash;You have to set the server operations together by using the `server-operation` property. This approach is also applicable for the WebApi type of binding.
53+
1. WebApi&mdash;When you use the WebApi type of binding in an editable Grid, define the field types in the `schema` to use the correct editors for the field.
54+
55+
###### Example
56+
57+
<schema>
58+
<model id="ProductID">
59+
<fields>
60+
<field name="ProductID" type="number"></field>
61+
</fields>
62+
</model>
63+
</schema>
64+
65+
1. Custom&mdash;You can use this mode with the `oData` and `oData-v4` services. When the DataSource type is set to `custom`, the server operations have to be separately set (server-filtering, server-sorting, server-paging, server-grouping, and server-aggregates). The `serverOperation` property is only used in the Ajax and WebApi types of binding.
66+
67+
## See Also
68+
69+
* [Overview of Telerik UI for ASP.NET Core]({% slug overview_aspnetmvc6_aspnetmvc %})
70+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects]({% slug gettingstarted_aspnetmvc6_aspnetmvc %})
71+
* [Get Started with Telerik UI for ASP.NET Core in ASP.NET Core Projects on Linux]({% slug gettingstartedlinux_aspnetmvc6_aspnetmvc %})
72+
* [Known Issues with Telerik UI for ASP.NET Core]({% slug knownissues_aspnetmvc6_aspnetmvc %})

0 commit comments

Comments
 (0)