Disable freezecolumns in mobile view

[Sreevatsan]

I have a  grid with dynamic frozen columns with number of columns to be frozen being selected from a dropdownlist. I am unable to scroll horizontally in smaller screens(mobile view) since frozen columns occupy the whole width. I need frozen columns in higher screens but not in mobile view. How can I achieve my requirement?

<ejs grid :frozenColumns="frozenColumns"></ejs-grid>

frozenColumns value selected from dropdownlist.

[Rajapandiyan Settu]

Hi Sreevatsan,

Thanks for contacting Syncfusion support.

By using the following code in the load event of Grid, you can remove frozen columns for mobile devices alone.

Load: https://ej2.syncfusion.com/vue/documentation/api/grid/#load

 

<template>

  <div id="app">

    <ejs-grid ref="grid" id='Grid' :dataSource='gridData' :allowPaging="true"

            :frozenColumns="frozenColumns" :load="load">

            <e-columns>

                <e-column field='OrderID' headerText='Order ID' width='120'></e-column>

                <e-column field='CustomerID' headerText='Customer Name' width='130'></e-column>

                <e-column field='ShipCountry' headerText='Ship Country' width='120'></e-column>

            </e-columns>

    </ejs-grid>

  </div>

</template>

<script>

import Vue from "vue";

import { GridPlugin, Filter, Freeze, Page } from "@syncfusion/ej2-vue-grids";

import { data } from './datasource.js';

import { Browser } from '@syncfusion/ej2-base';

 

Vue.use(GridPlugin);

 

export default {

  data: () => {

    return {

      gridData: data,

      frozenColumns: 1,

    };

  },

  methods: {

    load: function (args) {

      if (Browser.isDevice){

        this.$refs.grid.frozenColumns = 0;

      }

    }

  },

  provide: {

      grid: [Filter, Freeze, Page]

  }

};

</script>

 

Regards,

Rajapandiyan S