Trying to assing property to readonly object

[Unknown]

Hi,

I'm using TreeGrid component with load child on demand and load data from NgRx Store.

When I'm opening a parent, I have this error :

The NgRx store is read only so to be able to modify data stored without modifying the store, I use cloneDeep from Lodash.

During ngOnInit I load data with these functions:

this.treeGridData$ = this.store.pipe(select(selectAllTreeGridData));

this.treeGridData$

.pipe(

filter(t => !!t && t.length > 0),

take(1)

)

.subscribe(gridData => {

this.treeGridData = { result: cloneDeep(gridData) };

});

In this example I tried to add a pipe(..., take(1)), to give full control of the datas to the TreeGrid component. (I tried to reassign this.treeGridData each time a parent is opened but I had the same error)

Then when I load the data I did this :

onDataStateChange(state: DataStateChangeEventArgs) {

if (state.requestType === 'expand' && state.childDataBind) {

const node = state.data as TreeGridData;

this.store.dispatch(loadTreeGridDataChildrenAction({ node }));

this.store

.select(selectTreeGridChildrenByParent(node.id))

.pipe(

filter(t => !!t),

take(1)

)

.subscribe(children => {

state.childData = children as any;

if (state.childDataBind) state.childDataBind();

});

}

}

I also tried that: (in this case, the subscribe to treeGridData$ wasn't a take(1) but a continuous subscription)

onDataStateChange(state: DataStateChangeEventArgs) {

if (state.requestType === 'expand' && state.childDataBind) {

const node = state.data as ThreatView;

this.store.dispatch(loadThreatsAlertRequestAction({ threat: node }));

}

}

In the html my template looks like this:

<ejs-treegrid

#treegrid

[dataSource]="treeGridData"

hasChildMapping="isParent"

parentIdMapping="parent_id"

idMapping="id"

[loadChildOnDemand]="true"

height="100%"

[allowSorting]="true"

[allowResizing]="true"

[selectionSettings]="selectionOptions"

(dataStateChange)="onDataStateChange($event)"

(cellSelected)="onCellSelected($event)"

(cellDeselected)="onCellDeselected($event)"

[contextMenuItems]="contextMenuItems"

(contextMenuOpen)="onContextMenuOpen($event)"

(contextMenuClick)="onContextMenuClick($event)"

>

When I do a continuous subscription without the state.childDataBind(), the children are rendered and the treegrid work as expected but I still get the error and when I try to use state.childDataBind(), children are not rendered, the expand icon is not in expanded state and I still get the same error.

I don't understand why the treegrid component is trying to modify something read-only when the data are not in only read due to the cloneDeep, if I don't use the loadChildOnDemand, I don't have the error but I need the load on demand due to the quantity of informations I have.

Best Regards,

Théo Armengou

[Pon Selva Jeganathan]

Hi Théo Armengou,

Thanks for contacting syncfusion forum.

Query: Script error thrown while expanding the record.

We were unable to reproduce the issue(Script error thrown while expanding the record) at our end while preparing a sample based on your query.

Please refer to the below sample,

https://stackblitz.com/edit/angular-gn2r68-zvgi9z?file=app.component.ts

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

1. Share the complete treegrid code example(both ts and html)
2. Please ensure the parent id mapping value is present in the data source.
3. Share the network tab details
4. If possible, reproduce the issue in the attached sample or share the issue reproducible sample.
5. Share the product detail version.

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

Regards,  

Pon selva   

[Unknown]

Hi,

I managed to reproduce my error and with a way to hide it but when I do so, it introduce a buggy behavior.

https://stackblitz.com/edit/angular-gn2r68-axdmtp?file=app.component.ts

In the app.component.ts you can switch between the 2 const node = ...

// No error & buggy behavior :

// const node = cloneDeep(state.data) as TreeGridData;

// Error but no buggy behavior :

const node = state.data as TreeGridData;

And you'll be able to see the error in the console or not. To reproduce the buggy behavior :

- Expand first row (Id: 5)

- Collapse first row

- Open any other row

You'll see that first row is opened again, you can do it with any other row. Because of the cloneDeep, the expand property that is modified in the state is not the one that the treeGrid reads.

Regards,

Théo Armengou

[Pon Selva Jeganathan]

Hi Théo Armengou

Thanks for the update

Query: script error thrown while using observable binding

In your shared sample, you are not returning data as result and count properties, and when expanding the parent record, you are not assigning the child value to the childData property and not calling the childDataBound method .

While using the custom binding feature, the returned value should be an object with properties result and count and While expanding the parent record, you must assign the child value to the childData property using the childDataBound method.So, we suggest you ensure that your return data has result and count properties and ensure you are binding the child value into the ChildData property and call the childDataBound method.

Please refer to the below help documentation,

For data binding: https://ej2.syncfusion.com/angular/documentation/treegrid/observables/#data-binding

For handling child data: https://ej2.syncfusion.com/angular/documentation/treegrid/observables/#handling-child-data

Query: For buggy behaviour( ​that first row is opened again)

We are able to reproduce the issue at our end. We are working on this query with high priority. We will update further details by 12^th May 2022. Until then we value your patience.

Please refer to the below attached sample

Regards,  

Pon selva   

[Unknown]

Hi,

I did another example where I'm using state.childData and state.childDataBind :

https://stackblitz.com/edit/angular-gn2r68-axdmtp?file=app.component.ts

It's not working at all that's why I didn't use them in the example I gave you.

In the stackblitz I also tried setting dataStateChange in async mode, when I did that, I get the same result as what I had without state.childData and state.childDataBind, and the same expand buggy behavior.

In the documentation you sent me, childData is not called from a custom API, I need to do the same thing with an async request to get the childData, and then use state.childData = result of async request then state.childDataBind(). Before the click on the expand icon, my app doesn't know what are the children of this record.

Regards,

Théo Armengou

[Pon Selva Jeganathan]

Hi Théo Armengou

Thanks for the update

We are able to reproduce the issue (both script error and behavior issue) at our end. We are validating this issue with high priority. We will update further details by 16^th May 2022. Until then we value your patience.

Regards,  

Pon selva   

[Pon Selva Jeganathan]

Hi Théo Armengou,

Sorry for the delayed response.

Query: script error thrown while using observable binding

To avoid the reported script error we suggest you follow the below code example,

 

Your code:

 

public dataStateChange(state: DataStateChangeEventArgs): void {

    if (state.requestType === 'expand') {

      console.log('state', state);

 

      // No error & buggy behavior :

      // const node = cloneDeep(state.data) as TreeGridData;

 

      // Error but no buggy behavior :

      const node = state.data as TreeGridData;

 

Modified code:

 

public dataStateChange(state: DataStateChangeEventArgs): void {

    if (state.requestType === 'expand') {

      console.log('state', state);

 

      // No error & buggy behavior :

      // const node = cloneDeep(state.data) as TreeGridData;

 

      // Error but no buggy behavior :

      const datas = state.data as TreeGridData;

 

      const node = {...datas};

      

In the above code snippet, we assign the state.data into local variable then we use that local variable.

Please refer to the modified sample,

https://stackblitz.com/edit/angular-gn2r68-rkdanq?file=app.component.ts,treegriddata.service.ts

Query: For buggy behaviour.
​That the first row is opened again even though it is collapsed state

On further validation, we have considered the reported issue (“Expand/Collapse is not working properly while using the observable binding
”) as a bug. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle) and will include the fix in our upcoming patch release which is expected to be rolled out on 8^th June 2022. Until then we appreciate your patience.

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/34956/expand-collapse-is-not-working-properly-while-using-the-observable-binding

Note: To view the above feedback, kindly login into your account. 

Regards,
Pon selva

[Unknown]

Hi,

Thanks for the bug report and the solution, it works well, there is no more error only the soon to be fixed buggy behavior :)

However when I try to access the feedback link, it says access denied ?

Regards,

Théo Armengou

[Pon Selva Jeganathan]

Hi Théo Armengou,

Sorry for the inconvenience caused. We have resolved this access issue.  Now you can access this feedback link

Feedback link: https://www.syncfusion.com/feedback/34956/expand-collapse-is-not-working-properly-while-using-the-observable-binding

Note: To view the above feedback, kindly login into your account. 

Regards,
Pon selva

[Pon Selva Jeganathan]

Hi Théo Armengou

Due to unforeseen circumstances, we are unable to include the bug(“Expand/Collapse is not working properly while using the observable binding”) fix as promised in the weekly patch release. We would include the bug fix in the upcoming weekly patch release, which is scheduled to be rolled out on 15^th June, 2022. Until then we value your patience.

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/34956/expand-collapse-is-not-working-properly-while-using-the-observable-binding

Note: To view the above feedback, kindly login into your account. 

Regards,
Pon selva

[Pon Selva Jeganathan]

Hi Théo Armengou

Sorry for the inconvenience caused.

We have internally fixed the issue “Expand/Collapse is not working properly while using the observable binding”, but we are unable to include the fix in this patch and the same will be included in our upcoming patch release which is expected to be rolled out on Volume 2 release.  

  

We have created custom patch which includes the fix to resolve your issue. You can find the packages from the below link,  

Packages: https://www.syncfusion.com/downloads/support/directtrac/general/ze/package579865943

We request you to replace the packages(ej2-treegrid) in the above link under App(root folder)-> node_modules-> @syncfusion->ej2-treegrid)
to resolve the problem.

Until then we value your patience.

Regards,

Pon selva

[Pon Selva Jeganathan]

Hi Théo Armengou

Sorry for the inconvenience caused.

Due to unforeseen circumstances, we are unable to include the bug(“Expand/Collapse is not working properly while using the observable binding”) fix as promised in the Volume 2 release. We would include the bug fix in the upcoming weekly patch release, which is scheduled to be rolled out on 13^th July 2022, without further delay. Until then we suggest you use our shared custom patch.

Regards,

Pon selva

[Pon Selva Jeganathan]

Hi Théo Armengou

We appreciate your patience.   

We are glad to announce that fix for the issue “Expand/Collapse is not working properly while using the observable binding” has been rolled out in our patch release. We request you to update to our latest version " 20.2.38". 

FB link: https://www.syncfusion.com/feedback/34956/expand-collapse-is-not-working-properly-while-using-the-observable-binding

Kindly get back to us for further assistance.

Regards,

Pon selva

[Unknown]

Hi,

Thank you for keeping me updated.

I tried updating my project to version 20.2.38 and it seems like there is a breaking change, I'm still using the same loading method for my data and same html code, I only updated my packages without changing anything else in my project.

Previous version of my packages :

"@syncfusion/ej2-angular-buttons": "^20.1.55",

"@syncfusion/ej2-angular-charts": "^20.1.56",

"@syncfusion/ej2-angular-diagrams": "^20.1.55",

"@syncfusion/ej2-angular-dropdowns": "^20.1.56",

"@syncfusion/ej2-angular-grids": "^20.1.56",

"@syncfusion/ej2-angular-inputs": "^20.1.61",

"@syncfusion/ej2-angular-layouts": "^20.1.55",

"@syncfusion/ej2-angular-navigations": "^20.1.56",

"@syncfusion/ej2-angular-popups": "^20.1.57",

"@syncfusion/ej2-angular-progressbar": "^20.1.57",

"@syncfusion/ej2-angular-querybuilder": "^20.1.55",

"@syncfusion/ej2-angular-treegrid": "^20.1.56",

New version :

"@syncfusion/ej2-angular-buttons": "^20.2.38",

"@syncfusion/ej2-angular-charts": "^20.2.38",

"@syncfusion/ej2-angular-diagrams": "^20.2.38",

"@syncfusion/ej2-angular-dropdowns": "^20.2.38",

"@syncfusion/ej2-angular-grids": "^20.2.38",

"@syncfusion/ej2-angular-inputs": "^20.2.38",

"@syncfusion/ej2-angular-layouts": "^20.2.38",

"@syncfusion/ej2-angular-navigations": "^20.2.38",

"@syncfusion/ej2-angular-popups": "^20.2.38",

"@syncfusion/ej2-angular-progressbar": "^20.2.38",

"@syncfusion/ej2-angular-querybuilder": "^20.2.38",

"@syncfusion/ej2-angular-treegrid": "^20.2.38",

When using version "20.2.38" like you suggested, all expand icons disappeared. And when I revert to the previous versions of my packages, it work as it used to, with the expand bug but at least I have the icon to expand the rows.

Any idea on what happened ?

Tried to update the stackblitz project but only managed to break it by doing so :/

[Pon Selva Jeganathan]

Hi Théo Armengou

Thanks for the update

We are able to reproduce the issue(Expand icon is not shown in 20.2.38 version) at our end. We are validating this issue with high priority. We will update further details by 29^th July 2022. Until then we value your patience.

Regards,  

Pon selva   

[Pon Selva Jeganathan]

Hi Théo Armengou

Thanks for your patience.

We are working on this query with high priority. We will fix this reported issue(Expand icon is not shown in 20.2.38 version) and include in our upcoming weekly patch release. In the meanwhile, we can provide a custom patch after fixing this issue. Until then we value your patience.

Regards,  

Pon selva   

[Pon Selva Jeganathan]

Hi Théo Armengou

We have internally fixed the issue “Expand/Collapse icon is not showing”, but we are unable to include the fix in this patch and the same will be included in our upcoming patch release which is expected to be rolled out on first weekly patch release after the volume 2 SP release.  

  

We have created custom patch which includes the fix to resolve your issue. You can find the packages from the below link,  

Packages: https://www.syncfusion.com/downloads/support/directtrac/general/ze/package-1180077398

We request you to replace the packages(ej2-treegrid) in the above link under App(root folder)-> node_modules-> @syncfusion->ej2-treegrid)
to resolve the problem.

Until then we value your patience.

Regards,

Pon selva

[Pon Selva Jeganathan]

Hi Théo Armengou

We appreciate your patience.   

We are glad to announce that fix for the issue “Expand/Collapse icon is not showing” has been rolled out in our patch release. We request you to update to our latest version " 20.2.45".

Please refer to the below release notes

https://ej2.syncfusion.com/angular/documentation/release-notes/20.2.45/?type=all#tree-grid

Kindly get back to us for further assistance.

Regards,

Pon selva

[Unknown]

It is still not working, i've updated all my syncfusion pacakges in 20.2.45 :

"@syncfusion/ej2-angular-base": "^20.2.45",

"@syncfusion/ej2-angular-buttons": "^20.2.45",

"@syncfusion/ej2-angular-charts": "^20.2.45",

"@syncfusion/ej2-angular-circulargauge": "^20.2.45",

"@syncfusion/ej2-angular-diagrams": "^20.2.45",

"@syncfusion/ej2-angular-dropdowns": "^20.2.45",

"@syncfusion/ej2-angular-grids": "^20.2.45",

"@syncfusion/ej2-angular-inputs": "^20.2.45",

"@syncfusion/ej2-angular-layouts": "^20.2.45",

"@syncfusion/ej2-angular-lineargauge": "^20.2.45",

"@syncfusion/ej2-angular-maps": "^20.2.45",

"@syncfusion/ej2-angular-navigations": "^20.2.45",

"@syncfusion/ej2-angular-popups": "^20.2.45",

"@syncfusion/ej2-angular-progressbar": "^20.2.45",

"@syncfusion/ej2-angular-querybuilder": "^20.2.45",

"@syncfusion/ej2-angular-treegrid": "^20.2.45",

"@syncfusion/ej2-base": "^20.2.45",

"@syncfusion/ej2-buttons": "^20.2.45",

Now there is no more buggy behavior regarding the expand icons, there is no more expand icon showing at all, my code is still unchanged and when I revert to previous versions expand icons works.

Here is how I load my data :

data: { result: DataType[]; count: number } = { result: [], count: 0 };

In the ngOnInit : (The store is from NgRx, data is preloaded before so no need)

this.data$ = this.store.pipe(select(selectAllData));

I subscribe to the observable from the store and since store data is readonly I use cloneDeep from lodash so the Treegrid can modify data :

this.data$.subscribe(data => {

this.data = { result: cloneDeep(data), count: data.length };

})

In the HTML :

<ejs-treegrid

#treegrid

[dataSource]="data"

hasChildMapping="isParent"

parentIdMapping="parent_id"

idMapping="id"

height="100%"

loadChildOnDemand="true" <!-- Also tried with [loadChildOnDemand]="true" -->

...More options

>

When data is bound with observables all rows are rendered but the rows with isParent: true doesn't have the expand icon.

It's still the same code / loading method as when I opened this issue.

Do I need to change something for it to work ?

Thanks for taking the time to look into this and keeping me updated each time :D

Regards,

Théo Armengou

[Farveen Sulthana Thameeztheen Basha]

Hi Théo,

We are working on this query with high Priority and update you further details by on or before 1^st September 2022. Until then we appreciate your patience.

In the meanwhile we will contact you if any details required.

Regards,
Farveen sulthana T

[Pon Selva Jeganathan]

Hi Théo Armengou,

We have created a new ticket under your account. Please follow that for further updates.

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.