Skip to content

Commit 8ed7ada

Browse files
gvreddy04gvreddy04
authored
Grid detail view - example updates (#937)
1 parent 13009ec commit 8ed7ada

File tree

2 files changed

+87
-66
lines changed

2 files changed

+87
-66
lines changed

‎BlazorBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_A_DetailView.razor‎

Lines changed: 21 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
<Grid TItem="Product"
22
Class="table table-hover border-top"
33
Data="products"
4-
AllowDetailView="true">
4+
AllowDetailView="true"
5+
AllowSorting="true">
56

67
<GridColumns>
7-
<GridColumn TItem="Product" HeaderText="Id" PropertyName="Id">
8+
<GridColumn TItem="Product" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
89
@context.Id
910
</GridColumn>
10-
<GridColumn TItem="Product" HeaderText="Employee Name" PropertyName="Name">
11+
<GridColumn TItem="Product" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
1112
@context.Name
1213
</GridColumn>
13-
<GridColumn TItem="Product" HeaderText="Active" PropertyName="IsActive">
14+
<GridColumn TItem="Product" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
1415
@context.IsActive
1516
</GridColumn>
1617
</GridColumns>
@@ -44,25 +45,25 @@
4445

4546
@code {
4647
private List<Product> products = new List<Product> {
47-
new Product { Id = 1, Name = "Product 1", IsActive = true },
48-
new Product { Id = 2, Name = "Product 2", IsActive = true },
49-
new Product { Id = 3, Name = "Product 3", IsActive = true },
50-
new Product { Id = 4, Name = "Product 4", IsActive = true },
51-
new Product { Id = 5, Name = "Product 5", IsActive = true }
48+
new Product { Id = 10, Name = "Product 10", IsActive = true },
49+
new Product { Id = 20, Name = "Product 20", IsActive = true },
50+
new Product { Id = 30, Name = "Product 30", IsActive = true },
51+
new Product { Id = 40, Name = "Product 40", IsActive = true },
52+
new Product { Id = 50, Name = "Product 50", IsActive = true }
5253
};
5354

5455
private List<Ingredient> ingredients = new List<Ingredient> {
55-
new Ingredient { Id = 105, ProductId = 1, Description = "Ingredient 1", Unit = "UNIT1", Quantity = 350 },
56-
new Ingredient { Id = 106, ProductId = 1, Description = "Ingredient 2", Unit = "UNIT1", Quantity = 600 },
57-
new Ingredient { Id = 107, ProductId = 1, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
58-
new Ingredient { Id = 108, ProductId = 1, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
59-
new Ingredient { Id = 109, ProductId = 2, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
60-
new Ingredient { Id = 110, ProductId = 2, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
61-
new Ingredient { Id = 111, ProductId = 1, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
62-
new Ingredient { Id = 112, ProductId = 2, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
63-
new Ingredient { Id = 113, ProductId = 4, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
64-
new Ingredient { Id = 114, ProductId = 5, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
65-
new Ingredient { Id = 115, ProductId = 2, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
56+
new Ingredient { Id = 10105, ProductId = 10, Description = "Ingredient 1", Unit = "UNIT1", Quantity = 350 },
57+
new Ingredient { Id = 10106, ProductId = 10, Description = "Ingredient 2", Unit = "UNIT1", Quantity = 600 },
58+
new Ingredient { Id = 10107, ProductId = 10, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
59+
new Ingredient { Id = 10108, ProductId = 10, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
60+
new Ingredient { Id = 20109, ProductId = 20, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
61+
new Ingredient { Id = 20110, ProductId = 20, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
62+
new Ingredient { Id = 10111, ProductId = 10, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
63+
new Ingredient { Id = 20112, ProductId = 20, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
64+
new Ingredient { Id = 40113, ProductId = 40, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
65+
new Ingredient { Id = 50114, ProductId = 50, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
66+
new Ingredient { Id = 20115, ProductId = 20, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
6667
};
6768

6869
private IEnumerable<Ingredient> GetIngredients(int productId) => ingredients.Where(i => i.ProductId == productId);

‎docs/docs/05-components/grid.mdx‎

Lines changed: 66 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -3686,78 +3686,98 @@ Automatically hides the paging controls when the grid item count is less than or
36863686

36873687
### Detail View
36883688

3689-
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>`.
3689+
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>`.
36903690

3691-
<img src="https://i.imgur.com/eetvhBB.png" alt="Blazor Bootstrap: Grid Component - Detail View" />
3691+
<img src="https://i.imgur.com/iDKhgqC.png" alt="Blazor Bootstrap: Grid Component - Detail View" />
36923692

3693-
```cshtml {4,24-45} showLineNumbers
3694-
<Grid TItem="Employee1"
3693+
```cshtml {4,19-42} showLineNumbers
3694+
<Grid TItem="Product"
36953695
Class="table table-hover border-top"
3696-
Data="employees"
3697-
AllowDetailView="true">
3696+
Data="products"
3697+
AllowDetailView="true"
3698+
AllowSorting="true">
36983699
36993700
<GridColumns>
3700-
<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
3701+
<GridColumn TItem="Product" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
37013702
@context.Id
37023703
</GridColumn>
3703-
<GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name">
3704+
<GridColumn TItem="Product" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
37043705
@context.Name
37053706
</GridColumn>
3706-
<GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation">
3707-
@context.Designation
3708-
</GridColumn>
3709-
<GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ">
3710-
@context.DOJ
3711-
</GridColumn>
3712-
<GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive">
3707+
<GridColumn TItem="Product" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
37133708
@context.IsActive
37143709
</GridColumn>
37153710
</GridColumns>
37163711
3717-
<GridDetailView TItem="Employee1">
3718-
<div class="row">
3719-
<div class="col-2 fw-bold">Id</div>
3720-
<div class="col">@context.Id</div>
3721-
</div>
3722-
<div class="row">
3723-
<div class="col-2 fw-bold">Name</div>
3724-
<div class="col">@context.Name</div>
3725-
</div>
3726-
<div class="row">
3727-
<div class="col-2 fw-bold">Designation</div>
3728-
<div class="col">@context.Designation</div>
3729-
</div>
3730-
<div class="row">
3731-
<div class="col-2 fw-bold">DOJ</div>
3732-
<div class="col">@context.DOJ</div>
3733-
</div>
3734-
<div class="row">
3735-
<div class="col-2 fw-bold">IsActive</div>
3736-
<div class="col">@context.IsActive</div>
3737-
</div>
3712+
<GridDetailView TItem="Product">
3713+
3714+
<Grid TItem="Ingredient"
3715+
Class="table table-hover border-top"
3716+
Data="GetIngredients(context.Id)">
3717+
3718+
<GridColumns>
3719+
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Id" PropertyName="Id">
3720+
@emp1.Id
3721+
</GridColumn>
3722+
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Description" PropertyName="Description">
3723+
@emp1.Description
3724+
</GridColumn>
3725+
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Unit" PropertyName="Unit">
3726+
@emp1.Unit
3727+
</GridColumn>
3728+
<GridColumn TItem="Ingredient" Context="emp1" HeaderText="Quantity" PropertyName="Quantity">
3729+
@emp1.Quantity
3730+
</GridColumn>
3731+
</GridColumns>
3732+
3733+
</Grid>
3734+
37383735
</GridDetailView>
37393736
37403737
</Grid>
37413738
```
37423739

37433740
```cshtml {} showLineNumbers
37443741
@code {
3745-
private List<Employee1> employees = new List<Employee1> {
3746-
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
3747-
new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
3748-
new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
3749-
new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
3750-
new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }
3742+
private List<Product> products = new List<Product> {
3743+
new Product { Id = 10, Name = "Product 10", IsActive = true },
3744+
new Product { Id = 20, Name = "Product 20", IsActive = true },
3745+
new Product { Id = 30, Name = "Product 30", IsActive = true },
3746+
new Product { Id = 40, Name = "Product 40", IsActive = true },
3747+
new Product { Id = 50, Name = "Product 50", IsActive = true }
37513748
};
37523749
3753-
public record class Employee1
3750+
private List<Ingredient> ingredients = new List<Ingredient> {
3751+
new Ingredient { Id = 10105, ProductId = 10, Description = "Ingredient 1", Unit = "UNIT1", Quantity = 350 },
3752+
new Ingredient { Id = 10106, ProductId = 10, Description = "Ingredient 2", Unit = "UNIT1", Quantity = 600 },
3753+
new Ingredient { Id = 10107, ProductId = 10, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
3754+
new Ingredient { Id = 10108, ProductId = 10, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
3755+
new Ingredient { Id = 20109, ProductId = 20, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
3756+
new Ingredient { Id = 20110, ProductId = 20, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
3757+
new Ingredient { Id = 10111, ProductId = 10, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
3758+
new Ingredient { Id = 20112, ProductId = 20, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
3759+
new Ingredient { Id = 40113, ProductId = 40, Description = "Ingredient 3", Unit = "UNIT2", Quantity = 13 },
3760+
new Ingredient { Id = 50114, ProductId = 50, Description = "Ingredient 4", Unit = "UNIT3", Quantity = 25 },
3761+
new Ingredient { Id = 20115, ProductId = 20, Description = "Ingredient 5", Unit = "UNIT1", Quantity = 750 },
3762+
};
3763+
3764+
private IEnumerable<Ingredient> GetIngredients(int productId) => ingredients.Where(i => i.ProductId == productId);
3765+
3766+
public record class Product
37543767
{
37553768
public int Id { get; set; }
37563769
public string? Name { get; set; }
3757-
public string? Designation { get; set; }
3758-
public DateOnly DOJ { get; set; }
37593770
public bool IsActive { get; set; }
37603771
}
3772+
3773+
public record class Ingredient
3774+
{
3775+
public int Id { get; set; }
3776+
public int ProductId { get; set; }
3777+
public string? Description { get; set; }
3778+
public string? Unit { get; set; }
3779+
public int Quantity { get; set; }
3780+
}
37613781
}
37623782
```
37633783

@@ -3846,7 +3866,7 @@ To create a nested grid, we first need to enable the detail view. To enable the
38463866
</Grid>
38473867
```
38483868

3849-
```cshtml {} showLineNumbers
3869+
```cshtml {24} showLineNumbers
38503870
@code {
38513871
private List<Employee1> employees = new List<Employee1> {
38523872
new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },

0 commit comments

Comments
 (0)