diff --git a/components/grid/overview.md b/components/grid/overview.md index b3bb561c5e..b4ffc4cf51 100644 --- a/components/grid/overview.md +++ b/components/grid/overview.md @@ -162,7 +162,7 @@ The following table lists Grid parameters, which are not discussed elsewhere in | Parameter | Type and Default Value | Description | | --- | --- | --- | | `Class` | `string` | Additional CSS class for the `
` 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%}). | -| `Height` | `string` | A height style in [any supported CSS unit]({%slug common-features/dimensions%}). | +| `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%}). | | `Navigable` | `bool` | Enables [keyboard navigation]({%slug accessibility-keyboard-navigation%}). | | `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. | diff --git a/knowledge-base/grid-adjust-height-with-browser.md b/knowledge-base/grid-adjust-height-with-browser.md index adfae925c0..7e7ba9e47b 100644 --- a/knowledge-base/grid-adjust-height-with-browser.md +++ b/knowledge-base/grid-adjust-height-with-browser.md @@ -1,11 +1,12 @@ --- -title: Adjust height of the Grid to match with the browser -description: How to adjust the height of the Grid to match with the browser. +title: Adjust Grid Height to Match the Browser Viewport Height +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). type: how-to -page_title: Adjust Grid height with browser +page_title: How to Adjust the Grid Height to Fill the Browser Window Size slug: grid-kb-adjust-height-with-browser -position: -tags: +position: +tags: telerik, blazor, grid, css, styles, height +ticketid: 1672046, 1656595, 1643200, 1605768, 1608504, 1549435 res_type: kb --- @@ -15,17 +16,238 @@ res_type: kb Product - Grid for Blazor + + FileManager for Blazor,
+ Grid for Blazor,
+ Scheduler for Blazor,
+ Splitter for Blazor,
+ Spreadsheet for Blazor,
+ TreeList for Blazor + - ## Description -How to change page size according to the available height? How to hide columns based on screen size? +This KB article answers the following questions: +* How to autosize the Telerik Blazor Grid to match the browser window height? +* How to change Grid page size, according to the available height? How make the Grid `PageSize` dynamic based on screen size? +* How to configure a resizeable Grid? +* How to use several Grids that expand and fill the height of the browser? +* How to set the `TelerikGrid` `Height` relative to the browser viewport size? +* 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. +* How to expand the Grid to the maximum available height during browser resizing? +* How to adjust the Grid `Height` to the remaining space? ## Solution -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). \ No newline at end of file +The Grid will obey its `Height` parameter value in the same way as a regular HTML `
`. The component can apply any [valid CSS dimension unit]({%slug common-features/dimensions%}). If the app layout and CSS styles can make a plain `
` resize with the browser viewport or the parent element, then the Grid can behave in the same way too. + +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). + +* [Use percent](#use-percent) +* [Use viewport units](#use-css-viewport-units) +* [Use CSS `calc()`](#use-css-calc) +* [Use Telerik layout components](#use-telerik-layout-components) +* [Use minimum or maximum height](#apply-minimum-or-maximum-height) +* [Set `PageSize` depending on the Grig height]() + +> 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. + +## Use Percent + +Use percentage heights to define dimensions as a portion of the parent element. + +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 `` element is reached. + +>caption Set Grid Height in percent + +````CSHTML + + +
+
+ + + + + +
+
+ +@code { + private IEnumerable GridData { get; set; } = + Enumerable.Range(1, 200).Select(x => new SampleModel() { Id = x, Name = $"Name {x}" }); + + public class SampleModel + { + public int Id { get; set; } + public string Name { get; set; } = string.Empty; + } +} +```` + +## Use CSS Viewport Units + +Use viewport units to set dimensions as a portion of the browser viewport. + +>caption Set Grid Height in viewport units (vh, dvh, and others) + +````CSHTML + + + + + + +@code { + private IEnumerable GridData { get; set; } = + Enumerable.Range(1, 200).Select(x => new SampleModel() { Id = x, Name = $"Name {x}" }); + + public class SampleModel + { + public int Id { get; set; } + public string Name { get; set; } = string.Empty; + } +} +```` + +## Use CSS calc() + +Use calc() 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. + +>caption Set Grid Height using calc() + +````CSHTML +
Header
+ + + + + + + +
Footer
+ + + +@code { + private IEnumerable GridData { get; set; } = + Enumerable.Range(1, 200).Select(x => new SampleModel() { Id = x, Name = $"Name {x}" }); + + public class SampleModel + { + public int Id { get; set; } + public string Name { get; set; } = string.Empty; + } +} +```` + +## Use Telerik Layout Components + +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. + +>caption Set Grid Height to 100% of resizable container + +````CSHTML + + + +
Header
+ + + + + + + + + +
Footer
+ + + + +@code { + private IEnumerable GridData { get; set; } = + Enumerable.Range(1, 200).Select(x => new SampleModel() { Id = x, Name = $"Name {x}" }); + + public class SampleModel + { + public int Id { get; set; } + public string Name { get; set; } = string.Empty; + } +} +```` + +## Apply Minimum or Maximum Height + +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. + +>caption Limit a dynamic Grid Height to minimum and maximum values + +````CSHTML + + + + + + + + +@code { + private IEnumerable GridData { get; set; } = + Enumerable.Range(1, 200).Select(x => new SampleModel() { Id = x, Name = $"Name {x}" }); + + public class SampleModel + { + public int Id { get; set; } + public string Name { get; set; } = string.Empty; + } +} +```` + +## Set Grid PageSize Depending on the Height + +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). + +## See Also + +* [Using Dimensions in Telerik Blazor Components]({%slug common-features/dimensions%})