1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. TreeGrid dataSource not working with {result, count}

TreeGrid dataSource not working with {result, count}

Hi, 

We are in the process of upgrading Syncfusion from 18.1.42 to 20.1.59
The following upgrade seems to be breaking the TreeGrid component dataSource property. 

In our scenario, data is fetched before the TreeGrid component renders.
API apart from data also returns the total number of records for the query which we want to display as  Page totalRecords. 

eg: 

const apiRes= {
  data: [ {...}, {...}]
  totalRecords: 6
};

In the past we could do the following: 

new TreeGrid({
  dataSource: {result: apiRes.data , count: apiRes.totalRecords },
  ...
});
However, now passing an object to TreeGrid results in no data being displayed.
passing only an array of data still works. Please refer to the example:
https://stackblitz.com/edit/ts-grid-custom-binding-ietmmr?file=package.json,index.ts,index.html
Is there any other way to set the Page totalRecordCount?







11 Replies
PS Priyadarshan Selvan Syncfusion Team June 10, 2022 03:56 PM UTC

Hi Oskar Klosowski,


Thanks for contacting syncfusion support.

We were able to reproduce the issue at our end and the issue also replicates in Grid component. We have forwarded the query to concern team and will share further details within two business days on 14th June 2022. Until then we appreciate your patience

Regards,

Priyadarshan Selvan


PS Pon Selva Jeganathan Syncfusion Team June 14, 2022 09:01 AM UTC

Hi Oskar Klosowski,


Thanks for your patience.


On further validation, We have confirmed this as an issue and logged the defect report “The dataStateChange event triggered at initial rendering.” for the same. Thank you for taking time to report this issue and helping us to improve our product. At Syncfusion, we are committed to fix all validated defects (subject to technological feasibility and Product Development Life Cycle) and this fix will be included in our upcoming patch release which is expected to be rolled out on Volume 2 release


You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.       

https://www.syncfusion.com/feedback/35624/the-datastatechange-event-triggered-at-initial-rendering


Until then we appreciate your patience.


Regards,  

Pon selva   



PS Pon Selva Jeganathan Syncfusion Team July 6, 2022 02:25 PM UTC

Hi Oskar Klosowski,


We deeply regret the inconvenience caused.


Due to the complexity of the issue (“The dataStateChange event triggered at initial rendering.”) We are unable to complete it as planned. Currently, we are working on this with high priority and will include the fix in our upcoming patch release which is expected to be rolled out on July 20th, 2022.


We appreciate your patience until then.


Regards,

Pon selva


OK Oskar Klosowski July 20, 2022 11:24 PM UTC

Hi Pon Selva Jeganathan  

So after a couple of weeks of waiting for the new release (20.2.39)  this issue has not been fixed...

Demo: https://stackblitz.com/edit/encyj8?file=index.ts


PS Pon Selva Jeganathan Syncfusion Team July 21, 2022 06:24 PM UTC

Hi Oskar Klosowski,


We are able to reproduce the issue at our end. We are working on this query with high priority. And we need time to validate the issue and will update you with further details by 25th July 2022.  Until then we value your patience.


Regards,

Pon selva


PS Pon Selva Jeganathan Syncfusion Team July 25, 2022 03:09 PM UTC

Hi Oskar Klosowski,

 

Sorry for the inconvenience caused. 

 

Our dependent component team fixed this reported issue. In the tree grid, we need to fix this on our end. We are working on this query with high priority And we will fix this issue and include it in our upcoming weekly patch release which is expected to be rolled out on 3rd  August 2022. Until then we value your patience.

 

Regards,

Pon selva


OK Oskar Klosowski replied to Pon Selva Jeganathan August 4, 2022 10:24 PM UTC

Hi Pon selva


Any new ETA for bugfix release?

 


PS Pon Selva Jeganathan Syncfusion Team August 5, 2022 02:08 PM UTC

Hi Oskar Klosowski,

Sorry for the delayed response.


We haven't released any patches this week due to the volume 2 SP release. In the meantime, we can provide a custom patch that includes this bug fix on or before August 9th, 2022. Until then, we appreciate your patience.


Regards,

Pon selva



PS Pon Selva Jeganathan Syncfusion Team August 9, 2022 02:29 PM UTC

Hi Oskar,


Thanks for your patience.


We are facing a similar issue with the dependent component also, and we have fixed this issue in our dependent component. After fixing this issue in our dependent component, we could see that the data source property binding with the result and count property is only applicable for asynchronous binding.


We can see from your sample that you are using local data binding. When using local data binding, you do not need to associate the dataSource property with the result and count format. When using local data binding, the object array can be assigned to the dataSource property.


Please refer to the below help documentation,

https://ej2.syncfusion.com/documentation/treegrid/data-binding/#local-data


After the 19.1 release, we provided a support for custom binding. You can use this custom binding feature to handle your own logic. And you can assign the datasource property with the result and count format when using the custom binding feature. So, we suggest you use our custom binding feature.


Custom binding:


While using the custom binding feature, you can handle data processing externally and bind the result to the tree grid. And you can handle your own custom logic for the tree grid actions. And we have discussed custom binding feature in our help documentation.


Please refer to the below help documentation,

https://ej2.syncfusion.com/documentation/treegrid/data-binding/#custom-binding


We have a limitation for custom binding feature, that it works only for the self referencial data binding with pageSizeMode as Root mode. Also we have some mandatory mapping field properties(i.e hasChildMapping property) when we use the custom data binding feature.


Kindly get back to us for further assistance.


Regards,

Pon selva


If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.




OK Oskar Klosowski September 20, 2022 06:06 AM UTC

Hi Pon Selva Jeganathan

I'm back around to upgrading syncfusion grid piece.

We can see from your sample that you are using local data binding. When using local data binding, you do not need to associate the dataSource property with the result and count format. When using local data binding, the object array can be assigned to the dataSource property.

We got server pagination, so only x amount of items are retrived, but we want to display all available items count
As I specified in first post: 
API return:
{
  data: [ {...}, {...}]
  totalRecords: 6
};


Which I want to plot into the grid with: 

grid.dataSource = { result: data, count: totalRecords };

While using the custom binding feature, you can handle data processing externally and bind the result to the tree grid. And you can handle your own custom logic for the tree grid actions. And we have discussed custom binding feature in our help documentation.



All links provided are broken: "/js/jsj/djdh This file can contain any content."

I tried to look into documentation myself, but haven't found anything similar to our scenario.


I upgraded @syncfusion/ej2-treegrid to 20.2.39.

Data still doesn't; display, and on top of it


SyncTreeGrid.Inject(Page) Got broken also.



PS Pon Selva Jeganathan Syncfusion Team September 21, 2022 03:11 PM UTC

Hi Oskar Klosowski,


Thanks for the update.


Query: We got server pagination, so only x amount of items are retrieved, but we want to display all available items count


While using the server pagination the current or active page’s root node alone will be rendered in collapsed state, which is the default behaviour.  Remote Data Binding supports only Self-Referential Data and by default the pageSizeMode for Remote Data is Root mode. i.e., only root node’s count will be shown in pager while using Remote Data


Please refer to the below help documentation,

https://ej2.syncfusion.com/documentation/treegrid/data-binding/remote-data/


Query: All links provided are broken: "/js/jsj/djdh This file can contain any content."


We have made some changes to our documentation. So, this issue occurred.


Please refer to the below updated link:


Local data binding: https://ej2.syncfusion.com/documentation/treegrid/data-binding/local-data/

Custom data binding: https://ej2.syncfusion.com/documentation/treegrid/data-binding/data-binding/#custom-binding


Query: Data still doesn't; display, and on top of it


Based on your query, we suspect that you are using the remote data binding(based on this : We got server pagination). And we have prepared a sample with remote data binding, but we were unable to replicate the issue at our end.


Please refer to the below sample:

https://www.syncfusion.com/downloads/support/directtrac/general/ze/EJ2-MVc_with_javascript627261998


After following the above solution still faced issue, share us the following details.


  1. Complete treegrid code example(both client and server end code(if use server end)).
  2. Detailed explanation about how to get the record from server and how to bind that record to treegrid
  3. Share the video demo of the issue or screenshot of the issue and share the stacktrace details (if face any)
  4. Share us the issue reproducible sample or reproduce the issue in the above sample


 The provided information will be helpful to provide you response as early as possible. 


Regards,

Pon selva


If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.




Loader.
Up arrow icon