We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Disable freezecolumns in mobile view

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.


1 Reply

RS Rajapandiyan Settu Syncfusion Team March 3, 2023 01:02 PM UTC

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


Loader.
Live Chat Icon For mobile
Up arrow icon