Kendo jQuery - FileManager custom paging or lazy loading

[Kirtika Patel]

I have been working on the FileManager control with Kendo using jQuery & it feels very slow in initial loading when the file count increases to 5000+. I tried searching for custom paging, lazy loading, etc. for FileManager but no help. Do anyone knows how to achieve it? Any help will be highly appreciated.

Thanks.

[Martin]

Hello, Kirtikaben,

I could suggest you the following two approaches that would limit the performance hit in the scenario described:

- Use the default load-on-demand behavior of the FileManager (recommended). You could move the hierarchy logic entirely to the server. To do that you should implement a Read endpoint for the FileManager DataSource that would return the appropriate items for a given level and folder. For example, when initially loading the FileManager and its root directory, the service would return only top-level items (those that do not belong to a folder. When a user opens a folder, the FileManager will automatically send a request to the remote containing information (the path) about the folder that is being opened. Then the service should return all items that are directly placed within that folder.

Here is an example of such a read endpoint implemented in our Demos service:

https://github.com/telerik/kendo-ui-demos-service/blob/d2b799b15a52d56d7fe622dba21018c667686725/demos-and-odata-v3/KendoCRUDService/Controllers/FileManagerController.cs#L71

and here is the DirectoryProvider used by the above action:

https://github.com/telerik/kendo-ui-demos-service/blob/master/demos-and-odata-v3/KendoCRUDService/Models/FileManager/DirectoryProvider.cs

The above is used in our Demos examples:

https://demos.telerik.com/kendo-ui/filemanager/index

- Alternatively, if for some reason you could not move the above logic to the server and should use all the 100 K records on the client, you could implement the dataSource.transport.read as a function and use a client-side load-on-demand mechanism:

function fileManagerRead(options) {
     // The information about the current read parameter is available in the 
     // options.data argument
     // based on that data query the list of entries and return only the direct children of the current folder in the following manner:
    options.success([...data...]);

I hope that the above helps. If you have any other questions, please do not hesitate to contact us.

Regards,
Martin
Progress Telerik