Skip to content

Commit c6274f4

Browse files
dimodidimodi
authored
kb(grid): Add KB for Expanding Grid (#2592)
1 parent 25a84df commit c6274f4

File tree

2 files changed

+232
-10
lines changed

2 files changed

+232
-10
lines changed

‎components/grid/overview.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ The following table lists Grid parameters, which are not discussed elsewhere in
162162
| Parameter | Type and Default Value | Description |
163163
| --- | --- | --- |
164164
| `Class` | `string` | Additional CSS class for the `<div class="k-grid">` element. Use it to apply custom styles or [override the theme]({%slug themes-override%}). For example, [change the Grid font size]({%slug grid-kb-change-font-size%}). |
165-
| `Height` | `string` | A height style in [any supported CSS unit]({%slug common-features/dimensions%}). |
165+
| `Height` | `string` | A height style in [any supported CSS unit]({%slug common-features/dimensions%}). You can also [make the Grid height change automatically with the browser window]({%slug grid-kb-adjust-height-with-browser%}). |
166166
| `Navigable` | `bool` | Enables [keyboard navigation]({%slug accessibility-keyboard-navigation%}). |
167167
| `Width` | `string` | A width style in [any supported CSS unit]({%slug common-features/dimensions%}). The Grid has no default width, but expands horizontally to fill its container. |
168168

‎knowledge-base/grid-adjust-height-with-browser.md‎

Lines changed: 231 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
---
2-
title: Adjust height of the Grid to match with the browser
3-
description: How to adjust the height of the Grid to match with the browser.
2+
title: Adjust Grid Height to Match the Browser Viewport Height
3+
description: Learn different ways to adjust the height of the Telerik Grid for Blazor, so that the component expands and its height takes up all the available free space, depending on the container and the browser window (viewport size).
44
type: how-to
5-
page_title: Adjust Grid height with browser
5+
page_title: How to Adjust the Grid Height to Fill the Browser Window Size
66
slug: grid-kb-adjust-height-with-browser
7-
position:
8-
tags:
7+
position:
8+
tags: telerik, blazor, grid, css, styles, height
9+
ticketid: 1672046, 1656595, 1643200, 1605768, 1608504, 1549435
910
res_type: kb
1011
---
1112

@@ -15,17 +16,238 @@ res_type: kb
1516
<tbody>
1617
<tr>
1718
<td>Product</td>
18-
<td>Grid for Blazor</td>
19+
<td>
20+
FileManager for Blazor, <br />
21+
Grid for Blazor, <br />
22+
Scheduler for Blazor, <br />
23+
Splitter for Blazor, <br />
24+
Spreadsheet for Blazor, <br />
25+
TreeList for Blazor
26+
</td>
1927
</tr>
2028
</tbody>
2129
</table>
2230

23-
2431
## Description
2532

26-
How to change page size according to the available height? How to hide columns based on screen size?
33+
This KB article answers the following questions:
2734

35+
* How to autosize the Telerik Blazor Grid to match the browser window height?
36+
* How to change Grid page size, according to the available height? How make the Grid `PageSize` dynamic based on screen size?
37+
* How to configure a resizeable Grid?
38+
* How to use several Grids that expand and fill the height of the browser?
39+
* How to set the `TelerikGrid` `Height` relative to the browser viewport size?
40+
* How to make the Grid height adjust by itself when user resizes the browser? The user should not get a scroll bar of the browser.
41+
* How to expand the Grid to the maximum available height during browser resizing?
42+
* How to adjust the Grid `Height` to the remaining space?
2843

2944
## Solution
3045

31-
An example is available in the following project: [https://github.com/telerik/blazor-ui/tree/master/grid/adjust-height-with-browser](https://github.com/telerik/blazor-ui/tree/master/grid/adjust-height-with-browser).
46+
The Grid will obey its `Height` parameter value in the same way as a regular HTML `<div>`. The component can apply any [valid CSS dimension unit]({%slug common-features/dimensions%}). If the app layout and CSS styles can make a plain `<div>` resize with the browser viewport or the parent element, then the Grid can behave in the same way too.
47+
48+
The following sections demonstrate different ways to make a Grid resize vertically, depending on the available space. The information and samples are applicable to [other Telerik components for Blazor](#environment).
49+
50+
* [Use percent](#use-percent)
51+
* [Use viewport units](#use-css-viewport-units)
52+
* [Use CSS `calc()`](#use-css-calc)
53+
* [Use Telerik layout components](#use-telerik-layout-components)
54+
* [Use minimum or maximum height](#apply-minimum-or-maximum-height)
55+
* [Set `PageSize` depending on the Grig height]()
56+
57+
> If the [Grid is using virtual columns]({%slug grid-columns-virtual%}), then its `Height` must be set in pixels and the techniques in this article are not applicable.
58+
59+
## Use Percent
60+
61+
Use percentage heights to define dimensions as a portion of the parent element.
62+
63+
When setting a `height` in percent, keep in mind the following rule: an element with a percentage `height` requires its parent to have an explicit height. The rule applies recursively until a fixed height is reached, or until the `<html>` element is reached.
64+
65+
>caption Set Grid Height in percent
66+
67+
````CSHTML
68+
<style>
69+
html, body {
70+
height: 100%;
71+
margin: 0;
72+
}
73+
</style>
74+
75+
<div style="height:100%">
76+
<div style="height:100%">
77+
<TelerikGrid Data="@GridData"
78+
Pageable="true"
79+
PageSize="50"
80+
Height="100%">
81+
<GridColumns>
82+
<GridColumn Field="@nameof(SampleModel.Name)" />
83+
</GridColumns>
84+
</TelerikGrid>
85+
</div>
86+
</div>
87+
88+
@code {
89+
private IEnumerable<SampleModel> GridData { get; set; } =
90+
Enumerable.Range(1, 200).Select(x => new SampleModel() { Id = x, Name = $"Name {x}" });
91+
92+
public class SampleModel
93+
{
94+
public int Id { get; set; }
95+
public string Name { get; set; } = string.Empty;
96+
}
97+
}
98+
````
99+
100+
## Use CSS Viewport Units
101+
102+
Use <a href="https://web.dev/blog/viewport-units" target="_blank">viewport units</a> to set dimensions as a portion of the browser viewport.
103+
104+
>caption Set Grid Height in viewport units (vh, dvh, and others)
105+
106+
````CSHTML
107+
<TelerikGrid Data="@GridData"
108+
Pageable="true"
109+
PageSize="50"
110+
Height="100dvh">
111+
<GridColumns>
112+
<GridColumn Field="@nameof(SampleModel.Name)" />
113+
</GridColumns>
114+
</TelerikGrid>
115+
116+
@code {
117+
private IEnumerable<SampleModel> GridData { get; set; } =
118+
Enumerable.Range(1, 200).Select(x => new SampleModel() { Id = x, Name = $"Name {x}" });
119+
120+
public class SampleModel
121+
{
122+
public int Id { get; set; }
123+
public string Name { get; set; } = string.Empty;
124+
}
125+
}
126+
````
127+
128+
## Use CSS calc()
129+
130+
Use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/calc" target="_blank"><code>calc()</code></a> to set dimensions as a calculation that depends on multiple known sizes. For example, `calc()` is suitable when a Telerik component must occupy the full viewport height minus a known fixed height of a header or footer.
131+
132+
>caption Set Grid Height using calc()
133+
134+
````CSHTML
135+
<div style="height:50px;background:#ccc;text-align:center;">Header</div>
136+
137+
<TelerikGrid Data="@GridData"
138+
Pageable="true"
139+
PageSize="50"
140+
Height="calc(100vh - 150px)">
141+
<GridColumns>
142+
<GridColumn Field="@nameof(SampleModel.Name)" />
143+
</GridColumns>
144+
</TelerikGrid>
145+
146+
<div style="height:100px;background:#ccc;text-align:center;">Footer</div>
147+
148+
<style>
149+
html, body {
150+
height: 100%;
151+
}
152+
</style>
153+
154+
@code {
155+
private IEnumerable<SampleModel> GridData { get; set; } =
156+
Enumerable.Range(1, 200).Select(x => new SampleModel() { Id = x, Name = $"Name {x}" });
157+
158+
public class SampleModel
159+
{
160+
public int Id { get; set; }
161+
public string Name { get; set; } = string.Empty;
162+
}
163+
}
164+
````
165+
166+
## Use Telerik Layout Components
167+
168+
Using Telerik layout components can spare the need to use custom CSS and make a 100% high nested component occupy the available space in its parent container.
169+
170+
>caption Set Grid Height to 100% of resizable container
171+
172+
````CSHTML
173+
<TelerikSplitter Height="100vh"
174+
Orientation="@SplitterOrientation.Vertical">
175+
<SplitterPanes>
176+
<SplitterPane Collapsible="false"
177+
Resizable="false"
178+
Size="50px">
179+
<div style="height:100%;background:#ccc;text-align:center;">Header</div>
180+
</SplitterPane>
181+
<SplitterPane>
182+
<TelerikGrid Data="@GridData"
183+
Pageable="true"
184+
PageSize="50"
185+
Height="100%">
186+
<GridColumns>
187+
<GridColumn Field="@nameof(SampleModel.Name)" />
188+
</GridColumns>
189+
</TelerikGrid>
190+
</SplitterPane>
191+
<SplitterPane Collapsible="false"
192+
Resizable="false"
193+
Size="100px">
194+
<div style="height:100%;background:#ccc;text-align:center;">Footer</div>
195+
</SplitterPane>
196+
</SplitterPanes>
197+
</TelerikSplitter>
198+
199+
@code {
200+
private IEnumerable<SampleModel> GridData { get; set; } =
201+
Enumerable.Range(1, 200).Select(x => new SampleModel() { Id = x, Name = $"Name {x}" });
202+
203+
public class SampleModel
204+
{
205+
public int Id { get; set; }
206+
public string Name { get; set; } = string.Empty;
207+
}
208+
}
209+
````
210+
211+
## Apply Minimum or Maximum Height
212+
213+
You can make the Grid resize automatically, but at the same time, limit how much the component can shrink or expand with some fixed dimensions. Set the Grid `Class` parameter and use `min-height` or `max-height` styles with a custom CSS class.
214+
215+
>caption Limit a dynamic Grid Height to minimum and maximum values
216+
217+
````CSHTML
218+
<style>
219+
.responsive-grid-with-limits {
220+
min-height: 300px;
221+
max-height: 700px;
222+
}
223+
</style>
224+
225+
<TelerikGrid Data="@GridData"
226+
Pageable="true"
227+
PageSize="50"
228+
Height="100vh"
229+
Class="responsive-grid-with-limits">
230+
<GridColumns>
231+
<GridColumn Field="@nameof(SampleModel.Name)" />
232+
</GridColumns>
233+
</TelerikGrid>
234+
235+
@code {
236+
private IEnumerable<SampleModel> GridData { get; set; } =
237+
Enumerable.Range(1, 200).Select(x => new SampleModel() { Id = x, Name = $"Name {x}" });
238+
239+
public class SampleModel
240+
{
241+
public int Id { get; set; }
242+
public string Name { get; set; } = string.Empty;
243+
}
244+
}
245+
````
246+
247+
## Set Grid PageSize Depending on the Height
248+
249+
You can change the Grid `PageSize` at runtime, so that it is consistent with the Grid height and the available space. Review the complete sample app in GitHub: [https://github.com/telerik/blazor-ui/tree/master/grid/adjust-height-with-browser](https://github.com/telerik/blazor-ui/tree/master/grid/adjust-height-with-browser).
250+
251+
## See Also
252+
253+
* [Using Dimensions in Telerik Blazor Components]({%slug common-features/dimensions%})

0 commit comments

Comments
 (0)