From e6a235f1f6280ebf60519ac659d165c4abd9a4c9 Mon Sep 17 00:00:00 2001
From: Vikram Reddy <gvreddy04@gmail.com>
Date: Sun, 10 Nov 2024 19:02:30 +0530
Subject: [PATCH] Grid detail view - example updates

---
 .../Grid_Demo_14_A_DetailView.razor           |  41 +++----
 docs/docs/05-components/grid.mdx              | 112 +++++++++++-------
 2 files changed, 87 insertions(+), 66 deletions(-)

diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_A_DetailView.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_A_DetailView.razor
index a17d058ce..a0193f0a8 100644
--- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_A_DetailView.razor
+++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_A_DetailView.razor
@@ -1,16 +1,17 @@
 <Grid TItem="Product"
       Class="table table-hover border-top"
       Data="products"
-      AllowDetailView="true">
+      AllowDetailView="true"
+      AllowSorting="true">
 
     <GridColumns>
-        <GridColumn TItem="Product" HeaderText="Id" PropertyName="Id">
+        <GridColumn TItem="Product" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
             @context.Id
         </GridColumn>
-        <GridColumn TItem="Product" HeaderText="Employee Name" PropertyName="Name">
+        <GridColumn TItem="Product" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
             @context.Name
         </GridColumn>
-        <GridColumn TItem="Product" HeaderText="Active" PropertyName="IsActive">
+        <GridColumn TItem="Product" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
             @context.IsActive
         </GridColumn>
     </GridColumns>
@@ -44,25 +45,25 @@
 
 @code {
     private List<Product> products = new List<Product> {
-        new Product { Id = 1, Name = "Product 1", IsActive = true },
-        new Product { Id = 2, Name = "Product 2", IsActive = true },
-        new Product { Id = 3, Name = "Product 3", IsActive = true },
-        new Product { Id = 4, Name = "Product 4", IsActive = true },
-        new Product { Id = 5, Name = "Product 5", IsActive = true }
+        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 = 105, ProductId = 1, Description = "Ingredient 1", Unit = "UNIT1", Quantity = 350 },
-       new Ingredient { Id = 106, ProductId = 1, Description = "Ingredient 2", Unit = "UNIT1", Quantity = 600 },
-       new Ingredient { Id = 107, ProductId = 1, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
-       new Ingredient { Id = 108, ProductId = 1, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
-       new Ingredient { Id = 109, ProductId = 2, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
-       new Ingredient { Id = 110, ProductId = 2, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
-       new Ingredient { Id = 111, ProductId = 1, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
-       new Ingredient { Id = 112, ProductId = 2, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
-       new Ingredient { Id = 113, ProductId = 4, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
-       new Ingredient { Id = 114, ProductId = 5, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
-       new Ingredient { Id = 115, ProductId = 2, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
+       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);
diff --git a/docs/docs/05-components/grid.mdx b/docs/docs/05-components/grid.mdx
index 0435972fc..72d339839 100644
--- a/docs/docs/05-components/grid.mdx
+++ b/docs/docs/05-components/grid.mdx
@@ -3686,55 +3686,52 @@ Automatically hides the paging controls when the grid item count is less than or
 
 ### Detail View
 
-To enable detail view, set the `AllowDetailView` parameter to true. In the following example, existing `<GridColumn>` tags are nested under `<GridColumns>` tag to distinguish them from `<GridDetailView>`.
+To enable detail view, set the `AllowDetailView` parameter to **true**. In the following example, existing `<GridColumn>` tags are nested under `<GridColumns>` tag to distinguish them from `<GridDetailView>`.
 
-<img src="https://i.imgur.com/eetvhBB.png" alt="Blazor Bootstrap: Grid Component - Detail View" />
+<img src="https://i.imgur.com/iDKhgqC.png" alt="Blazor Bootstrap: Grid Component - Detail View" />
 
-```cshtml {4,24-45} showLineNumbers
-<Grid TItem="Employee1"
+```cshtml {4,19-42} showLineNumbers
+<Grid TItem="Product"
       Class="table table-hover border-top"
-      Data="employees"
-      AllowDetailView="true">
+      Data="products"
+      AllowDetailView="true"
+      AllowSorting="true">
 
     <GridColumns>
-        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
+        <GridColumn TItem="Product" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
             @context.Id
         </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
+        <GridColumn TItem="Product" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
             @context.Name
         </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
-            @context.Designation
-        </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
-            @context.DOJ
-        </GridColumn>
-        <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
+        <GridColumn TItem="Product" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
             @context.IsActive
         </GridColumn>
     </GridColumns>
 
-    <GridDetailView TItem="Employee1">
-        <div class="row">
-            <div class="col-2 fw-bold">Id</div>
-            <div class="col">@context.Id</div>
-        </div>
-        <div class="row">
-            <div class="col-2 fw-bold">Name</div>
-            <div class="col">@context.Name</div>
-        </div>
-        <div class="row">
-            <div class="col-2 fw-bold">Designation</div>
-            <div class="col">@context.Designation</div>
-        </div>
-        <div class="row">
-            <div class="col-2 fw-bold">DOJ</div>
-            <div class="col">@context.DOJ</div>
-        </div>
-        <div class="row">
-            <div class="col-2 fw-bold">IsActive</div>
-            <div class="col">@context.IsActive</div>
-        </div>
+    <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>
@@ -3742,22 +3739,45 @@ To enable detail view, set the `AllowDetailView` parameter to true. In the follo
 
 ```cshtml {} showLineNumbers
 @code {
-    private List<Employee1> employees = new List<Employee1> {
-        new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
-        new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
-        new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
-        new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
-        new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }
+    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 }
     };
 
-    public record class Employee1
+    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 string? Designation { get; set; }
-        public DateOnly DOJ { 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; }
+    }
 }
 ```
 
@@ -3846,7 +3866,7 @@ To create a nested grid, we first need to enable the detail view. To enable the
 </Grid>
 ```
 
-```cshtml {} showLineNumbers
+```cshtml {24} showLineNumbers
 @code {
     private List<Employee1> employees = new List<Employee1> {
         new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },