hideAtMedia behaves unexpectedly

[Bob]

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>

[Dhivya Rajendran]

Hi Bob, 

Thanks for contacting Syncfusion support. 

We have checked the reported problem in the Intel Atom Z3770 tablet and it is working fine at our end. Please share the below details,  which will help us to validate further at our end and to provide a better solution as soon as possible. 

1. Share the device details and browser details
2. The reported problem occurred in any particular device/bowser or all devices?
3. Share screenshot of the problem
4. Syncfusion package version details

Regards, 

R.Dhivya 

[Bob]

Hi, thank you for your answer.

I tried this on a PC actually using Windows 10 10.0.18362, Chrome 79.0.3945.130 and FireFox 72.0.1 (64-bits), Syncfusion version 17.4.43 (ej2-vue-grids).

I haven't tried this on a mobile device yet as debugging options for those devices are limited and ofc it should work on a PC as well.

Resizing the browser window after page load does not change column visibility.

It feels like the media query is only being evaluated on page load.

When reloading the content in the resized window (just hit F5), the column *is* hidden, per the mediaquery.

I have added 3 screenshots (in order) to illustrate the problem.

Thanks,

Bob

Attachment: 20200129__synfusion_support_e01f3076.zip

[Dhivya Rajendran]

Hi Bob, 

Thanks for sharing the details. 

We are able to reproduce the reported issue at our end. We have logged a bug report for the reported issue as “media query (hideAtMedia) is not working properly”. Thank you for taking  time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming February 12 Patch Release. 

 

Until then we appreciate your patience. 

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

  

https://www.syncfusion.com/feedback/11704/media-query-hideatmedia-is-not-working-properly 

Regards, 

R.Dhivya