Skip to content

Commit

Permalink
Grid detail view - example updates (#937)
Browse files Browse the repository at this point in the history
  • Loading branch information
@gvreddy04
gvreddy04 authored Nov 10, 2024
1 parent 13009ec commit 8ed7ada
Show file tree
Hide file tree
Showing 2 changed files with 87 additions and 66 deletions.
41 changes: 21 additions & 20 deletions ...orBootstrap.Demo.RCL/Components/Pages/Grid/14-detail-view/Grid_Demo_14_A_DetailView.razor
View file
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -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);
Expand Down
112 changes: 66 additions & 46 deletions docs/docs/05-components/grid.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3686,78 +3686,98 @@ 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>
```

```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; }
}
}
```

Expand Down Expand Up @@ -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 },
Expand Down

0 comments on commit 8ed7ada

Please sign in to comment.