columns.media String

Sets the condition that needs to be satisfied for a column to remain visible. 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 hidden option takes precedence over media. This option cannot be used with minScreenWidth at the same time.

Also 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)"

Example - set media

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
      { field: "id", width: 250, media: "(min-width: 576px)" }, // column will become hidden if the media query is evaluated to false
      { field: "age", width: 250, media: "sm" }, // use a Bootstrap media (equivalent to `"(min-width: 576px)"`)
      { field: "city", width: 250, media: "(max-width: 576px) and (min-width: 300px)" }, // column will be visible when the width of the screen is less than 576px and more than 300px
      { field: "name", width: 250 } // column will always be visible
  ],
  dataSource: [
      { id: 1, name: "Jane Doe", age: 31, city: "Boston" },
      { id: 2, name: "John Doe", age: 55, city: "New York" }
  ]
});
</script>