From 5f5580af2482c2b6dd61d6016c444c62c8185cc1 Mon Sep 17 00:00:00 2001
From: RKUZNETSOV <rkuznetsov@dynamicsun.ru>
Date: Wed, 17 Dec 2025 11:38:18 +0300
Subject: [PATCH] Collapse row details on page change fix

---
 ..._Demo_14_A_DetailView_WithPagination.razor | 88 +++++++++++++++++++
 .../Grid_DetailView_Documentation.razor       |  4 +
 blazorbootstrap/Components/Grid/Grid.razor    |  5 +-
 blazorbootstrap/Components/Grid/Grid.razor.cs |  1 +
 4 files changed, 96 insertions(+), 2 deletions(-)
 create mode 100644 BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_A_DetailView_WithPagination.razor

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_A_DetailView_WithPagination.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_A_DetailView_WithPagination.razor
new file mode 100644
index 000000000..80f92d966
--- /dev/null
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_A_DetailView_WithPagination.razor
@@ -0,0 +1,88 @@
+<Grid TItem="Product"
+      Class="table table-hover border-top"
+      Data="products"
+      AllowDetailView="true"
+      PageSize="3"
+      AllowPaging=true
+      AllowSorting="true">
+
+    <GridColumns>
+        <GridColumn TItem="Product" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
+            @context.Id
+        </GridColumn>
+        <GridColumn TItem="Product" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
+            @context.Name
+        </GridColumn>
+        <GridColumn TItem="Product" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
+            @context.IsActive
+        </GridColumn>
+    </GridColumns>
+
+    <GridDetailView TItem="Product">
+
+        <Grid TItem="Ingredient"
+              Class="table table-hover border-top"
+              Data="GetIngredients(context.Id)">
+
+            <GridColumns>
+                <GridColumn TItem="Ingredient" Context="emp1" HeaderText="Id" PropertyName="Id">
+                    @emp1.Id
+                </GridColumn>
+                <GridColumn TItem="Ingredient" Context="emp1" HeaderText="Description" PropertyName="Description">
+                    @emp1.Description
+                </GridColumn>
+                <GridColumn TItem="Ingredient" Context="emp1" HeaderText="Unit" PropertyName="Unit">
+                    @emp1.Unit
+                </GridColumn>
+                <GridColumn TItem="Ingredient" Context="emp1" HeaderText="Quantity" PropertyName="Quantity">
+                    @emp1.Quantity
+                </GridColumn>
+            </GridColumns>
+
+        </Grid>
+
+    </GridDetailView>
+
+</Grid>
+
+@code {
+    private List<Product> products = new List<Product> {
+        new Product { Id = 10, Name = "Product 10", IsActive = true },
+        new Product { Id = 20, Name = "Product 20", IsActive = true },
+        new Product { Id = 30, Name = "Product 30", IsActive = true },
+        new Product { Id = 40, Name = "Product 40", IsActive = true },
+        new Product { Id = 50, Name = "Product 50", IsActive = true }
+    };
+
+    private List<Ingredient> ingredients = new List<Ingredient> {
+       new Ingredient { Id = 10105, ProductId = 10, Description = "Ingredient 1", Unit = "UNIT1", Quantity = 350 },
+       new Ingredient { Id = 10106, ProductId = 10, Description = "Ingredient 2", Unit = "UNIT1", Quantity = 600 },
+       new Ingredient { Id = 10107, ProductId = 10, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
+       new Ingredient { Id = 10108, ProductId = 10, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
+       new Ingredient { Id = 20109, ProductId = 20, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
+       new Ingredient { Id = 20110, ProductId = 20, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
+       new Ingredient { Id = 10111, ProductId = 10, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
+       new Ingredient { Id = 20112, ProductId = 20, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
+       new Ingredient { Id = 40113, ProductId = 40, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
+       new Ingredient { Id = 50114, ProductId = 50, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
+       new Ingredient { Id = 20115, ProductId = 20, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
+    };
+
+    private IEnumerable<Ingredient> GetIngredients(int productId) => ingredients.Where(i => i.ProductId == productId);
+
+    public record class Product
+    {
+        public int Id { get; set; }
+        public string? Name { get; set; }
+        public bool IsActive { get; set; }
+    }
+
+    public record class Ingredient
+    {
+        public int Id { get; set; }
+        public int ProductId { get; set; }
+        public string? Description { get; set; }
+        public string? Unit { get; set; }
+        public int Quantity { get; set; }
+    }
+}
diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor
index c7d78be9f..c26eed17e 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_DetailView_Documentation.razor
@@ -16,6 +16,10 @@
     <Demo Type="typeof(Grid_Demo_14_A_DetailView)" Tabs="false" />
 </Section>
 
+<Section Size="HeadingSize.H2" Name="Example with pagination" PageUrl="@pageUrl" Link="example-with-pagination">
+    <Demo Type="typeof(Grid_Demo_14_A_DetailView_WithPagination)" Tabs="false" />
+</Section>
+
 <Section Size="HeadingSize.H2" Name="Dynamic data" PageUrl="@pageUrl" Link="dynamic-data">
     <div class="mb-3"></div>
     <Demo Type="typeof(Grid_Demo_14_B_DetailView_Dynamic_Data)" Tabs="false" />
diff --git a/blazorbootstrap/Components/Grid/Grid.razor b/blazorbootstrap/Components/Grid/Grid.razor
index 61b311dc6..37cfdeb2d 100644
--- a/blazorbootstrap/Components/Grid/Grid.razor
+++ b/blazorbootstrap/Components/Grid/Grid.razor
@@ -147,7 +147,8 @@
                         {
                             var rowClass = RowClass?.Invoke(item) ?? "";
                             var detailViewRowId = IdUtility.GetNextId();
-                            <tr @key="RowKeySelector?.Invoke(item) ?? item?.GetHashCode()" class="@rowClass" @onclick="args => RowClick(item, args)" @ondblclick="args => RowDoubleClick(item, args)" role="@(AllowRowClick ? "button" : "")">
+                            var rowKey = RowKeySelector?.Invoke(item) ?? item?.GetHashCode();
+                            <tr @key="rowKey" class="@rowClass" @onclick="args => RowClick(item, args)" @ondblclick="args => RowDoubleClick(item, args)" role="@(AllowRowClick ? "button" : "")">
                                 @if (AllowDetailView)
                                 {
                                     <td class="text-center">
@@ -174,7 +175,7 @@
                             </tr>
                             @if (AllowDetailView)
                             {
-                                <tr class="collapse" id="@($"collape-{detailViewRowId}")">
+                                <tr @key="new DetailTableRowKey(rowKey)" class="collapse" id="@($"collape-{detailViewRowId}")">
                                     <td></td>
                                     @if (AllowSelection)
                                     {
diff --git a/blazorbootstrap/Components/Grid/Grid.razor.cs b/blazorbootstrap/Components/Grid/Grid.razor.cs
index e4ce77f84..c83bbdeaf 100644
--- a/blazorbootstrap/Components/Grid/Grid.razor.cs
+++ b/blazorbootstrap/Components/Grid/Grid.razor.cs
@@ -1060,4 +1060,5 @@ private void SetFilters(IEnumerable<FilterItem> filterItems)
     public Unit Unit { get; set; } = Unit.Px;
 
     #endregion
+    private sealed record DetailTableRowKey(object? RowKey) { }
 }