Virtual Scrolling Behavior

Oct 13, 2025 by magicalceylontours.com 36 views

Introduction

When working with the @progress/kendo-vue-grid library, developers may encounter issues with the rendering of unique rows due to the way Vue assigns component keys. This problem affects the virtual scrolling behavior, leading to unexpected UI inconsistencies. In this article, we will delve into the issue, explore the observed behavior, and provide a solution using a patch package.

Issue Summary

When using @progress/kendo-vue-grid@3.9.0, I encountered an issue where unique items are not rendered correctly due to how Vue assigns component keys. This issue affects the virtual scrolling behavior, leading to unexpected UI inconsistencies.

Observed Behavior

The keys assigned to rows in the grid do not ensure uniqueness when using Vue’s virtual DOM. As a result, Vue reuses incorrect components, causing rendering issues. This is particularly problematic in scenarios involving detail rows and virtual scrolling, where incorrect keys lead to unexpected UI behavior.

Key Assignment Logic

The key assignment logic in Grid.js is responsible for generating unique keys for each row. However, due to the way Vue handles virtual DOM, the generated keys may not be unique, leading to incorrect component reuse.

Virtual Scrolling Behavior

Virtual scrolling is a feature that allows the grid to render only the visible rows, improving performance. However, when the keys assigned to rows are not unique, virtual scrolling may lead to unexpected UI behavior, such as incorrect rendering of rows.

Detail Rows and Virtual Scrolling

Detail rows are a feature that allows users to expand and collapse rows to view additional information. When combined with virtual scrolling, detail rows may lead to unexpected UI behavior if the keys assigned to rows are not unique.

Solution

I applied a patch using [patch-package](https://github.com/ds300/patch-package) that resolves the issue by modifying the key assignment logic in Grid.js.

Diff of the Fix

diff --git a/node_modules/@progress/kendo-vue-grid/dist/esm/Grid.js b/node_modules/@progress/kendo-vue-grid/dist/esm/Grid.js
index 422ccc5..6fa86ae 100644
--- a/node_modules/@progress/kendo-vue-grid/dist/esm/Grid.js
+++ b/node_modules/@progress/kendo-vue-grid/dist/esm/Grid.js
@@ -1703,7 +1703,7 @@ var GridVue2 = {
       // The RowIndexes when in Detail Row template
       var masterRowIndex = rowIndex * 2 + rowIndexStart;
       var detailRowIndex = rowIndex * 2 + rowIndexStart + 1;
-      return [
+      return h(Vue.Fragment, { key: rowId + detailRowId, }, [
       // @ts-ignore function children
       h(GridRow, {
         key: rowId,
@@ -1796,7 +1796,7 @@ var GridVue2 = {
         ariaColIndex: 2 + (this.$props.group ? this.$props.group.length : 0),
         detail: this.$props.detail ? detailRenderFunction : undefined,
         id: navigationTools.generateNavigatableId("".concat(detailRowId, "-dcell"), idPrefix)
-      })])];
+      })])]);
     }, this) || h("tr", {
       "class": "k-table-row k-grid-norecords"
     }, [h("td", {

Expected Behavior

Each row should receive a unique key that prevents Vue from incorrectly reusing components. The grid should render correctly when virtual scrolling is enabled. Expanding/collapsing detail rows should work as expected without incorrect state reuse.

Steps to Reproduce

Use @progress/kendo-vue-grid@3.9.0 in a project with virtual scrolling.
Populate the grid with dynamic data.
Observe that items are incorrectly reused, affecting row rendering.

Environment

Package Version: @progress/kendo-vue-grid@3.9.0
Framework: Vue 3
Additional Context: Issue is related to Vue’s key handling in virtual lists.

Conclusion

Q: What is the incorrect rendering of unique rows by key?

A: The incorrect rendering of unique rows by key is an issue that occurs when using the @progress/kendo-vue-grid library, where unique items are not rendered correctly due to how Vue assigns component keys. This issue affects the virtual scrolling behavior, leading to unexpected UI inconsistencies.

Q: What are the symptoms of this issue?

A: The symptoms of this issue include:

Rows being incorrectly reused, affecting row rendering
Virtual scrolling behavior being affected, leading to unexpected UI inconsistencies
Detail rows and virtual scrolling not working as expected

Q: What is the cause of this issue?

A: The cause of this issue is the way Vue assigns component keys, which may not be unique, leading to incorrect component reuse.

Q: How can I reproduce this issue?

A: To reproduce this issue, follow these steps:

Use @progress/kendo-vue-grid@3.9.0 in a project with virtual scrolling.
Populate the grid with dynamic data.
Observe that items are incorrectly reused, affecting row rendering.

Q: What is the solution to this issue?

A: The solution to this issue is to apply a patch using [patch-package](https://github.com/ds300/patch-package) that modifies the key assignment logic in Grid.js.

Q: What are the benefits of applying the patch?

A: The benefits of applying the patch include:

Ensuring that each row receives a unique key, preventing Vue from incorrectly reusing components
Resolving the issue with virtual scrolling behavior
Ensuring that detail rows and virtual scrolling work as expected

Q: Is this issue specific to `@progress/kendo-vue-grid@3.9.0`?

A: No, this issue is not specific to @progress/kendo-vue-grid@3.9.0. It can occur in any version of the library that uses Vue's virtual DOM.

Q: Can I use this patch in production?

A: Yes, you can use this patch in production. However, it's recommended to test the patch thoroughly in a development environment before deploying it to production.

Q: Where can I find more information about this issue?

A: You can find more information about this issue on the [patch-package](https://github.com/ds300/patch-package) GitHub page.

Q: Can I contribute to the solution of this issue?

A: Yes, you can contribute to the solution of this issue by reporting any issues or providing feedback on the [patch-package](https://github.com/ds300/patch-package) GitHub page.