This is a migrated thread and some comments may be shown as answers.

Treelist: Both the loading and collapse icons appear at the same time

4 Answers 35 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
Jacquiline
Top achievements
Rank 1
Jacquiline asked on 09 Feb 2021, 07:40 PM
When I expand a parent, the loading and collapse icons appear simultaneously and the UI looks awkward. The collapse icon spins when the  loading of children happens. How can I prevent this? I would like the k-i-collapse icon to appear only after the loading finishes.

4 Answers, 1 is accepted

Sort by
0
George Gindev
Telerik team
answered on 11 Feb 2021, 04:45 PM

Hello Jacquiline,

 

Thank you for writing to us.

I have tried something similar - as seen in this dojo (https://dojo.telerik.com/IyulIGIK), it all appears smooth and works correctly as intended on my side, using the latest released version of Kendo UI.

The spinning loading animation is created by the .k-i-loading  CSS class added to the .k-icon element which also creates the style for expanded/collapsed state of the arrow indicator icon, by toggling the classes for  .k-i-collapse and  .k-i-expand.

The loading animation doesn't affect the style of the collapse/expand icons, and the collapsed arrow symbol is only added when the animated .k-i-loading class is removed from the .k-icon element.

Please send us a working code or dojo sample, where the issue can be reproduced, so we can understand and further discuss any issues that arise. This will allow us to provide more precise and accurate suggestions.

Regards,
George Gindev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Jacquiline
Top achievements
Rank 1
answered on 17 Feb 2021, 09:42 PM

Hi George,

Thanks a lot for the response. I am in the process of creating a working sample. Will update you soon.

0
Jacquiline
Top achievements
Rank 1
answered on 26 Feb 2021, 10:17 PM

I could not reproduce the issue on Dojo but the issue exist in the project that I am working on. When I debugged, I found   this._contentTree in the render function of kendo.all.js containing the k-i-loading and k-i-collapse classes. I am using the v2020.1.219 of kendo. Somehow, before loading the children the collapse icon is displayed but as soon as the loading finishes the loading icon disappears . 

0
George Gindev
Telerik team
answered on 02 Mar 2021, 05:28 PM

Hi Jacquiline,

Given the provided description, it is tough for me to imagine what the problem is exactly or how to go about solving it.

I suspect the problem might be custom CSS added to the project which overrides the default values of the icon element or its ":before/:after" pseudo-elements.

Could you please check if removing all the custom CSS from the project resolves the issue?

 

Regards,
George Gindev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
TreeList
Asked by
Jacquiline
Top achievements
Rank 1
Answers by
George Gindev
Telerik team
Jacquiline
Top achievements
Rank 1
Share this question
or