FrozenColumns not working when data source change

[NAUD]

Hi,

I have a grid with 3 frozen columns. The first time the grid is ok but when data source change it doesn't work. If I disable frozenColumns, all works perfectly.

First time :

When data source change (no error in console) :

Without frozenColumns :

When data source change

 

Here is component code :

<template>

  <div id="app">

    <ejs-grid

      locale="fr"

      :dataSource="items"

      :allowSorting="true"

      :allowResizing="true"

      :allowPaging="true"

      :allowFiltering="true"

      :allowGrouping="false"

      :filterSettings="filterOptions"

      :searchSettings="searchOptions"

      :pageSettings="pageSettings"

      :selectionSettings="selectionOptions"

      :dataBound="dataBound"

      :frozenColumns="0"

      @recordClick="recordClick($event)"

      :rowSelected="rowSelected"

      rowHeight="38"

      height="100%"

      ref="grid"

    >

      <e-columns>

        <e-column type="checkbox" textAlign="Center" width="50"></e-column>

        <e-column

          width="80"

          textAlign="Center"

          :template="colTemplate"

          :allowSorting="false"

        ></e-column>

        <e-column

          v-for="field in fields.filter((f) => f.key !== actionsProp)"

          :key="field.key"

          :field="field.key"

          :headerText="field.label"

          :allowSorting="field.sortable"

          :disableHtmlEncode="false"

          width="150"

        ></e-column>

      </e-columns>

    </ejs-grid>

  </div>

</template>

<script>

import Vue from "vue";

import {

  GridPlugin,

  Resize,

  Sort,

  Page,

  Filter,

  Group,

  Freeze,

} from "@syncfusion/ej2-vue-grids";

import ButtonActionsTableSF from "@/components/common/ButtonActionsTableSF.vue";

Vue.prototype.$eventHub = new Vue();

Vue.use(GridPlugin);

export default {

  components: {

    ButtonActionsTableSF,

  },

  props: {

    items: Array,

    fields: Array,

    filterValue: String,

    loading: Boolean,

    actionsProp: {

      type: String,

      default: "#",

    },

  },

  provide: {

    grid: [Page, Resize, Sort, Filter, Group, Freeze],

  },

  created() {

    this.$eventHub.$on("edit", (id) => {

      this.$emit("edit", id);

    });

    this.$eventHub.$on("remove", (id) => {

      this.$emit("remove", id);

    });

  },

  data: () => {

    return {

      colTemplate: function () {

        return { template: ButtonActionsTableSF };

      },

      pageSettings: {

        pageSizes: [10, 25, 50, 100, 200],

        pageCount: 4,

        pageSize: 25,

      },

      filterOptions: {

        type: "Excel",

      },

      filter: {

        type: "CheckBox",

      },

      selectionSettings: {

        persistSelection: true,

        type: "Multiple",

        checkboxOnly: true,

      },

      selectionOptions: { mode: "Row", checkboxMode: "ResetOnRowClick" },

    };

  },

  methods: {

    // Evènement onClic sur la ligne

    recordClick: function (args) {

      if (args.cellIndex > 1) {

        this.$emit("rowClick", args.rowData);

      }

    },

    rowSelected: function (args) {

      this.$emit("selectionChange", this.$refs.grid.getSelectedRecords());

    },

  },

  computed: {

    searchOptions: function () {

      return {

        operator: "contains",

        key: this.filterValue ? this.filterValue : "",

        ignoreCase: true,

      };

    }

  },

};

</script>

<style>

@import "../../../node_modules/@syncfusion/ej2-base/styles/bootstrap.css";

@import "../../../node_modules/@syncfusion/ej2-buttons/styles/bootstrap.css";

@import "../../../node_modules/@syncfusion/ej2-calendars/styles/bootstrap.css";

@import "../../../node_modules/@syncfusion/ej2-dropdowns/styles/bootstrap.css";

@import "../../../node_modules/@syncfusion/ej2-inputs/styles/bootstrap.css";

@import "../../../node_modules/@syncfusion/ej2-navigations/styles/bootstrap.css";

@import "../../../node_modules/@syncfusion/ej2-popups/styles/bootstrap.css";

@import "../../../node_modules/@syncfusion/ej2-splitbuttons/styles/bootstrap.css";

@import "../../../node_modules/@syncfusion/ej2-vue-grids/styles/bootstrap.css";

</style>

[Joseph Christ Nithin Issack]

Hi Naud, 

  Greetings from Syncfusion support. 

  Based on your requirement you are trying to update the datasource of the grid while you have enabled frozenColumns by setting it as 3. We suggest you to call `freezeRefresh` method of EJ2 Grid after you change the dataSource dynamically. If this does not work we would like you to provide the following details so that we may provide a better solution. 

• We can see that you have defined only three columns in the grid, are you adding the remaining columns dynamically?
• Ensure whether you update the datasource do you change the columns dynamically? if so, please share the code example how you are changing the columns dynamicaly.
• Share the code example for the grid rendering along with the code example how you are changing the datasource.
• Share the replication procedure for reproducing the issue.
• Share a working sample to reproduce your issue.
• Share the Syncfusion package version.

Please get back to us for further details. 

Regards, 

Joseph I. 

[NAUD]

Hi,

Thank you for your response but there is no freezeRefresh method on vue grid API.

Another tips ?

Thank you

[Joseph Christ Nithin Issack]

Hi NAUD, 

  Thanks for your update. 

 In the last update we have advised you to use the `freezeRefresh` method after dynamically changing the dataSource in your grid, but you were not able to change the datasource. We have prepared a sample which shows how to dynamically change the datasource of the grid on a button click. For your convenience we have attached the sample below. 

Please refer the code example. 

onClick: function (args) { 

      this.$refs.grid.dataSource = 

        this.$refs.grid.dataSource == data1 ? data2 : data1; 

      this.$refs.grid.freezeRefresh(); 

    }, 

Sample: https://codesandbox.io/s/vue-template-forked-bv9io 

Please find the attached sample and revert for more queries. 

Regards, 

Joseph I. 

[Daniel]

I also encountered the same problem.

I set the freeze columns,When selecting columns, the grid was disordered,can you help me?

[Joseph Christ Nithin Issack]

Hi Daniel,

  Before proceeding with the solution, please share the below details.

• Complete grid rendering code.

• Simple sample to replicate the issue.

• Replication procedure for reproducing the issue.

• Video demo of the issue you are facing.

• Share the Syncfusion package version.