Skip to content

Commit 0fa7721

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent ab9cd1c commit 0fa7721

File tree

10 files changed

+734
-18
lines changed

10 files changed

+734
-18
lines changed

‎docs-aspnet/html-helpers/data-management/grid/binding/custom-datasource.md‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
---
2+
title: Grid Custom DataSource
3+
page_title: Custom DataSource of the Grid Component
4+
description: "Get started with Telerik UI for ASP.NET MVC and use the CustomDataSource builder for the Grid component."
5+
slug: grid_customdatasource_aspnetmvc
6+
position: 4
7+
---
8+
9+
# Custom DataSource
10+
11+
Telerik UI for ASP.NET MVC enables you to use the CustomDataSource builder that is available to helpers that support Data Binding.
12+
13+
The CustomDataSource builder class allows full control over the [DataSource client-side API options](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource), through Razor syntax. The CustomDataSource builder facilitates the usage of the Telerik UI helpers—for example, the helpers generate validation attributes, editors, and so on, while they utilize the flexibility of JavaScript. The CustomDataSource builder can also be used in more advanced scenarios where the regular DataSource builders prevent you from fully customizing the options of the DataSource.
14+
15+
## DataSource and Custom DataSource
16+
17+
The regular DataSource builders have many settings that are configured by default. The CustomDataSource builder removes these predefined settings, so when you declare a DataSource as custom, configure these additional settings.
18+
19+
The following two examples demonstrate a regular Grid AjaxDataSourceBuilder and a CustomDataSource builder.
20+
21+
```HtmlHelper
22+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
23+
.Name("grid")
24+
.Columns(columns => {
25+
columns.Bound(p => p.OrderID).Filterable(false).Width(100);
26+
columns.Bound(p => p.Freight).Width(100);
27+
columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}").Width(140);
28+
columns.Bound(p => p.ShipName);
29+
columns.Bound(p => p.ShipCity).Width(150);
30+
})
31+
.HtmlAttributes(new { style = "height:430px;" })
32+
.DataSource(dataSource => dataSource
33+
.Ajax()
34+
.PageSize(20)
35+
.Read(read => read.Action("Orders_Read", "Grid"))
36+
)
37+
)
38+
```
39+
{% if site.core %}
40+
```TagHelper
41+
@addTagHelper *, Kendo.Mvc
42+
43+
<kendo-grid name="grid" height="430">
44+
<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
45+
<schema>
46+
<model id="OrderID">
47+
<fields>
48+
<field name="OrderID" type="number"></field>
49+
<field name="Freight" type="number"></field>
50+
<field name="OrderDate" type="date"></field>
51+
<field name="ShipName" type="string"></field>
52+
<field name="ShipCity" type="string"></field>
53+
</fields>
54+
</model>
55+
</schema>
56+
<transport>
57+
<read url="@Url.Action("Orders_Read","Grid")"/>
58+
</transport>
59+
</datasource>
60+
<columns>
61+
<column field="OrderID" width="100">
62+
<filterable enabled="false"/>
63+
</column>
64+
<column field="Freight" width="100"/>
65+
<column field="OrderDate" width="140" format="{0:MM/dd/yyyy}"/>
66+
<column field="ShipName"/>
67+
<column field="ShipCity" width="150"/>
68+
</columns>
69+
</kendo-grid>
70+
```
71+
{% endif %}
72+
73+
The following example demonstrates a CustomDataSourceBuilder definition.
74+
75+
```HtmlHelper
76+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
77+
.Name("Grid")
78+
.Columns(columns => {
79+
columns.Bound(p => p.ProductName);
80+
columns.Bound(p => p.UnitPrice).Width(140);
81+
columns.Bound(p => p.UnitsInStock).Width(140);
82+
columns.Bound(p => p.Discontinued).Width(100);
83+
})
84+
.DataSource(dataSource => dataSource
85+
.Custom()
86+
.PageSize(20)
87+
.Schema(schema => schema.Model(m => m.Id(p => p.ProductID)))
88+
.Transport(transport =>
89+
{
90+
transport.Read(read => read.Action("Orders_Read", "Grid"));
91+
})
92+
)
93+
)
94+
```
95+
{% if site.core %}
96+
```TagHelper
97+
@addTagHelper *, Kendo.Mvc
98+
99+
<kendo-grid name="Grid" navigatable="true">
100+
<datasource type="DataSourceTagHelperType.Custom" page-size="20">
101+
<schema>
102+
<model id="ProductID">
103+
<fields>
104+
<field name="ProductID" type="number" editable="false"></field>
105+
<field name="ProductName" type="string"></field>
106+
<field name="UnitPrice" type="number"></field>
107+
<field name="UnitsInStock" type="number"></field>
108+
<field name="Discontinued" type="boolean"></field>
109+
</fields>
110+
</model>
111+
</schema>
112+
<transport>
113+
<read url="@Url.Action("Products_Read","Grid")"/>
114+
</transport>
115+
</datasource>
116+
<columns>
117+
<column field="ProductName"/>
118+
<column field="UnitPrice" width="140"/>
119+
<column field="UnitsInStock" width="140"/>
120+
<column field="Discontinued" width="100"/>
121+
</columns>
122+
</kendo-grid>
123+
```
124+
{% endif %}
125+
126+
## See Also
127+
128+
* [Custom DataSource for {{ site.framework }} (https://docs.telerik.com/{{ site.platform }}/html-helpers/datasource/custom-datasource)
129+
* [Server-Side API](/api/grid)
130+
* [Custom DataSource in Grid for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/grid/custom-datasource)
131+
{% endif %}

‎docs-aspnet/html-helpers/data-management/listview/binding/custom-datasource.md‎

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
---
2+
title: ListView Custom DataSource
3+
page_title: Custom DataSource of the ListView Component
4+
description: "Get started with Telerik UI for ASP.NET MVC and use the CustomDataSource builder for the ListView component."
5+
slug: listview_customdatasource_aspnetmvc
6+
position: 4
7+
---
8+
9+
# Custom DataSource
10+
11+
Telerik UI for ASP.NET MVC enables you to use the CustomDataSource builder that is available to helpers that support Data Binding.
12+
13+
The CustomDataSource builder class allows full control over the [DataSource client-side API options](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource), through Razor syntax. The CustomDataSource builder facilitates the usage of the Telerik UI helpers&mdash;for example, the helpers generate validation attributes, editors, and so on, while they utilize the flexibility of JavaScript. The CustomDataSource builder can also be used in more advanced scenarios where the regular DataSource builders prevent you from fully customizing the options of the DataSource.
14+
15+
## DataSource and Custom DataSource
16+
17+
The regular DataSource builders have many settings that are configured by default. The CustomDataSource builder removes these predefined settings, so when you declare a DataSource as custom, configure these additional settings.
18+
19+
The following two examples demonstrate a regular ListView AjaxDataSourceBuilder and a CustomDataSource builder.
20+
21+
```HtmlHelper
22+
@(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.ProductViewModel>()
23+
.Name("listView")
24+
.TagName("div")
25+
.ClientTemplateId("template")
26+
.DataSource(dataSource => dataSource
27+
.Ajax()
28+
.Read(read => read.Action("Products_Read", "ListView"))
29+
.PageSize(21)
30+
)
31+
.Pageable()
32+
)
33+
```
34+
{% if site.core %}
35+
```TagHelper
36+
@addTagHelper *, Kendo.Mvc
37+
38+
<kendo-listview name="listView"
39+
tag-name="div"
40+
template-id="template">
41+
<datasource type="DataSourceTagHelperType.Ajax" page-size="21">
42+
<transport>
43+
<read url="@Url.Action("Products_Read", "ListView")" />
44+
</transport>
45+
</datasource>
46+
<pageable enabled="true" />
47+
</kendo-listview>
48+
```
49+
{% endif %}
50+
51+
The following example demonstrates a CustomDataSourceBuilder definition.
52+
53+
```HtmlHelper
54+
@(Html.Kendo().ListView<Kendo.Mvc.Examples.Models.ProductViewModel>()
55+
.Name("listView")
56+
.TagName("div")
57+
.ClientTemplateId("template")
58+
.DataSource(dataSource => dataSource
59+
.Custom()
60+
.Schema(schema => schema
61+
.Model(model => model.Id("ProductID")))
62+
.PageSize(4)
63+
.Transport(transport => transport
64+
.Read(read => read.Action("Products_Read", "ListView"))
65+
)
66+
)
67+
.Pageable()
68+
)
69+
```
70+
{% if site.core %}
71+
```TagHelper
72+
@addTagHelper *, Kendo.Mvc
73+
74+
<kendo-listview name="listView"
75+
tag-name="div"
76+
template-id="template">
77+
<datasource type="DataSourceTagHelperType.Custom" page-size="4">
78+
<transport>
79+
<read url="@Url.Action("Products_Read", "ListView")" />
80+
</transport>
81+
<schema>
82+
<model id="ProductID">
83+
<fields>
84+
<field name="ProductName"></field>
85+
<field name="UnitPrice"></field>
86+
<field name="UnitsInStock"></field>
87+
<field name="Discontinued"></field>
88+
</fields>
89+
</model>
90+
</schema>
91+
</datasource>
92+
<pageable enabled="true" />
93+
</kendo-listview>
94+
```
95+
{% endif %}
96+
97+
## See Also
98+
99+
* [Custom DataSource for {{ site.framework }} (https://docs.telerik.com/{{ site.platform }}/html-helpers/datasource/custom-datasource)
100+
* [Server-Side API](/api/listview)
101+
* [Custom DataSource in ListView for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/listview/custom-datasource)
102+
{% endif %}

‎docs-aspnet/html-helpers/interactivity/progressbar/chunk.md‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: Chunk
3+
page_title: Chunk
4+
description: "Learn how to set the state of the Telerik UI ProgressBar component for {{ site.framework }} in chunks or partitions."
5+
slug: progressbar_chunk
6+
position: 5
7+
---
8+
9+
# Chunk
10+
11+
The ProgressBar component allows you to present the state of the progress in equally defined partitions:
12+
13+
![Chunk in Telerik UI for {{ site.framework }} ProgressBar](images/progressbar-chunk.png)
14+
15+
This is enabled with the `Type` enumeration property and the `ChunkCount` setting:
16+
17+
```HtmlHelper
18+
@using Kendo.Mvc.UI
19+
20+
@(Html.Kendo().ProgressBar()
21+
.Name("profileCompleteness")
22+
.Type(ProgressBarType.Chunk)
23+
.ChunkCount(5)
24+
.Min(0)
25+
.Max(5)
26+
.Value(2)
27+
)
28+
```
29+
{% if site.core %}
30+
```TagHelper
31+
@addTagHelper *, Kendo.Mvc
32+
33+
<kendo-progressbar chunk-count="5" enable="true" max="5" min="0" reverse="false" show-status="true" type="ProgressBarType.Chunk" name="profileCompleteness" value="2">
34+
</kendo-progressbar>
35+
```
36+
{% endif %}
37+
38+
The calculation of the completeness % percents can happen with the `.value()` API method and javascript logic depending on the total count of inputs in the form. Here is an example:
39+
```JavaScript
40+
$(".forms input").change(function () {
41+
var completeness = 5;
42+
$(".forms input").each(function () {
43+
if (this.value == "") {
44+
completeness--;
45+
}
46+
});
47+
48+
pb.value(completeness);
49+
$("#completed").text((completeness * 20) + "%");
50+
});
51+
```
52+
53+
## See Also
54+
55+
* [Chunk ProgressBar for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/progressbar/chunk)
56+
* [Server-Side API of the ProgressBar](/api/progressbar)
57+
* [Client-Side API of the ProgressBar](https://docs.telerik.com/kendo-ui/api/javascript/ui/progressbar)

‎docs-aspnet/html-helpers/interactivity/progressbar/images/progressbar-chunk.png‎

8.96 KB
Loading

‎docs-aspnet/html-helpers/interactivity/progressbar/images/progressbar-orientation.png‎

31.3 KB
Loading

‎docs-aspnet/html-helpers/interactivity/progressbar/labels.md‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
title: Labels
3+
page_title: Labels
4+
description: "Learn how to set the Labels of the Telerik UI ProgressBar component for {{ site.framework }}."
5+
slug: progressbar_labels
6+
position: 3
7+
---
8+
9+
# Labels
10+
11+
Labels and text description overall is beneficial for the users to better grasp the application functionality.
12+
13+
You can display informative labels for the ProgressBar using one of these options:
14+
15+
1. Regular label element:
16+
```HtmlHelper
17+
@using Kendo.Mvc.UI
18+
19+
<label>Password strength</label>
20+
@(Html.Kendo().ProgressBar()
21+
.Name("passStrength")
22+
.Type(ProgressBarType.Value)
23+
.Max(9)
24+
.Animation(false)
25+
)
26+
```
27+
{% if site.core %}
28+
```TagHelper
29+
@addTagHelper *, Kendo.Mvc
30+
31+
<label>Password strength</label>
32+
<kendo-progressbar enable="true" max="9" reverse="false" show- status="true" type="ProgressBarType.Value" name="passStrength">
33+
</kendo-progressbar>
34+
```
35+
{% endif %}
36+
37+
2. Using the dedicated Label property:
38+
```HtmlHelper
39+
@using Kendo.Mvc.UI
40+
41+
@(Html.Kendo().ProgressBar()
42+
.Name("passStrength")
43+
.Type(ProgressBarType.Value)
44+
.Max(9)
45+
.Animation(false)
46+
.Label("Password Strength")
47+
)
48+
```
49+
{% if site.core %}
50+
```TagHelper
51+
@addTagHelper *, Kendo.Mvc
52+
53+
<kendo-progressbar enable="true" max="9" reverse="false" show- status="true" type="ProgressBarType.Value" name="passStrength"
54+
label="Password Strength">
55+
</kendo-progressbar>
56+
```
57+
{% endif %}
58+
59+
3. Explicitly setting the name of an external label element:
60+
```HtmlHelper
61+
@using Kendo.Mvc.UI
62+
63+
<label id="progressBarLabel">Password strength</label>
64+
@(Html.Kendo().ProgressBar()
65+
.Name("passStrength")
66+
.Type(ProgressBarType.Value)
67+
.Max(9)
68+
.Animation(false)
69+
.LabelId("progressBarLabel")
70+
)
71+
```
72+
{% if site.core %}
73+
```TagHelper
74+
@addTagHelper *, Kendo.Mvc
75+
76+
<label id="progressBarLabel">Password strength</label>
77+
<kendo-progressbar enable="true" max="9" reverse="false" show- status="true" type="ProgressBarType.Value" name="passStrength"
78+
label-id="progressBarLabel">
79+
</kendo-progressbar>
80+
```
81+
{% endif %}
82+
83+
## See Also
84+
85+
* [Custom Label of the ProgressBar for {{ site.framework }} (Demo)](https://demos.telerik.com/{{ site.platform }}/progressbar/customlabel)
86+
* [Server-Side API of the ProgressBar](/api/progressbar)
87+
* [Client-Side API of the ProgressBar](https://docs.telerik.com/kendo-ui/api/javascript/ui/progressbar)

0 commit comments

Comments
 (0)