Skip to content

Commit 507c07c

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent 1b6b096 commit 507c07c

35 files changed

+574
-597
lines changed

‎docs-aspnet/html-helpers/data-management/filter/custom-editor.md‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,8 @@ The following example demonstrates how to create a custom editor using the [`.Ed
3737
dataTextField: "CategoryName",
3838
dataValueField: "CategoryID",
3939
dataSource: {
40-
type: "odata",
4140
transport: {
42-
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Categories"
41+
read: "https://demos.telerik.com/service/v2/core/Categories"
4342
}
4443
}
4544
});

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

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -65,12 +65,13 @@ You will also have to add this configuration in your Web.config file:
6565
## Binding the Grid
6666

6767
Once the Web service is up and running, you define the Grid's DataSource instance and can apply its settings to point to the RESTful API URL:
68-
```C#
68+
69+
```HtmlHelper
6970
.DataSource(dataSource => dataSource
7071
.Custom()
71-
.Type("odata")
72+
.Type("odata-v4")
7273
.Transport(transport =>
73-
transport.Read(read => read.Url("https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"))
74+
transport.Read(read => read.Url("https://demos.telerik.com/service/v2/odata/Orders"))
7475
)
7576
.PageSize(20)
7677
.ServerPaging(true)
@@ -79,13 +80,13 @@ Once the Web service is up and running, you define the Grid's DataSource instanc
7980
)
8081
```
8182
{% if site.core %}
82-
```HTML
83-
<datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20"
83+
```TagHelper
84+
<datasource type="DataSourceTagHelperType.Custom" custom-type="odata-v4" page-size="20"
8485
server-paging="true"
8586
server-sorting="true"
8687
server-filtering="true">
8788
<transport>
88-
<read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"/>
89+
<read url="https://demos.telerik.com/service/v2/odata/Orders"/>
8990
</transport>
9091
</datasource>
9192
```

‎docs-aspnet/html-helpers/data-management/grid/columns/multicolumn-headers.md‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -94,20 +94,22 @@ A full Grid with Multi-column headers would look like below
9494
```
9595
{% if site.core %}
9696
```TagHelper
97-
<kendo-grid name="grid" reorderable="true"resizable="true" height="550">
98-
<datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
97+
<kendo-grid name="grid" resizable="true" height="550">
98+
<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
99+
<schema data="Data" total="Total" errors="Errors">
100+
</schema>
99101
<transport>
100-
<read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" />
102+
<read url="@Url.Action("MultiColumn_Customers_Read", "Grid")"/>
101103
</transport>
102104
</datasource>
105+
<scrollable enabled="true"/>
103106
<groupable enabled="true" />
104107
<sortable enabled="true" />
105-
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
106-
</pageable>
107-
<filterable enabled="true" />
108+
<pageable enabled="true"/>
108109
<column-menu enabled="true"/>
110+
<reorderable enabled="true" columns="true"/>
109111
<columns>
110-
<column field="ContactName" title="Contact Name" width="240" />
112+
<column field="CompanyName" width="420" />
111113
<column title="Contact Info" >
112114
<columns>
113115
<column field="ContactTitle" title="Contact Title" width="200" />

‎docs-aspnet/html-helpers/data-management/grid/columns/templates.md‎

Lines changed: 35 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ The following example demonstrates how to specify your own custom layout for the
3434
.Ajax()
3535
.Read(read => read.Action("Customers_Read", "Grid"))
3636
)
37-
)
37+
)
3838
3939
<script>
4040
function template(data) {
@@ -44,51 +44,30 @@ The following example demonstrates how to specify your own custom layout for the
4444
`
4545
}
4646
</script>
47-
48-
<style type="text/css">
49-
.customer-photo {
50-
display: inline-block;
51-
width: 32px;
52-
height: 32px;
53-
border-radius: 50%;
54-
background-size: 32px 35px;
55-
background-position: center center;
56-
vertical-align: middle;
57-
line-height: 32px;
58-
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
59-
margin-left: 5px;
60-
}
61-
62-
.customer-name {
63-
display: inline-block;
64-
vertical-align: middle;
65-
line-height: 32px;
66-
padding-left: 3px;
67-
}
68-
</style>
6947
````
7048
{% if site.core %}
7149
```TagHelper
72-
<kendo-grid name="grid" height="550">
73-
<datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
50+
<kendo-grid name="grid" height="380">
51+
<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
52+
<schema data="Data" total="Total" errors="Errors">
53+
</schema>
7454
<transport>
75-
<read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" />
55+
<read url="@Url.Action("Customers_Read", "Grid")"/>
7656
</transport>
7757
</datasource>
58+
<scrollable enabled="true"/>
7859
<groupable enabled="true" />
7960
<sortable enabled="true" />
80-
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
61+
<pageable button-count="5" refresh="true" page-sizes-enabled="true">
8162
</pageable>
82-
<filterable enabled="true" />
8363
<columns>
84-
<column field="ContactName" template="#=template(data)#" title="Contact Name" width="240" />
85-
<column field="ContactTitle" title="Contact Title" />
64+
<column field="ContactName" template="#=template(data)#" title="Contact Name" width="140" />
65+
<column field="ContactTitle" title="Contact Title" width="190"/>
8666
<column field="CompanyName" title="Company Name" />
87-
<column field="Country" title="Country" width="150" />
67+
<column field="Country" title="Country" width="110" />
8868
</columns>
8969
</kendo-grid>
9070
91-
9271
<script>
9372
function template(data) {
9473
return `<div class='customer-photo'
@@ -97,27 +76,28 @@ The following example demonstrates how to specify your own custom layout for the
9776
`
9877
}
9978
</script>
79+
```
80+
{% endif %}
81+
```CSS Styles
82+
<style type="text/css">
83+
.customer-photo {
84+
display: inline-block;
85+
width: 32px;
86+
height: 32px;
87+
border-radius: 50%;
88+
background-size: 32px 35px;
89+
background-position: center center;
90+
vertical-align: middle;
91+
line-height: 32px;
92+
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
93+
margin-left: 5px;
94+
}
10095

101-
<style type="text/css">
102-
.customer-photo {
103-
display: inline-block;
104-
width: 32px;
105-
height: 32px;
106-
border-radius: 50%;
107-
background-size: 32px 35px;
108-
background-position: center center;
109-
vertical-align: middle;
110-
line-height: 32px;
111-
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
112-
margin-left: 5px;
113-
}
114-
115-
.customer-name {
116-
display: inline-block;
117-
vertical-align: middle;
118-
line-height: 32px;
119-
padding-left: 3px;
120-
}
121-
</style>
122-
````
123-
{% endif %}
96+
.customer-name {
97+
display: inline-block;
98+
vertical-align: middle;
99+
line-height: 32px;
100+
padding-left: 3px;
101+
}
102+
</style>
103+
```

‎docs-aspnet/html-helpers/data-management/grid/events.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,9 +50,9 @@ The example below demonstrates how to use the [`Change` event](/api/kendo.mvc.ui
5050
{% if site.core %}
5151
```TagHelper
5252
<kendo-grid name="grid" height="550" on-change="onChange" selectable="true">
53-
<datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
53+
<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
5454
<transport>
55-
<read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" />
55+
<read url="@Url.Action("Orders_Read","Grid")"/>
5656
</transport>
5757
</datasource>
5858
<groupable enabled="true" />

‎docs-aspnet/html-helpers/data-management/grid/hierarchy.md‎

Lines changed: 31 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -64,41 +64,50 @@ The Grid provides options for visualizing the relations between parent and child
6464
{% if site.core %}
6565
```TagHelper
6666
@{
67-
var url = @Url.Action("HierarchyBinding_Orders","Grid");
67+
var detailGridReadUrl = @Url.Action("HierarchyBinding_Orders","Grid");
6868
}
6969
70-
<kendo-grid name="grid" height="550" selectable="true" detail-template-id="template">
71-
<datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
70+
<kendo-grid name="grid" height="600" detail-template-id="template">
71+
<datasource type="DataSourceTagHelperType.Ajax" page-size="6">
72+
<schema data="Data" total="Total" errors="Errors">
73+
</schema>
7274
<transport>
73-
<read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees" />
75+
<read url="@Url.Action("HierarchyBinding_Employees","Grid")" />
7476
</transport>
7577
</datasource>
78+
<pageable enabled="true" />
7679
<sortable enabled="true" />
77-
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }" />
78-
<filterable enabled="true" />
80+
<scrollable enabled="true" />
7981
<columns>
80-
<column field="FirstName" title="First Name" width="240" />
81-
<column field="LastName" title="Last Name" />
82-
<column field="Country" title="Country" width="150" />
83-
<column field="City" title="City" width="150" />
82+
<column field="FirstName" title="First Name" width="130" />
83+
<column field="LastName" title="Last Name" width="130" />
84+
<column field="Country" title="Country" width="130" />
85+
<column field="City" title="City" width="110" />
86+
<column field="Title"></column>
8487
</columns>
8588
</kendo-grid>
8689
87-
<script id="template" type="text/kendo-tmpl">
90+
<script id="template" type="text/html">
8891
<kendo-grid name="grid_#=EmployeeID#" is-in-client-template="true">
92+
<columns>
93+
<column field="OrderID" width="110">
94+
</column>
95+
<column field="ShipCountry" width="150">
96+
</column>
97+
<column field="ShipAddress" width="150">
98+
</column>
99+
<column field="ShipName" width="300">
100+
</column>
101+
</columns>
89102
<datasource type="DataSourceTagHelperType.Ajax" page-size="10">
90-
<transport data="Data" total="Total" errors="Errors">
91-
<read url="@Html.Raw(url + "?employeeID=#=EmployeeID#")" />
103+
<schema data="Data" total="Total" errors="Errors">
104+
</schema>
105+
<transport>
106+
<read url="@Html.Raw(detailGridReadUrl+"?employeeID=#=EmployeeID#")" />
92107
</transport>
93108
</datasource>
94109
<pageable enabled="true" />
95110
<sortable enabled="true" />
96-
<columns>
97-
<column field="OrderID" width="110" />
98-
<column field="ShipCountry" title="Ship Country" width="150" />
99-
<column field="ShipAddress" title="Ship Address" width="150" />
100-
<column field="ShipName" title="Ship Name" width="300" />
101-
</columns>
102111
</kendo-grid>
103112
</script>
104113
```
@@ -131,14 +140,14 @@ If the detail Grid contains [client templates]({% slug client_templates_overview
131140
{% if site.core %}
132141
```TagHelper
133142
@{
134-
var url = @Url.Action("HierarchyBinding_Orders","Grid");
143+
var detailGridReadUrl = @Url.Action("HierarchyBinding_Orders","Grid");
135144
}
136145
137-
<script id="template" type="text/kendo-tmpl">
146+
<script id="template" type="text/html">
138147
<kendo-grid name="grid_#=EmployeeID#" is-in-client-template="true">
139148
<datasource type="DataSourceTagHelperType.Ajax" page-size="10">
140149
<transport>
141-
<read url="@Html.Raw(url + "?employeeID=#=EmployeeID#")" />
150+
<read url="@Html.Raw(detailGridReadUrl + "?employeeID=#=EmployeeID#")" />
142151
</transport>
143152
</datasource>
144153
<pageable enabled="true" />

‎docs-aspnet/html-helpers/data-management/grid/overview.md‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,9 @@ The following example demonstrates how to define the Grid.
6262
```Controller
6363
public class GridController : Controller
6464
{
65-
public ActionResult Customers_Read([DataSourceRequest] DataSourceRequest request)
65+
public JsonResult Customers_Read([DataSourceRequest] DataSourceRequest request)
6666
{
67-
var result = Enumerable.Range(0, 50).Select(i => new Customer
67+
var result = Enumerable.Range(1, 50).Select(i => new Customer
6868
{
6969
CompanyName = "Company Name " + i,
7070
ContactName = "Contact Name " + i,
@@ -107,41 +107,41 @@ The Grid configuration options are passed as attributes of the helper. The Grid
107107
columns.Bound(p => p.ShipName).Width(300);
108108
columns.Bound(p => p.ShipCity).Width(250);
109109
})
110+
.Scrollable()
110111
.Groupable()
111112
.Sortable()
112113
.Filterable()
113114
.Pageable(pageable => pageable
114115
.ButtonCount(5)
115116
.Refresh(true)
116117
.PageSizes(new[] { 5, 10, 20 }))
118+
.HtmlAttributes(new { style = "height: 550px;" })
117119
.DataSource(dataSource => dataSource
118-
.Custom()
119-
.Transport(transport => transport
120-
.Read(read => read.Action("Orders_Read", "Grid")))
121-
.Schema(schema => schema
122-
.Data("Data")
123-
.Model(model => {
124-
model.Field("OrderDate", typeof(DateTime));
125-
})
126-
)
120+
.Ajax()
121+
.PageSize(20)
122+
.Read(read => read.Action("Orders_Read", "Grid"))
127123
)
128124
)
129125
```
130126
{% if site.core %}
131127
```TagHelper
132128
<kendo-grid name="grid" height="550">
133-
<datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
129+
<datasource type="DataSourceTagHelperType.Ajax" page-size="20">
134130
<transport>
135-
<read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" />
131+
<read url="@Url.Action("Orders_Read","Grid")"/>
136132
</transport>
137133
<schema>
138-
<model>
134+
<model id="OrderID">
139135
<fields>
140-
<field name="OrderDate" type="Date"></field>
136+
<field name="OrderID" type="number"></field>
137+
<field name="OrderDate" type="date"></field>
138+
<field name="ShipName" type="string"></field>
139+
<field name="ShipCity" type="string"></field>
141140
</fields>
142141
</model>
143142
</schema>
144143
</datasource>
144+
<scrollable enabled="true"/>
145145
<groupable enabled="true" />
146146
<sortable enabled="true" />
147147
<filterable enabled="true" />

0 commit comments

Comments
 (0)