[Bug][Grid] Incorrect Rendering of Unique Rows by key

[prochorz]

Incorrect Rendering of Unique Rows in @progress/[email protected]

🛠 Issue Summary

When using @progress/[email protected], 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.

✅ 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

1. Use @progress/[email protected] in a project with virtual scrolling.
2. Populate the grid with dynamic data.
3. Observe that items are incorrectly reused, affecting row rendering.

🔄 Environment

• Package Version: @progress/[email protected]
• Framework: Vue 3
• Additional Context: Issue is related to Vue’s key handling in virtual lists.

Would appreciate any insights on whether this is a known issue or if there's a recommended fix! 🚀

[PekoPPT]

Hi, @prochorz.

Can you please send us a runnable example in which the reported behavior can be replicated? Or can you test your scenario with the latest version of Kendo UI for Vue - 6.3.0 ?

I've tried reproducing the reported behavior in this StackBlitz example, which uses version 6.3.0, but there aren't any console errors or warnings. If the issue is replicable in the shared example, can you tell us what we should test?

[prochorz]

Hi @PekoPPT, take a look at these two video clips: How it works on v6.3.0 https://github.com/user-attachments/assets/363e05b1-791c-490a-a3ca-b492c7c0cec4

How it can be https://github.com/user-attachments/assets/b64e67cc-8e0d-419c-b05d-308ac3265cb2

As you can see in the second video, there’s no unnecessary re-rendering. This happens because the component with tr doesn’t have a unique key.