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
Rank 1
Iron
Hi,
Thank you for the additional details provided. I will review the described steps and will follow up shortly.
Thank you very much for your patience.
Regards,
Neli
Hi,
Thank you very much for your patience.
I reviewed the information and example provided in the Bug Report issue.
In the example test.html I noticed that the serverPaging and serverSorting are enabled. However, there is no related code when returning the result in the read function that will handle the sorting scenario. Note, that when the serverSorting is enabled the sorting should be performed on the server.
Regarding the scenario with the modified Demo - I tested the example and tried to replicate the issue following the provided video. However, the issue is not reproduced on my side. Here is a screencast demonstrating the behavior on my end. Could yo uplease let me know if I am missing something?
Looking forward to your reply.
Rank 1
Iron
Hi Neli,
Thanks for your reply.
I found an easier way to reproduce the issue. Steps:
- Open the only grid demo Untitled | Kendo UI Dojo
- Change pageSize to 21.
- Run the sample.
- Scroll down to grid bottom.
- Click the first column to sort.
Notice the items don't fill the grid viewport completely. Please refer to the screenshot and attached video.
It should be a bug, right? Is there any workaround?
Thanks,
JCC
Hi,
The observed appearance is expected as the last page of data contains less items. When following the steps in the example provided in your last reply there are no missing items or page with data and all the items are correctly loaded and sorted.
Regards,
Neli
Rank 1
Iron
I think what you say now is different from the original bug expected behavior.
Expected/desired behavior
Enough items to fill the Grid height should be displayed. There should be no blank space without records.
Why not is it a bug now? I am confusing.
Hi,
I will double-check and verify the current behavior with a member of the development team. However, given the holiday season, I will be able to provide an update on the matter at the beginning of January.
Thank you very much for your patience.
Wish you Happy Holidays!
Regards,
Neli
Hi,
Thank you very much for your patience.
I discussed the issue again with a developer, and I can confirm that the observed behavior is considered a bug on our side. Please excuse me for misleading you in my previous reply.
I have logged the item on your behalf in our Feedback Portal:
As a token of our gratitude for reporting the issue, I have increased your Telerik points.
Regards,
Neli
Rank 1
Iron
Hi,
I am afraid can not provide a specific timeframe on when the issue will be fixed. Bug fixes are prioritized based on severity, impact, and overall priority.
For this reason, we advise our customers to subscribe to the issues and receive notifications when there is any progress on the status of the bug.
Regards,
Neli