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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Updating groupSettings columns at same time as grid columns causes error

Thread ID:

Created:

Updated:

Platform:

Replies:

150441 Jan 7,2020 01:10 PM UTC Jan 10,2020 03:20 PM UTC Vue 8
loading
Tags: Data Grid
Bill Naples
Asked On January 7, 2020 01:10 PM UTC

Please refer to this code sandbox: https://codesandbox.io/s/syncfusion-grid-digest-error-rlcby
And open Chrome Developer Tools to see the error that occurs:
```
Uncaught TypeError: Cannot read property 'parentElement' of null
    at o.getColumnHeaderByUid (ej2-grids.umd.min.js:10)
    at e.addColToGroupDrop (ej2-grids.umd.min.js:10)
    at r (ej2-grids.umd.min.js:10)
    at e.onPropertyChanged (ej2-grids.umd.min.js:10)
    at e.notify (ej2-base.umd.min.js:10)
    at o.r.notify (ej2-base.umd.min.js:10)
    at o.onPropertyChanged (ej2-grids.umd.min.js:10)
    at o.e.dataBind (ej2-base.umd.min.js:10)
    at o.r.dataBind (ej2-base.umd.min.js:10)
    at i (ej2-base.umd.min.js:10)
```

The sandbox code that causes this error is in the Grid.vue component:
```
mounted() {
setTimeout(() => {
this.columns = this.sourceColumns;
this.rows = this.sourceRows;
this.groupBy = ["location", "name"];
}, 3000);

// This will work instead:
// setTimeout(() => {
// this.columns = this.sourceColumns;
// this.rows = this.sourceRows;
// setTimeout(() => {
// this.groupBy = ["location", "name"];
// }, 100);
// }, 3000);
},
```

As the comments state, if the code is changed to what is commented out, then it works fine.

It looks like SyncFusion doesn't like updating the basic grid columns and groupSettings columns at the same time. Although it works to make an asynchronous delay between them, it's then a question of how much time do you really need to wait? Also, it's not a documented pattern, nor ergonomic to do it that way.

I think the sortSettings columns also have the same problem, but I did not make an example for that.

Thanks!



Dhivya Rajendran [Syncfusion]
Replied On January 8, 2020 01:54 PM UTC

Hi Bill, 

We could see that you are trying to perform initial Grouping for the Grid in both Computed & Mounted event of the Vue. However while continuously updating the Grid properties makes grid render twice. Due to these the reported problem occurs.  Could you please explain your requirement, so that we can able to provide a better solution as soon as possible. 

Regards, 
R.Dhivya 


Bill Naples
Replied On January 8, 2020 02:06 PM UTC

Hi Dhivya,

Thanks for the reply.

The sandbox example is emulating my application's scenario where it updates columns, groupings and sorting from both separate UI widgets that I've created, as well as url route parameters. So what happens is the grid renders, and then the columns, grouping and sorting are then set from parsing url route or from user changes to those widgets.

It doesn't seem like the issue is changes to columns, grouping and sorting during initial render, because the sandbox doesn't change those values until 3 seconds after mounting (i.e., setTimeout has 3000 ms delay). But rather it seems the issue is changing the columns, grouping and sorting at the same time while the grid is already rendered. Why does that cause an error?

Thanks!

Dhivya Rajendran [Syncfusion]
Replied On January 9, 2020 01:34 PM UTC

Hi Bill, 

Thanks for your update. 

As per our default behavior, it is necessary to define dataSource or columns for the Grid at initial rendering.  After that we can dynamically change the columns and other properties like grouping data source as per your requirement.  

We suggest you to assign column at initial rendering as follows. Please find the below code example and sample for more information. 

<template> 
  <div> 
    <ejs-grid 
      ref="grid" 
      :columns="sourceColumns" 
      :dataSource="rows" 
      :allowGrouping="true" 
      :groupSettings="groupSettings" 
      :aggregates="aggregates" 
    /> 
  </div> 
</template> 
<script> 
import Vue from "vue"; 
import { 
  GridPlugin, 
  Aggregate, 
  ExcelExport, 
  Group, 
  PdfExport, 
  Resize, 
  VirtualScroll 
from "@syncfusion/ej2-vue-grids"; 
 
Vue.use(GridPlugin); 
 
export default { 
  name: "Grid", 
  data() { 
    return { 
      columns: [], 
      rows: [], 
      sourceColumns: [ 
        { 
          field: "name", 
          headerText: "Name" 
        }, 
        { 
          field: "location", 
          headerText: "Location" 
        }, 
        { 
          field: "purchase", 
          headerText: "Purchase" 
        } 
      ], 
      sourceRows: [ 
        { 
          name: "John Doe", 
          location: "Paris", 
          purchase: 3 
        }, 
        { 
          name: "John Doe", 
          location: "Paris", 
          purchase: 5 
        }, 
        { 
          name: "John Doe", 
          location: "London", 
          purchase: 7 
        }, 
        { 
          name: "Jane Doe", 
          location: "London", 
          purchase: 9 
        } 
      ], 
      groupBy: ["name"], 
      aggregates: { 
        columns: [] 
      } 
    }; 
  }, 
  computed: { 
    groupSettings() { 
      return { 
        showDropArea: false, 
        columns: this.groupBy 
      }; 
    } 
  }, 
  mounted() { 
// it requires no time delay 
//here you can change the columns and dataSource 
    this.columns = this.sourceColumns; 
    this.rows = this.sourceRows; 
    this.groupBy = ["location""name"]; 
  }, 
  provide: { 
    grid: [AggregateExcelExportGroupPdfExportResizeVirtualScroll] 
  } 
}; 
</script> 
<style> 
</style> 
 



Please get back to us, if you need further assistance. 

Regards, 
R.Dhivya 


Bill Naples
Replied On January 9, 2020 02:48 PM UTC

Hi Dhivya,

Your example doesn't change the columns. It binds `sourceColumns` to the grid, and then you change `this.columns`, which is not used.

See my updated example at:

In this updated example, it sets 3 columns on original render, and then on mounting it adds a 4th columns. That fails with this error:
```
Uncaught TypeError: e.isForeignColumn is not a function
    at eval (ej2-grids.umd.min.js:10)
    at Array.filter (<anonymous>)
    at o.getForeignKeyColumns (ej2-grids.umd.min.js:10)
    at e.filterQuery (ej2-grids.umd.min.js:10)
    at e.generateQuery (ej2-grids.umd.min.js:10)
    at i.refreshDataManager (ej2-grids.umd.min.js:10)
    at eval (ej2-grids.umd.min.js:10)
    at e.notify (ej2-base.umd.min.js:10)
    at o.e.trigger (ej2-base.umd.min.js:10)
    at VueComponent.n.trigger (ej2-vue-grids.umd.min.js:10)
    at i.refresh (ej2-grids.umd.min.js:10)
    at o.extendedPropertyChange (ej2-grids.umd.min.js:10)
    at o.onPropertyChanged (ej2-grids.umd.min.js:10)
    at o.e.dataBind (ej2-base.umd.min.js:10)
    at o.r.dataBind (ej2-base.umd.min.js:10)
    at i (ej2-base.umd.min.js:10)
```

I need to be able to change the columns after mounting (i.e., after initial rendering) for several scenarios:
1) some columns are dynamically generated based on user permissions and other settings, which can change while grid is rendered
2) change column ordering

I can change the column list, just not at the same time as changing grouping/sorting. It seems each one has to be changed in a different grid update digest cycle. Are you seeing the point I'm trying to make?

Bill Naples
Replied On January 9, 2020 06:50 PM UTC

UPDATE: Since my last reply, I've updated the sandbox example again:

The error in my last reply was because I used array push() to add a column, which sync fusion grid doesn't like.

In the latest example, I added sortSettings, and it shows that updating columns while sortSettings and groupSettings are still rendering causes the error. The stack trace seems to show that it does a dom query for the column header uid which is set in the data, but hasn't been rendered to the dom yet. So the dom query fails. It seems like the rendering cycles are overlapping. Should the grid use an update queue to manage changes?

Bill Naples
Replied On January 9, 2020 08:22 PM UTC

Here's another sandbox project which creates a task queue for updating columns, groups and sort settings. Any change gets enqueued, and tasks are processed one at a time. A task in only processed if no other tasks are running, and also no actions are running (i.e., action counter monitoring actionBegin and actionComplete). This approach resolves the error.


I think sync fusion grid needs to do something like this internally. Please review carefully.

Thanks.

Dhivya Rajendran [Syncfusion]
Replied On January 10, 2020 12:52 PM UTC

Hi Bill, 

Thanks for your update. 

By default, we have used asynchronous process for rendering grid component so when apply all properties(like sort, filter ,columns etc.,) together causes the reported issue. However we have considered this as an improvement task. It will be included in any of our upcoming release. 

At the planning stage for every release cycle, we review all open features. We will let you know when this feature is implemented. The status of implementation can be tracked through our Features Management System  


Regards, 
R.Dhivya 


Bill Naples
Replied On January 10, 2020 03:20 PM UTC

Thanks Dhivya. I really hope this will be fixed in next release. Seems like a core scenario for a vue component that props should be reactive to changes without concern for all these details.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon