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 columnsBased on the viewport width, the visibility of the Grid columns toggles.
  • Responsive heightBased 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 configurationThe 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.
Example
View Source
Edit In Stackblitz  
Change Theme:

Bootstrap 4 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 configurationEquivalent 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%.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?