Rank 1
Iron
- Enable serverPaging, serverSorting, virtual scroll. Please refer the attached codes.
- Run the page in browser.
- Drag scrollbar to end
- Click "name" column header to sort the grid.
Observed:
Grid only shows the last 3 rows.
Question:
How can I make last ten rows show after sort? Like this:
<html>
<head>
<link rel="stylesheet" href="styles/kendo.common.min.css"/>
<link rel="stylesheet" href="styles/kendo.default.min.css"/>
<script src="jquery-3.6.0.js"></script>
<script src="kendo.all.js"></script>
<style>
.grid {
width: 800px;
height: 400px;
}
</style>
</head>
<body>
<div class="grid"></div>
<script>
$(()=>{
var ds = [];
for(var i=0;i<13;i++){
ds[i]={name:i.toString(),number:i};
}
var dataSource = new kendo.data.DataSource({
serverPaging:true,
serverSorting:true,
pageSize:10,
type: "odata",
transport: {
read: options=>{
var d=[];
for(var i =options.data.skip;i<options.data.skip+options.data.take && i<ds.length;i++){
d.push(ds[i]);
}
var r = {
d: {
__count: ds.length,
results: d
}
};
options.success(r);
}
}
});
$(".grid").kendoGrid(
{
sortable:true,
columns:["name","number"],
dataSource:dataSource,
scrollable: {
virtual: true
}
}
);
});
</script>
</body>
</html>
Rank 1
Iron
4 Answers, 1 is accepted
Hello,
I will need a little bit more time to review the issue. I will get back to you once I have some information to share.
Thank you very much for your patience.
Regards,
Neli
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Hello,
In order for the virtualization to work correctly in the described scenario, you need to set a smaller height to the Grid.
Here is the modified Dojo example.
Let me know if you have further questions.
Regards,
Neli
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
Iron
Hi,
What you could try is to increase the height of the Grid rows. You could take a look at the related knowledge base article linked below:
- https://docs.telerik.com/kendo-ui/knowledge-base/edit-row-height-with-virtual-scrolling
Regards,
Neli
Rank 1
Iron
Rank 1
Iron
Hi,
Note, that in the example you have provided in your first reply serverSorting is enabled. However, the sorting for the server response is not implemented. You will need to either implement the sorting for the response or you could leave the sorting to the client, by removing the serverSorting configuration.
You could take a look at our Grid Virtualization of local and remote data demos linked below:
- https://demos.telerik.com/kendo-ui/grid/virtualization-remote-data
- https://demos.telerik.com/kendo-ui/grid/virtualization-local-data
And here is a Dojo example based on the demo of virtualization of local data where the sorting on the client is enabled.
Let me know in case you have additional questions.
Rank 1
Iron
Hi Neli,
The sample I provided is simplized. In our procuct, we implement soring, paging in remote.
In the sample you shared, this issue also exists. Is this a bug?
Hi,
I discussed the issue with a developer from the team. It is a bug on our end and based on the described scenario I logged a Bug Report on your behalf in our official Feedback Portal. Below you will find a link to the issue:
As a small token of gratitude for reporting incorrect behavior, your Telerik points are now updated.
Regards,
Neli
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Iron
Hi,
I am afraid that currently, I could not suggest a workaround for the issue. In case we find one, we update the thread with the Bug Report. You could follow the issue in the Feedback Portal in order to be notified when we have progress on it.
Regards,
Neli