In this blog post entry, we look at the ShieldUI Grid hierarchical structure setup.
A standard hierarchy looks like this:
A standard hierarchy looks like this:
It
displays correlated sub-records on a lower lever in the grid, for each
corresponding row. This can be combined with paging on any level of the
hierarchy, to dramatically improve performance or reduce rendering size.
To implement a hierarchical grid structure you need to handle the detailCreated event and to initialize a new grid into the detail cell.
To implement a hierarchical grid structure you need to handle the detailCreated event and to initialize a new grid into the detail cell.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| $(document).ready(function () { $("#grid").shieldGrid({ dataSource: { data: gridData }, paging: { pageSize: 20 }, events: { detailCreated: detailCreated }, columns: [ { field: "id", width: "70px", title: "ID" }, { field: "name", title: "Person Name" }, { field: "age", title: "Age" }, { field: "company", width: "170px", title: "Company Name"}, { field: "balance", title: "Balance" }, ] }); });function detailCreated(e) { $("<div/>").appendTo(e.detailCell).shieldGrid({ dataSource: { data: e.item.friends }, sorting: { multiple: true }, paging: { pageSize: 5 }, columns: [ { field: "id", width: "100px", title: "Friend ID" }, { field: "name", title: "Friend Name" } ] });} |
To see this approach demonstrated in practice, please visit the following online example:Hierarchical grid
Няма коментари:
Публикуване на коментар