Column Media
The Kendo UI Grid provides the built-in functionality to condtionally make a column visible, based on the width of the Browser window.
- The hidden option takes precedence over
media.- The
mediaoption cannot be used with minScreenWidth at the same time.
Configuration
Set the media property of the column to a valid string.
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "id", width: 250, media: "(min-width: 576px)" },
{ field: "age", width: 250, media: "sm" },
{ field: "city", width: 250, media: "(max-width: 576px)" },
{ field: "name", width: 250 }
],
dataSource: [
{ id: 1, name: "Jane Doe", age: 31, city: "Boston" },
{ id: 2, name: "John Doe", age: 55, city: "New York" }
]
});
</script>
Accepted Values
The property accepts valid strings for the
matchMedia browser API(assuming it is supported by the browser) and toggles the visibility of the columns based on the media queries.The property accepts the device identifiers that are available in Bootstrap 4:
- xs is equivalent to "(max-width: 576px)"
- sm is equivalent to "(min-width: 576px)"
- md is equivalent to "(min-width: 768px)"
- lg is equivalent to "(min-width: 992px)"
- xl is equivalent to "(min-width: 1200px)"