Skip to content

Commit dd7d688

Browse files
kendo-botkendo-bot
committed
Sync with Kendo UI Professional
1 parent eca9661 commit dd7d688

27 files changed

+362
-263
lines changed

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

Lines changed: 117 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -13,102 +13,144 @@ The Grid provides options for visualizing the relations between parent and child
1313
* To implement hierarchy in the Grid HtmlHelper, use the `ClientDetailTemplateId()` method and filter the records in the child table based on the parent key field value. For a runnable example, refer to the [demo on using hierarchy in the Grid](https://demos.telerik.com/{{ site.platform }}/grid/hierarchy).
1414

1515
{% if site.core %}
16-
* To implement hierarchy in the Grid TagHelper, use the `DetailInit` function that initializes the detail Grids by using the [Kendo UI Grid for jQuery](https://docs.telerik.com/kendo-ui/controls/grid/overview).
16+
* To implement hierarchy in the Grid TagHelper, use the `detail-template-id` attribute that accepts the `id` of the external Kendo UI template that initializes the detail Grid.
1717
{% endif %}
1818

1919
```HtmlHelper
20-
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
21-
.Name("grid")
20+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
21+
.Name("grid")
22+
.Columns(columns =>
23+
{
24+
columns.Bound(e => e.FirstName).Width(130);
25+
columns.Bound(e => e.LastName).Width(130);
26+
columns.Bound(e => e.Country).Width(130);
27+
columns.Bound(e => e.City).Width(110);
28+
columns.Bound(e => e.Title);
29+
30+
})
31+
.Sortable()
32+
.Pageable()
33+
.Scrollable()
34+
.ClientDetailTemplateId("template")
35+
.HtmlAttributes(new { style = "height:600px;" })
36+
.DataSource(dataSource => dataSource
37+
.Ajax()
38+
.PageSize(6)
39+
.Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
40+
)
41+
)
42+
43+
<script id="template" type="text/kendo-tmpl">
44+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
45+
.Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context
2246
.Columns(columns =>
2347
{
24-
columns.Bound(e => e.FirstName).Width(130);
25-
columns.Bound(e => e.LastName).Width(130);
26-
columns.Bound(e => e.Country).Width(130);
27-
columns.Bound(e => e.City).Width(110);
28-
columns.Bound(e => e.Title);
29-
48+
columns.Bound(o => o.OrderID).Width(110);
49+
columns.Bound(o => o.ShipCountry).Width(150);
50+
columns.Bound(o => o.ShipAddress).Width(150);
51+
columns.Bound(o => o.ShipName).Width(300);
3052
})
31-
.Sortable()
32-
.Pageable()
33-
.Scrollable()
34-
.ClientDetailTemplateId("template")
35-
.HtmlAttributes(new { style = "height:600px;" })
3653
.DataSource(dataSource => dataSource
3754
.Ajax()
38-
.PageSize(6)
39-
.Read(read => read.Action("HierarchyBinding_Employees", "Grid"))
55+
.PageSize(10)
56+
.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
4057
)
58+
.Pageable()
59+
.Sortable()
60+
.ToClientTemplate()
4161
)
42-
43-
<script id="template" type="text/kendo-tmpl">
44-
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
45-
.Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context
46-
.Columns(columns =>
47-
{
48-
columns.Bound(o => o.OrderID).Width(110);
49-
columns.Bound(o => o.ShipCountry).Width(150);
50-
columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
51-
columns.Bound(o => o.ShipName).Width(300);
52-
})
53-
.DataSource(dataSource => dataSource
54-
.Ajax()
55-
.PageSize(10)
56-
.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
57-
)
58-
.Pageable()
59-
.Sortable()
60-
.ToClientTemplate()
61-
)
62-
</script>
62+
</script>
6363
```
6464
{% if site.core %}
6565
```TagHelper
66-
<kendo-grid name="grid" height="550" selectable="true" on-detail-init="onDetailInit">
67-
<datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
68-
<transport>
69-
<read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees" />
66+
@{
67+
var url = @Url.Action("HierarchyBinding_Orders","Grid");
68+
}
69+
70+
<kendo-grid name="grid" height="550" selectable="true" detail-template-id="template">
71+
<datasource type="DataSourceTagHelperType.Custom" custom-type="odata" page-size="20">
72+
<transport>
73+
<read url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees" />
74+
</transport>
75+
</datasource>
76+
<sortable enabled="true" />
77+
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }" />
78+
<filterable enabled="true" />
79+
<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" />
84+
</columns>
85+
</kendo-grid>
86+
87+
<script id="template" type="text/kendo-tmpl">
88+
<kendo-grid name="grid_#=EmployeeID#" is-in-client-template="true">
89+
<datasource type="DataSourceTagHelperType.Ajax" page-size="10">
90+
<transport data="Data" total="Total" errors="Errors">
91+
<read url="@Html.Raw(url + "?employeeID=#=EmployeeID#")" />
7092
</transport>
7193
</datasource>
94+
<pageable enabled="true" />
7295
<sortable enabled="true" />
73-
<pageable button-count="5" refresh="true" page-sizes="new int[] { 5, 10, 20 }">
74-
</pageable>
75-
76-
<filterable enabled="true" />
7796
<columns>
78-
<column field="FirstName" title="First Name" width="240" />
79-
<column field="LastName" title="Last Name" />
80-
<column field="Country" title="Country" width="150" />
81-
<column field="City" title="City" width="150" />
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" />
82101
</columns>
83102
</kendo-grid>
103+
</script>
104+
```
105+
{% endif %}
84106

107+
If the detail Grid contains [client templates]({% slug client_templates_overview%}), any `#` characters that are part of binding expressions in these templates must be escaped. As a result, the Kendo UI template that holds the detail Grid will ignore the `#` characters, while the inner template will handle it correctly. For more information on how to escape `#` characters in nested templates, refer to the [Kendo UI Template documentation](https://www.telerik.com/kendo-jquery-ui/documentation/framework/templates/essentials).
85108

86-
<script>
87-
function onDetailInit(e) {
88-
$("<div/>").appendTo(e.detailCell).kendoGrid({
89-
dataSource: {
90-
type: "odata",
91-
transport: {
92-
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
93-
},
94-
serverPaging: true,
95-
serverSorting: true,
96-
serverFiltering: true,
97-
pageSize: 10,
98-
filter: { field: "EmployeeID", operator: "eq", value: e.data.EmployeeID }
99-
},
100-
scrollable: false,
101-
sortable: true,
102-
pageable: true,
103-
columns: [
104-
{ field: "OrderID", width: "110px" },
105-
{ field: "ShipCountry", title: "Ship Country", width: "110px" },
106-
{ field: "ShipAddress", title: "Ship Address" },
107-
{ field: "ShipName", title: "Ship Name", width: "300px" }
108-
]
109-
});
110-
}
111-
</script>
109+
```HtmlHelper
110+
<script id="template" type="text/kendo-tmpl">
111+
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
112+
.Name("grid_#=EmployeeID#") // template expression, to be evaluated in the master context
113+
.Columns(columns =>
114+
{
115+
columns.Bound(o => o.OrderID).Width(110);
116+
columns.Bound(o => o.ShipCountry).Width(150);
117+
columns.Bound(o => o.ShipAddress).ClientTemplate("\\#= ShipAddress \\#"); // escaped template expression, to be evaluated in the child/detail context
118+
columns.Bound(o => o.ShipName).Width(300);
119+
})
120+
.DataSource(dataSource => dataSource
121+
.Ajax()
122+
.PageSize(10)
123+
.Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
124+
)
125+
.Pageable()
126+
.Sortable()
127+
.ToClientTemplate()
128+
)
129+
</script>
130+
```
131+
{% if site.core %}
132+
```TagHelper
133+
@{
134+
var url = @Url.Action("HierarchyBinding_Orders","Grid");
135+
}
136+
137+
<script id="template" type="text/kendo-tmpl">
138+
<kendo-grid name="grid_#=EmployeeID#" is-in-client-template="true">
139+
<datasource type="DataSourceTagHelperType.Ajax" page-size="10">
140+
<transport>
141+
<read url="@Html.Raw(url + "?employeeID=#=EmployeeID#")" />
142+
</transport>
143+
</datasource>
144+
<pageable enabled="true" />
145+
<sortable enabled="true" />
146+
<columns>
147+
<column field="OrderID" width="110" />
148+
<column field="ShipCountry" title="Ship Country" width="150" />
149+
<column field="ShipAddress" title="Ship Address" template="\\#= ShipAddress \\#"/> // escaped template expression, to be evaluated in the child/detail context
150+
<column field="ShipName" title="Ship Name" width="300" />
151+
</columns>
152+
</kendo-grid>
153+
</script>
112154
```
113155
{% endif %}
114156

0 commit comments

Comments
 (0)