Angular Data Grid Responsive Design
The Grid offers a responsive web-design and adapts its layout based on the available screen size.
The responsive features of the Kendo UI Grid for Angular are:
- Responsive columns—Based on the viewport width, the visibility of the Grid columns toggles.
- Responsive height—Based on the height setting (for example,
"100%"), the Grid adjusts its size depending on the height of its container.
Columns
To control the visibility of the columns, use their media property. The property accepts valid strings for the matchMedia browser API and toggles the visibility of the columns based on the media queries.
media configuration | The columns are visible when |
|---|---|
"(min-width: 500px)" | The viewport width is 500px or more. |
"(max-width: 300px)" | The viewport width is 300px or less. |
"(min-width: 500px) and (max-width: 1200px)" | The viewport width is between 500px and 1,200px. |
"(max-width: 320px), (orientation: landscape)" | The viewport width is more than 320px and the device is in a landscape orientation. |
Bootstrap 5 Compatibility
The media property accepts the device identifiers which are available in Bootstrap 4 and which range from extra small (xs) to extra large (xl).
media configuration | Equivalent to |
|---|---|
"xs" | "(max-width: 576px)" |
"sm" | "(min-width: 576px)" |
"md" | "(min-width: 768px)" |
"lg" | "(min-width: 992px)" |
"xl" | "(min-width: 1200px)" |
Using the Bootstrap 4 identifiers is a less flexible approach than declaring the responsive breakpoints. However, the identifiers enable the Grid to match the Bootstrap grid system of the surrounding template.
<div class="col-xs-12 col-md-6">
<kendo-grid>
<kendo-grid-column media="xs">
<!-- template for xs devices -->
</kendo-grid-column>
<kendo-grid-column media="md">
<!-- template for md devices -->
</kendo-grid-column>
</kendo-grid>
</div>
<div class="col-xs-12 col-md-6">
<!-- second column -->
</div>Height
You can control the height of the Grid through the height CSS property. If the height is set in percentage units, the Grid adjusts its layout accordingly just like a regular HTML element. In CSS, setting the height of an element to percentage units requires that its parent element has its height defined. Because this rule is applied recursively, to make the Grid fill 100% of the browser window, all elements up to the document root <html> element must have a height of 100%.
