Angular Data Grid Responsive Design
The Grid supports responsive web-design by adapting 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.
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.
|The columns are visible when|
|The viewport width is 500px or more.|
|The viewport width is 300px or less.|
|The viewport width is between 500px and 1,200px.|
|The viewport width is more than 320px and the device is in a landscape orientation.|
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>
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%.