Treeview Eager loading with Lazy loading of the Leaves

[Stijn]

Problem:

I have a search funtionality that loads the folder structure and a second that loads the documents for a folder. Due to dependencies on other systems is the latter a giant performance hit if i have to loop over the folder in an eager loaded system. these same dependencies & preformance impact also block me from excecuting the first webservice on every expand. Documents are only available in leaf folders, as they are a specific type, but that's not relevant to the treeview.

Right now, we have implemented it so that we cache the folder structure, and on every expand we load the cached version & filter out what we needed. Due to cache size limitations, we have settled on a cache time of 30 minutes. We see now that users complain about  the treeview not working anymore when they have been called away, when they had lunch & when they had to work on other things for a while (i.e. when they didn't use the app for more than 30m.

I have managed to eager load the complete folder structure, but that required it to be fully expanded, while most folders should be collapsed. The contents of collapsed folders seems to be ignored. A folder that has been extended but recollapsed however, is kept in the treeview and will not be requested again. We could make a Javascript that would collapse everything, but that would give a nasty flicker on the view.

Question:

I would like to know if there is a way to eager load the collapsed folder structure while keeping lazy loading for the documents.

 

[Anton Mironov]

Hello Stijn,

Thank you for the details provided.

In order to achieve the desired result, I would recommend setting the "expanded" configuration of the folders to "false".

Handle the "Collapse" Event of the TreeView and make a request for the documents as per the needs of your application.

I hope this information helps. Let me know if further assistance or information is needed.

Looking forward to hearing back from you.

 

Kind Regards,
Anton Mironov
Progress Telerik

[Stijn]

I am already requesting the folders & documents dynamically. However, the folder structure is only cached for 30min on the Backend. 

What I want to do is to Eager load the complete file structure (with correct expanded values) including the collapsed folders to the Component, so that the folders don't need to be loaded dynamically anymore. this would fix the cache problem. for the documents, which will not be in the initial structure, I need the dynamic loading.

[Eyup]

Hi Stijn,

Thank you for getting back to us.

My name is Eyup Yusein and I am a Senior Team Member of the Telerik Support Team. My colleague Anton is absent at the moment and I will be taking over this case.

First of all, I would like to be frank and open with you from the beginning - I am afraid the TreeView does not provide such a mixed selective load-on-demand functionality out-of-the-box. However, we can try to achieve it with some custom tricks.

I've read the description you provided carefully and it resembles Server Filtering which is available with other components and provided by Kendo DataSource in general:
https://www.telerik.com/forums/how-do-i-use-serverfiltering-with-read-in-treeview

Here is my plan:

1. Create "IsExpanded" field in your database which will be an individual indicator for each record.

2. If the item represents a Structure Folder, its IsExpanded state would be true.

3. If the item represents a Leaf Folder, its IsExpanded state would be false.

4. Create a global Session variable on the server which will keep a collection with unique IDs, e.g. List<int> or List<string>

5. Every time the user expands a Leaf Folder, you can make a jQuery ajax() request to the server to add the item ID to the Session Collection.

6. In the filtering logic of the DataSource Read call, you will use a LINQ .Where() approach to return only the IsExpanded folder content.

Using this approach, you will get:

- minimal Session memory
- optimized loading speed
- preserved/cached state of the expanded folder IDs
- initial/eager loading of the complete folder structure
- dynamic/lazy loading of the remaining leaf folder content

Let me know if you like this idea. Feel free to share your thoughts.

[Stijn]

Comments:

1. The folder structure is a result of a search on another system which I cannot change, thus no additional fields, unless we make them our side, and resolve the value hardcoded in a mapper.

2. Setting the IsExpanded to true would show all folders to be expanded, while the business requirements require a specific node to be expanded while all others are collapsed. Furthermore, if you do lazy loading and you give the entire structure as expanded, it will work. but doing this, followed by a Javascript that would collapse what needs to be collapsed would give a flicker as stated in initial question.

3. Similar to 2: the leaf folder may have to be expanded based on the search result/endpoint

4. The whole system is set up to be stateless, so no sessions, hence the cache

5. Could I do an eager load and make some Javascript that would trigger on the leaf nodes? (or all nodes, which I then filter out based on the id? the structure folders have an id without a * where the leaf folders have 1 * in their id) If so, could you provide an example?

6. This one is implemented as such based on the cache, which recieves the tree guid from the page

Looking forward to your reply, especially about point 5

[Eyup]

Hi Stijn,

All the prerequisites are making the task difficult and the available options limited, but I will try to help you achieve it nevertheless.

Now, by default, the TreeView works with loadOnDemand property set to be True:
https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview/configuration/loadondemand

In your scenario, I guess what we need to achieve is basically a custom load-on-demand feature.To do that, you can initially disable the built-in loadOnDemand setting.

But in order to provide a full working project, I will need a full runnable sample which demonstrates your exact configuration. Can you open a formal support ticket from your Telerik Account page and send us a very basic isolated runnable MVC application to demonstrate the current behavior. This will allow me to better figure out your exact environment and provide more precise javascript solution.

[Stijn]

I am starting work on a small project, but with what I understand from your comment, combined with knowing what I need, my issues would be solved if I had a way to either run a small JS to determine LoadOnDemand based on the ID, or to set it ahead of time for each of the TreeViewItem

Sincerely

Stijn

[Eyup]

Hi Stijn,

Thank you for providing a runnable sample in the official support ticket. I suggest that we continue our technical conversation there.