Node ajax call "loading" display

[Van]

In our webapp each time the user clicks on a node in the tree, the node drops down and shows a "loading" (in nodes place) graphic for a second - then node pops back in place an shows the content of the node.  Is there a way to change this behavior of the UI?  Preferably not have the selected node drop down - just replace the text temporarily with loading image - or loading image at end of text, or turn off the loading image.  Distracting to have the tree nodes jump up/down each time clicked.

 

[Rumen]

Hi Van,

Can you please set the RenderMode property to Lightweight?

Also test with other skins.

I personally wasn't able to replicate the issue in the treeview and file explorer demos and the problem on your side could be some global CSS class which pushes the loading spinner on a new line.

If you are unable to resolve the issue, please send a simple runnable project via a support ticket or provide a live url so that we can replicate it. Please also include a screenshot or video demonstrating the issue.

 

Regards,
Rumen
Progress Telerik

[Van]

This appears to be a default behavior of the file explorer when it makes the ajax call for the sub nodes in the tree.  Screen cap attached shows same behavior on the Telerik file explorer demo (https://demos.telerik.com/aspnet-ajax/fileexplorer/examples/render-modes/defaultcs.aspx)  .  Just make sure to clear your browser cache, and watch carefully. Due to the small size in the demo is very fast.  However on our site is very noticeable due to the size of some nodes. 

Preferred behavior (any one of following)

Place loading Icon before text of node clicked (same level in tree)

OR

Place loading icon after text of node clicked (same level in tree)

OR

Replace the text clicked with loading icon

 

Trying to avoid the tree levels changing due to current behavior.

Thanks,

 

[Rumen]

Hi Van,

Thank you for the very detailed research and screenshots!

I examined the rendered HTML and its stylesheet by configuring my Chrome to load the page with very very slow connection in the DevTools network tab and managed to override the loading icon position with the following CSS class override:

 

.RadTreeView .rtIn, .RadTreeView .rtImg, .RadTreeView .rtChkTristate, .RadTreeView .rtLoadingIcon, .RadTreeView label {
    display: flex !important;
}

 

Please give it a try and let me know how it goes.

 

Regards,
Rumen
Progress Telerik

[Van]

Awesome - thank you Rumen that worked perfectly!

[Rumen]

You are welcome, Van! I am glad that the solution helped!

 

Regards,
Rumen
Progress Telerik