enable scrollable virtual and set grid height cause row be blocked by grouping

1 Answer 136 Views
Grid wrapper
yingting
Top achievements
Rank 1
yingting asked on 27 May 2022, 01:24 AM

Hi,

I am using Kendo Grid Wrapper Component with Vue3.0 compositon API and typescript  but we have encountered a problem.The problem is  that when I enable scrollable virtual and set the grid height,I drag the column header cells by grouping on the grid,it causes the grid row be blocked when the grid scroll to the bottom.

Thank you very much and greetings


<body>
  <div style="height:200px;">
    <div id="grid"></div>
  </div>
<script>
$("#grid").kendoGrid({
  height:'200px',
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" },
    { productName: "Ham", category: "Food" },
    { productName: "Bread", category: "Food" }
  ],
  scrollable:{
    virtual:true
  },
  groupable: {
    enabled: true
  }
});
</script>
</body>

1 Answer, 1 is accepted

Sort by
0
Petar
Telerik team
answered on 27 May 2022, 10:05 AM

Hi Yingting,

Based on the shared code, I can see that you are using the Kendo UI for jQuery Grid, not the Kendo UI for Vue Grid Wrapper. 

If my assumption is correct and you are using the Kendo UI for jQuery Grid, then you can check this Group Paging with VIrtualization article.

If you, no matter the shared code, are using the Wrapper Grid, here is a StackBlitz example in which the Wrapper Grid is configured to work with Grouping and Virtualization. You can follow the approach demonstrated in this example when implementing your solution. 

I hope the above details will help you implement your scenario.

Regards,
Petar
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.

yingting
Top achievements
Rank 1
commented on 30 May 2022, 08:55 AM

Hi Petar,
Thank you for your reply.It's a pity your solution didn't work for my problem.You can test the problem in the official example link: https://stackblitz.com/edit/wqbvi6?file=src%2Fmain.vue.You just need to set the :scrollable-virtual="true"
and height="200px" on the grid, and add 5 more data.After grouping and sliding to the bottom, you can see that the data row is blocked, I believe this is the problem of the grid itself.
Petar
Telerik team
commented on 01 Jun 2022, 01:51 PM

Hi, Yingting.

In order to make the Grid's virtualization work correctly, the component should have a pageSize configuration for its data source as it is described in this Virtualization article

If the targeted functionality is to have the Grid Wrapper component with a Virtualization and Grouping, this StackBlitz example should help you achieve what you need. 

Tags
Grid wrapper
Asked by
yingting
Top achievements
Rank 1
Answers by
Petar
Telerik team
Share this question
or