1. Home
  2. Forum
  3. Vue
  4. 'dataStateChange' event not fired

'dataStateChange' event not fired

Hello, 

I recently started experimenting with Syncfusion EJ2 for Vue.js and I have run into problems regarding server-side Data Grids. 

I wanted to implement a solution for this using our already built Ajax Api-Manager following the pattern in this online demo: 
https://ej2.syncfusion.com/vue/demos/#/material/grid/custom-binding.html

Yet I found that this does not work. The 'dataStateChange' event is not fired on Data Grids. I use the Vue.js dev tools in Chrome and I can see all events 
fired in my app and none of them is the 'dataStateChange' event. 
The first event fired is 'actionBegin' and the last 'actionComplete' when performing a search or paging. 

I already updated all npm packages to their latest version. 

11 Replies
PS Pavithra Subramaniyam Syncfusion Team May 14, 2019 12:11 PM UTC

Hi Niklas, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and tried to reproduce the reported problem from our side. But the “dataStateChange” triggers fine when performing paging in Grid. We are attaching the sample for your convenience, please find the sample from the link below. We have used the same codes as available in our online demo. 
 
We would also like to inform you that by default Grid “dataStateChange” event will be called only when we binding the Grid data as “result” and “count” pair. So please check this case and ensure this in your application.  
 
[order-service.ts] 
 
    return this.ajax.send().then((response: any) => { 
      let data: any = JSON.parse(response); 
      return <DataResult>{ 
        result: data["d"]["results"], 
        count: parseInt(data["d"]["__count"], 10) 
      }; 
    }); 
 
If you are still facing the problem, could you please share with us the following details for better assistance. 

  1. Share the details of script error if any occurred in console.
  2. Share a video demo showing the issue you are facing.
  3. If possible share a simple issue reproducing sample or reproduce in the above attached sample.

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


NU Niklas Upmann May 20, 2019 09:17 AM UTC

Hi, 

thanks for your help! It already helped me a lot. However I still run into one big problem.

The 'dataStateChange' event is being fired now and it works, however the initial request does not load any data. I have to manually trigger the event by searching, pagination, sorting, etc. to load data into my grid. There are no errors in the console. 


fake data I am using:
var rows = {
result: [
{ Username: "testificate-1", Company: 'DMK IT Solutions GmbH', Actions: { read: true, write: true, delete: false }},
{ Username: "testificate-2", Company: 'DMK IT Solutions GmbH', Actions: { read: true, write: true, delete: false } },
{ Username: "testificate-3", Company: 'DMK IT Solutions GmbH', Actions: { read: true, write: true, delete: false } },
{ Username: "t.rex", Company: 'Dino Solutions GbR', Actions: { read: true, write: true, delete: false } },
{ Username: "t.rex", Company: 'Dino Solutions GbR', Actions: { read: true, write: true, delete: false } },
{ Username: "t.rex", Company: 'Dino Solutions GbR', Actions: { read: true, write: true, delete: false } }
],
count: 6
};

var rows2 = {
result: [
{ Username: "testificate-1", Company: 'DMK IT Solutions GmbH', Actions: { read: true, write: true, delete: false }},
{ Username: "testificate-2", Company: 'DMK IT Solutions GmbH', Actions: { read: true, write: true, delete: false } },
{ Username: "testificate-3", Company: 'DMK IT Solutions GmbH', Actions: { read: true, write: true, delete: false } },
{ Username: "t.rex", Company: 'Dino Solutions GbR', Actions: { read: true, write: true, delete: false } },
],
count: 4
};

grid in VueJS template:

<ejs-grid
:dataStateChange="dataStateChange" :dataSource="gridData"
:toolbar='toolbarOptions' :allowPaging="true"
:pageSettings="pageSettings" :allowSorting="true"
:sortSettings="sortSettings" :allowSearching="true"
:searchSettings="searchSettings" :allowGrouping="true"
:groupSettings="groupSettings">
<e-columns>
<e-column field='Username' :headerText="$t('username')" textAlign='Left'></e-column>
<!-- <e-column field='Firstname' :headerText="$t('firstname')" textAlign='Left'></e-column>
<e-column field='Lastname' :headerText="$t('lastname')" textAlign='Left'></e-column> -->
<e-column field='Company' :visible="false" :headerText="$t('company')"></e-column>
<e-column field='Actions' :headerText="$t('actions')" textAlign='Right' :template="actionColumnTemplate"></e-column>
</e-columns>
</ejs-grid>

the methods part of my vue component:

methods: {
dataStateChange: function (state) {

return new Promise((resolve, reject) => {
console.log('fake ajax request');
setTimeout(resolve, 2000);
}).then((d) => {
var r = null;

if(flag) r = rows2;
else r = rows;
flag = !flag;

return r;
}).then((d) => {
console.log('fake ajax finsihed', d);
this.gridData = d;
});

},
},

And then I trigger the dataStateChange method in my 'mounted' event method like this:

mounted() {
let state = { skip: 0, take: 15 };
this.dataStateChange(state);
},

I am not using TypeScript, is that a problem? I noticed that the 'gridData' in your example actually contains more values than it does for me. 

I only have the 'count', 'json' and 'result' properties and your example has stuff like 'name' and 'actionArgs'. I think that's due to you actually initializing your 'gridData' with the typescript class constructor but I am not sure as I have never worked with TypeScript before. 


Appreciate the help and hope to hear from you soon.

Best regards,

Niklas



PS Pavithra Subramaniyam Syncfusion Team May 21, 2019 10:04 AM UTC

Hi Niklas, 

The Grid dataStateChange and dataSourceChanged events will not invoke at the initial Grid rendering. So at this time externally we need to call our service to bind the data source to Grid. From your code, we found that you have used Vue mounted event to call your service. We would like to inform that this is the correct way to bind the records to Grid at initial rendering. 
 
Regards, 
Pavithra S. 


NU Niklas Upmann May 21, 2019 10:09 AM UTC

Hi Pavithra, 

I figured it was the right way to do it. However it is not working. For some reason the grid data is not displayed when I manually do it in the 'mounted' hook. 
There seems to be something wrong internally. 

Best regards,
Niklas

PS Pavithra Subramaniyam Syncfusion Team May 22, 2019 05:56 AM UTC

Hi Niklas, 
 
Thanks for the update. 
 
From your query we found that the Grid will shows “No records to display” message even you call your service in Vue mounted hook. So we suggest to bind the actionFailure event to the Grid and ensure whether this event will invoke. If this event will invoke then you can find the cause of this issue easily in this event arguments. Because this event will trigger when any Grid action failed to achieve the desired results.  Also, please share this event arguments, screenshot , stack trace if any script error and your Grid code to us. This will help us to provide a better solution for this issue as early as possible. 
 
 
Regards, 
Pavithra S. 


NU Niklas Upmann May 27, 2019 10:28 AM UTC

Hi Pavithra, 

I checked the actionFailure event and it is fired when the 'dataStateChange' event is called for the first time. 
This is the error I get:

TypeError: Cannot read property 'GroupGuid' of undefined
    at eval (render.js?3632:445)
    at Array.forEach (<anonymous>)
    at Render.updateGroupInfo (render.js?3632:439)
    at eval (render.js?3632:425)

Just in case the 'GroupGuid' has something todo with the row-groupings I have activated here are my groupSettings for the data grid: 
groupSettings: {
showDropArea: false,
columns: [ 'Company' ],
disablePageWiseAggregates: true,
captionTemplate: "${headerText}: <b>${key}</b>"
},

Thank you and best regards,

Niklas

PS Pavithra Subramaniyam Syncfusion Team May 28, 2019 03:02 PM UTC

Hi Niklas, 
 
Thanks for the update. 
 
From your last update we found that you have performed initial grouping in Grid. But we suspect that you did not handled this grouping at the initial rendering. So you have faced this issue. To resolve this, you need to perform grouping for data source before you will provide it to Grid. Please refer the following code snippet, 
 
import { DataManager, JsonAdaptor, Query, DataUtil } from '@syncfusion/ej2-data' 
import { isNullOrUndefined } from '@syncfusion/ej2-base'; 
 
            ... 
 
mounted() { 
        let state = { skip: 0, take: 15, group: this.groupSettings.columns }; 
        this.dataStateChange(state); 
}, 
dataStateChange: function (state) { 
 
            ... 
 
this.$apollo.query({ 
    query: ALL_ORDERS_QUERY, 
    variables: { 
    first: state.take + this.i++, 
    skip: state.skip 
    }, 
    fetchPolicy:'no-cache' 
    }).then(({ data, errors }) => { 
    let data1; 
    if(!isNullOrUndefined(state.group) && state.group.length) { 
    for(let i = 0; i < state.group.length; i++) { 
    data1 = DataUtil.group(data, state.group[i]); // perfom the grouping for service returned data source 
    } 
    } else { 
    data1 = data.allOrders; 
    } 
   this.gridData = {result: data1, count:data1.count}; 
    }) 
} 
 
In this code we have used DataUtil method of the DataManager in success event to group the data source based on the provided group columns. After that we have returned that grouped data source to Grid. 
 
 
Regards, 
Pavithra S. 


NU Niklas Upmann May 31, 2019 03:03 PM UTC

Hi Pavithra, 

thank you once again for your kind help. 

Now my data is actually displayed correctly in the initial view. However your solution lead to another problem where the DataGrid component actually re-groups my grouped data after the first initial render which looks very weird. (Group -> Group -> Rows).

Do you have an explanation for this behavior? Why does DataGrid automatically group the data it receives except for in the first render? To me it does not make a lot of sense.

Thank you!

Best regards,
Niklas 

PS Pavithra Subramaniyam Syncfusion Team June 3, 2019 03:10 PM UTC

Hi Niklas, 
 
Sorry for the inconvenience caused. 
 
We suggest to change the object name like as following code snippet to resolve this issue. Because while perform manual grouping, this manually provided object name is conflicting with the default grouping API. So you have faced this issue. 
 
public ngOnInit(): void { 
        this.groupSettings = { columns: ["id"] }; 
        const state: any = { skip: 0, take: 12, initialGroup: (this.groupSettings as any).columns }; 
        this.crudService.execute(state); 
    } 
 
getAllData(state ?: any): Observable < any[] > { 
    return this.http.get<Customer[]>(this.customersUrl) 
            .map((response: any) => (<any>{ 
                result: state.take > 0 ? !isNullOrUndefined(state.initialGroup) ? DataUtil.group(response.slice(0, state.take), state.initialGroup[0]) : response.slice(0, state.take) : response, 
                count: response.length 
              })) 
              .map((data: any) => data); 
          } 
 
We have prepared the sample for your reference with this code and you can find that sample from the below link, 
 
 
Still If you facing the same issue, please share the screenshot or video demonstration of the issue. This will help us to provide a better solution for this issue as early as possible. 
 
Regards, 
Pavithra S. 


NU Niklas Upmann June 3, 2019 04:04 PM UTC

Hi Pavithra, 

thanks again for your help. 

Renaming the variable to 'initialGroup' did indeed fix the problem. However when searching the DataGrid actually needs a manual grouping again. I know I could fix this by checking the event args and if a search was performed do the grouping manually again but I am very confused about WHY I need to do this. 
Why doesn't the DataGrid just automatically group on every event? Why just on some events like sorting? 
Maybe there is a good explanation that I just can't seem to think of this moment... Do you have any insights on this topic? 

Best regards,
Niklas

PS Pavithra Subramaniyam Syncfusion Team June 10, 2019 03:26 AM UTC

Hi Niklas, 

By default we do not need to perform grouping in search action. Because the Grid will maintain previously performed actions (like grouping, filtering, sorting etc…) queries. So the Grid will handle the previously performed actions by itself by using this maintained queries. We have prepared the sample for your reference and you can find that sample from the below link, 


In this sample we have displayed “triggered” message in console if the manual grouping method will trigger. Still if you facing the same issue please try to reproduce the issue in this sample and send back to us. 

Regards, 
Pavithra S. 



Loader.
Up arrow icon