Rank 1
Loading data's based on lazy loading method.
Ex; Initially I want to load only 5 data's from API, then once I click next button (arrow) in timeline and again need to trigger API with another 5 records to load.
1 Answer, 1 is accepted
Hello, Sathishkumar,
Unfortunately, lazy loading is currently not supported. The closest thing you could do is change the entire dataSource once you reach X index.
Example DataSource:
var dsOptions = {
transport: {
read: {
url: "Read Endpoint",
dataType: "json",
data: {
page: 1 // Send a request to the server with an extra parameter called "page"
}
}
},
schema: {
model: {
fields: {
date: {
type: "date"
},
}
}
}
}Inside the navigate event, once you reach the final index, update the dataSource options and set it back to the timeline in order to request a bigger set of data, example:
navigate: function(e) {
if(e.action == "next") {
setTimeout(function() {
let currentIndex = e.sender.currentEventIndex,
currentDataLength = e.sender.dataSource.total();
if(currentIndex === currentDataLength - 1) {
dsOptions.transport.read.data.page = 2;
e.sender.setDataSource(dsOptions);
}
});
}
}The above snippet will create a new dataSource with a page parameter = 2. The server should return the data for the new page and then the dataSource with updated data should be applied to the Timeline.
Best Regards,
Georgi Denchev
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/.
Rank 1
Hi Georgi,
Thanks for the reply. It works nice but i'm facing 2 problems.
Ex: I'm loading 5 datas per page, and when click next button then loading next 5 data's.
1) in big screen when it load first 5 data's then the next button is getting disabled due to no further records to load. So i can't able to click next button.
2) In small screen initially loads 5 datas but it shows only 3 datas and next button is enabled to load next 2 datas, but now when I click next button it loads API for page 2 and shows first 3 datas. So user can't able to see 4th and 5th data for each page.
Regards,
Sathishkumar
Hi, Sathishkumar,
I've prepared an alternative approach which uses the pageSize of the dataSource and it should work a bit better. If the arrow is grayed out(last page is reached) and the pageSize is less than the total amount of records, increase the pageSize. This way you'll continuously get new items until you reach the very end. The downside of this approach is that the Timeline will be reset back to page 1 whenever you update the pageSize.
Example - you scroll and you reach the current limit, the pageSize is updated from 5->10. You start scrolling again from 0->10. Once you reach the 10th event, the pageSize is updated to 15 and the Timeline index is reset back to 0, so you have to scroll again from 0->15 to reach the next page and so on.
Unfortunately, since there's no built-in functionality for "endless" scrolling, having a foolproof implementation would require a lot of source code customization which falls out of our support scope.
Runnable Dojo:
https://dojo.telerik.com/@gdenchev/IPOKiFiz
Best Regards,
Georgi