Skip to content

Commit 3682d06

Browse files
marin-bratanovmarin-bratanov
committed
kb(grid): align hierarchical grid columns
1 parent 9d08ef4 commit 3682d06

File tree

2 files changed

+172
-0
lines changed

2 files changed

+172
-0
lines changed

‎knowledge-base/grid-align-columns-hierarchy.md‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
---
2+
title: Align Columns in Hierarchical Grid
3+
description: How to align columns in nested detail template of a hierarchical grid
4+
type: how-to
5+
page_title: Align Columns in Hierarchical Grid
6+
slug: grid-kb-align-columns-hierarchy
7+
position:
8+
tags:
9+
ticketid: 1468988
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>Grid for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
24+
## Description
25+
I want to showcase hierarchical data in the grid and to make the DetailTemplate columns match the main column headers.
26+
27+
## Solution
28+
While generally a task for a treelist type of component, you can show self-referencing data in a grid through its detail templates and if the field names match, you can even use the only the headers from the main grid.
29+
30+
To align the columns of nested grid detail templates, you need to:
31+
32+
* set a width to the grid that matches the width of its columns
33+
* set width to the columns of the nested grids that match the column widths of the main grid
34+
* the first column of each child grid must have width smaller than the first column of the main grid with the size of the hierarchy expand column times the levels of hierarchy that you have
35+
* add styles that remove the scrollbars from the grid to clean out the UI and reduce distortions that they can cause
36+
* optionally, hide the headers of the nested grids
37+
38+
>caption The result from the code snippet below
39+
40+
![Align Hierarchical Grid Columns](images/grid-align-hierarchical-columns.png)
41+
42+
43+
>caption Align the columns in hierarchical grids
44+
45+
````CSHTML
46+
@* Three levels of grids - note how the first columns of the nested grids have the width of the detail expand cell subtracted twice
47+
for the Default Theme, it is 2*32px but that can vary between themes and based on the font-size of the page.
48+
Also, the main grid has a width that matches closely the sum of the column widths and the horizontal scrollbars
49+
are hidden in order to produce cleaner UX *@
50+
51+
<style>
52+
/* remove the default padding from the detail template cell to facilitate column alignment */
53+
.no-detail-padding.k-grid .k-detail-cell {
54+
padding: 0;
55+
}
56+
57+
/* */
58+
.no-detail-padding.k-grid .k-detail-cell .k-header {
59+
display: none;
60+
}
61+
62+
/* hide horizontal scrollbars on the grids to produce cleaner UI for the user */
63+
.no-detail-padding.k-grid .k-grid-content {
64+
overflow-x: hidden;
65+
}
66+
67+
/* hide vertical scrollbars to simplify UI, also reduces the chance of mismatch between column headers */
68+
.no-detail-padding.k-grid > .k-grid-header {
69+
padding-right: 0 !important;
70+
}
71+
72+
.no-detail-padding.k-grid .k-grid-content {
73+
overflow-y: hidden;
74+
}
75+
</style>
76+
77+
<TelerikGrid Data="@MainLevelsData" Class="no-detail-padding" Width="820px" Pageable="true">
78+
<GridColumns>
79+
<GridColumn Field="Id" Width="200px"></GridColumn>
80+
<GridColumn Field="Field1" Width="300px"></GridColumn>
81+
<GridColumn Field="Field2" Width="300px"></GridColumn>
82+
</GridColumns>
83+
<DetailTemplate Context="firstLevelItem">
84+
@{
85+
var currGridData = GetLevelData(firstLevelItem.Id);
86+
<TelerikGrid Data="@currGridData" Pageable="true" PageSize="5">
87+
<GridColumns>
88+
<GridColumn Field="Id" Width="168px"></GridColumn>
89+
<GridColumn Field="Field1" Width="300px"></GridColumn>
90+
<GridColumn Field="Field2" Width="300px"></GridColumn>
91+
</GridColumns>
92+
<DetailTemplate Context="secondLevelItem">
93+
@{
94+
var currGridData = GetLevelData(secondLevelItem.Id);
95+
<TelerikGrid Data="@currGridData" Pageable="true" PageSize="5">
96+
<GridColumns>
97+
<GridColumn Field="Id" Width="168px"></GridColumn>
98+
<GridColumn Field="Field1" Width="300px"></GridColumn>
99+
<GridColumn Field="Field2" Width="300px"></GridColumn>
100+
</GridColumns>
101+
</TelerikGrid>
102+
}
103+
</DetailTemplate>
104+
</TelerikGrid>
105+
}
106+
</DetailTemplate>
107+
</TelerikGrid>
108+
109+
110+
@code {
111+
List<SelfReferencingHierarchyModel> MainLevelsData { get; set; }
112+
List<SelfReferencingHierarchyModel> AllData { get; set; }
113+
114+
public class SelfReferencingHierarchyModel
115+
{
116+
public int Id { get; set; }
117+
public int? ParentId { get; set; }
118+
public string Field1 { get; set; }
119+
public string Field2 { get; set; }
120+
}
121+
122+
protected override void OnInitialized()
123+
{
124+
AllData = new List<SelfReferencingHierarchyModel>();
125+
126+
//generate top level items
127+
for (int i = 0; i < 35; i++)
128+
{
129+
AllData.Add(new SelfReferencingHierarchyModel
130+
{
131+
Id = i,
132+
Field1 = $"main level {i}",
133+
Field2 = $"main level field 2 - {i}"
134+
});
135+
136+
for (int j = 0; j < 12; j++)
137+
{
138+
//generate first level items - note the Id and ParentId logic
139+
AllData.Add(new SelfReferencingHierarchyModel
140+
{
141+
Id = 100 + j,
142+
ParentId = i,
143+
Field1 = $"first level {j}",
144+
Field2 = $"first level field 2 - {j}"
145+
});
146+
147+
for (int k = 0; k < 12; k++)
148+
{
149+
//generate second level items - note the Id and ParentId logic
150+
AllData.Add(new SelfReferencingHierarchyModel
151+
{
152+
Id = 6000 * j + k, // does not really produce unique IDs here, but for this sample it does not matter
153+
ParentId = 100 + j,
154+
Field1 = $"second level {j}",
155+
Field2 = $"second level field 2 - {j}"
156+
});
157+
}
158+
}
159+
}
160+
161+
MainLevelsData = AllData.Where(itm => itm.ParentId == null).ToList();
162+
}
163+
164+
List<SelfReferencingHierarchyModel> GetLevelData(int parentId)
165+
{
166+
return AllData.Where(itm => itm.ParentId == parentId).ToList();
167+
}
168+
}
169+
````
170+
171+
172+

‎knowledge-base/images/grid-align-hierarchical-columns.png‎

40.1 KB
Loading

0 commit comments

Comments
 (0)