Hello,
I am trying to get hideAtMedia working for my vue solution (4.1.2) trying to make the grid more responsive.
As stated in the dox, columns should be made visible/invisible by using a media query.
Although this works on first load, this does not seem to work if the browser window is resized after the initial load; i.e. when I load it maximized all columns are visible (that is correct), but when I downsize the browser window without reloading the page, the columns are still visible.
This is a problem as users can, for instance, rotate their tablet at any time to get more vertical screen room.
Is this by design?
How can I get it to re-evaluate?
This is my .vue page:
<template>
<ejs-grid id="gen2Grid" ref="gen2Grid" :dataSource="data" >
<e-columns>
<e-column field="mt" headerText="Material">e-column>
<e-column field="mst" headerText="Service" hideAtMedia="(min-width: 800px)">e-column>
e-columns>
ejs-grid>
template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { GridPlugin } from '@syncfusion/ej2-vue-grids';
@Component
export default class GenWorklistComponent extends Vue {
public data: any = [
{
mt: '2445/01, BAVARIA, FASH X-SB 6-25',
mst: 'Jaarlijks onderhoud',
},
{
mt: '2445/01, BAVARIA, FASH X-SB 6-25 met extra vulling',
mst: 'Jaarlijks onderhoud',
},
];
}
script>
<style scoped lang="scss">
@import '../../node_modules/@syncfusion/ej2-vue-grids/styles/material.css';
style>
