How to set data grid columns again after data grid columns are sorted ?

[CZ]

Hi,

There is one data grid in our project which will dynamically show different data set which the columns will be different by change binding columns dynamically. if we don't sort data gird by click a column, everything works very well,  but after we sort, if we assign set up a new columns  list, an exception will occur, see below exception, please help us?

Uncaught TypeError: Cannot read property 'uid' of undefined

    at Grid../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.getColumnHeaderByField (app.js:178498)

    at Sort../node_modules/@syncfusion/ej2-grids/src/grid/actions/sort.js.Sort.removeSortIcons (app.js:175026)

    at Sort../node_modules/@syncfusion/ej2-grids/src/grid/actions/sort.js.Sort.refreshSortIcons (app.js:175063)

    at Observer../node_modules/@syncfusion/ej2-grids/node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (app.js:96478)

    at Grid../node_modules/@syncfusion/ej2-grids/node_modules/@syncfusion/ej2-base/src/component.js.Component.notify (app.js:90923)

    at FreezeRender../node_modules/@syncfusion/ej2-grids/src/grid/renderer/freeze-renderer.js.FreezeRender.renderTable (app.js:188480)

    at Render../node_modules/@syncfusion/ej2-grids/src/grid/renderer/render.js.Render.render (app.js:190361)

    at Grid../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.gridRender (app.js:179333)

    at Grid../node_modules/@syncfusion/ej2-grids/src/grid/base/grid.js.Grid.render (app.js:177497)

    at Grid../node_modules/@syncfusion/ej2-grids/node_modules/@syncfusion/ej2-base/src/component.js.Component.refresh (app.js:90822)

Thanks,

[Rajapandi Ravi]

Hi CZ, 

 

Greetings from syncfusion support 

 

We have analyzed your query and prepared sample based on your requirement but unfortunately we are unable to reproduce the issue at our end  and everything works fine. We have shared the sample  for your reference. Please refer the below code example, sample and video demo for more information. 

 

<template> 

  <div id="app"> 

    <Button type="button" @click="change">Switch to change data</Button> 

    <Button type="button" @click="initial">Switch to your initial data</Button> 

    <ejs-grid 

      ref="grid" 

      :dataBound="dataBound" 

      :editSettings="editSettings" 

      height="200" 

      :allowSorting="true" 

      :dataSource="data" 

    > 

      <e-columns> 

        <e-column field="OrderID" headerText="Order ID" width="150" textAlign="Left"></e-column> 

        <e-column field="CustomerID" headerText="Customer ID" width="150" textAlign="Left"></e-column> 

        <e-column field="ShipCountry" headerText="Ship Country" width="150" textAlign="Left"></e-column> 

      </e-columns> 

    </ejs-grid> 

    <div id="head"> 

      <div id="Grid"></div> 

    </div> 

  </div> 

</template> 

<script> 

 

import Vue from "vue"; 

import { GridPlugin, Edit, Toolbar, Sort } from "@syncfusion/ej2-vue-grids"; 

Vue.use(GridPlugin); 

 

var data = [ 

  { OrderID: 10248, CustomerID: "VINET", ShipCountry: "USA" }, 

  { OrderID: 10249, CustomerID: "Tomps", ShipCountry: "Germany" } 

]; 

 

var datas = [ 

  { EmployeeID: 1084, FirstName: "Nancy", LastName: "David" }, 

  { EmployeeID: 1085, FirstName: "Micheal", LastName: "Martin" } 

]; 

 

export default { 

  data() { 

    return { 

      data: data, 

      grid: "", 

      editSettings: { 

        allowEditing: true, 

        allowAdding: true, 

        allowDeleting: true, 

        mode: "Dialog" 

      }, 

      toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"] 

    }; 

  }, 

  provide: { 

    grid: [Edit, Toolbar, Sort] 

  }, 

  methods: { 

    dataBound() { 

      if (window.flag) {                     //set the sorted column again to the initial data after switch from another data 

        window.flag = false; 

        var grid = document.getElementsByClassName("e-grid")[0] 

          .ej2_instances[0]; 

        grid.sortSettings.columns = window.sortobj; 

      } 

    }, 

    initial() { 

      window.flag = true; 

      var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

      grid.columns = [                                    //switch to the initial data 

        { field: "OrderID", width: "120" }, 

        { field: "CustomerID", width: "120" }, 

        { field: "ShipCountry", width: "120" } 

      ]; 

      grid.dataSource = data; 

    }, 

    change() { 

      var grid = document.getElementsByClassName("e-grid")[0].ej2_instances[0]; 

      window.sortobj = grid.sortSettings.columns; //get the sorted columns here 

      grid.columns = [              //switch another data 

        { field: "EmployeeID", width: "120" }, 

        { field: "FirstName", width: "120" } 

      ]; 

      grid.dataSource = datas; 

    } 

  } 

}; 

</script> 

<style> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

 

Sample: https://codesandbox.io/s/281827-j4r3c?file=/App.vue 

Video demo: https://www.syncfusion.com/downloads/support/forum/156163/ze/1561632056214850.zip 

If you still face the issue please share the below details that will be helpful for us to provide better solution. 

1)      Please share your syncfusion package version. 

2)      If possible please replicate the problem with our above attached sample. 

3)      Share your complete Grid rendering code. 

4)      Please share your issue scenario in video demonstration format. 

Regards,
Rajapandi R