Expanding/Collapsing issue on Treelist component

[Andrei]

Hello,

We encountered a problem inside our app while using the kendo-treelist component.

As shown in the video attached, we use a template to edit the values in the tree, which is either kendo-dropdownlist or kendo-numerictextbox. At the press of the kendo-icon-wrapper, which contains that arrow SVG icon (for increasing/decreasing the value or selecting from the dropdown), the whole row will either collapse or expand depending on the current state that it has.

From debugging, we believe that because the same SVG icon has been used, it might trigger the collapsing/expanding.

After adding a kendo-icon-wrapper component inside that cell, we could observe the same behaviour when pressing next to the 'test' text.

We are looking for a solution to this problem.

Thank you in advance.

[Martin Bechev]

Hi Andrei,

Based on the provided details, I am not sure which versions are installed. I tested the described configuration of having a DropDownList and NumericTextBox in a TreeList cell, but interacting with their icon wrappers does not collapse the row. Please check the following demo:

https://stackblitz.com/edit/angular-gfsjjwpc?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Femployees.ts

I also tested the approach of having the custom components inside an edit template, but still the TreeList row state was not affected by them:

https://stackblitz.com/edit/angular-ktgsqsme?file=src%2Fapp%2Fapp.component.ts

Please could you check the demos and let us know if we are missing something important to reproduce the issue. 

Also, provide some more details about the continuation of your side, like the used versions, HTML, and TS code of the TreeList. Thank you in advance.

Regards,
Martin Bechev
Progress Telerik

[Andrei]

Hi Martin,

Thank you for your response. Sorry for my late reply, but I managed to get some time to create a similar environment to what we have in our app.

https://stackblitz.com/edit/angular-13-starter-2b2mix2c?file=src%2Fapp%2Fapp.component.ts

We are using Angular 13 on the project and this is similar to what we are encountering on our part. There are some small differences in UI, but I think the issue can be seen in that StackBlitz - after entering Edit mode, whenever you click on the dropdown from the Position column or the arrows from the Extension column, that row will get collapsed/expanded.

Please do let me know if you think there are any improvements to be made in order to fix this. Thank you in advance!

 

Regards,

Andrei Saulea

Arkk Solutions

[Yanmario]

Hi Andrei and Arkk,

This behavior looks very familiar. To prevent it, the developer must handle the click event in the DropDownList and call the stopPropagation method to stop it from bubbling.

Updated example - https://stackblitz.com/edit/angular-13-starter-84lrjh46

I hope this helps.

Regards,
Yanmario
Progress Telerik