Blazor Grid - Data binding

Use Blazor Bootstrap grid component to display tabular data from the data source. And it supports client-side and server-side filtering, paging, and sorting.

Data parameter - Assign collection#

Assign a collection to the Data parameter to render the grid dynamically. The example below will render different department employees in the individual grid.

Product 1 - Research & Development Employees:

Product 2 - Research & Development Employees:

@foreach (var department in departments)
{
    <p>@department.Name Employees:</p>
    <Grid TItem="Employee1"
          Class="table table-hover border-top"
          Data="department.Employees">

        <GridColumns>
            <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
                @context.Id
            </GridColumn>
            <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="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">
                @context.IsActive
            </GridColumn>
        </GridColumns>

    </Grid>
}

@code {
    private List<Department> departments = new List<Department>()
    {
        new Department("Product 1 - Research & Development", 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 }
        }),
        new Department("Product 2 - Research & Development", new List<Employee1> {
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true }
        })
    };
}

Data parameter - Update collection#

You can update the collection assigned to the Data parameter. In the below example, the grid will render the updated collection.

Important

The Add Employee button click adds a new employee to the existing employees collection—so explicit grid refresh is required.

The Add Employee 2 button click creates a shallow copy of the employees collection and adds a new employee. This new collection is assigned to the employees variable. Now, the employees variable has a new reference. So the grid will refresh automatically. An explicit grid refresh call is not required.

<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="AddEmployee"> Add Employee </Button>
<Button Type="ButtonType.Button" Color="ButtonColor.Primary" @onclick="AddEmployee2"> Add Employee 2 </Button>

<Grid @ref="grid"
      TItem="Employee1"
      Class="table table-hover table-bordered table-striped mt-3"
      Data="employees">

    <GridColumns>
        <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
            @context.Id
        </GridColumn>
        <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="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">
            @context.IsActive
        </GridColumn>
    </GridColumns>

</Grid>

@code {
    Grid<Employee1> grid = default!;
    private List<Employee1>? employees;

    protected override void OnInitialized()
    {
        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 async Task AddEmployee()
    {
        // for the same employees collection, we are adding an object
        // explicit grid refresh required
        employees!.Add(CreateEmployee());
        await grid.RefreshDataAsync();
    }

    private void AddEmployee2()
    {
        // creates a shallow copy
        var emps = employees!.GetRange(0, employees.Count);
        emps.Add(CreateEmployee());
        // now employees variable has a new reference. So no need to refresh the grid explicitly
        // explicit grid refresh is not required
        employees = emps;
    }

    private Employee1 CreateEmployee()
    {
        var emp = new Employee1();
        emp.Id = employees!.Max(x => x.Id) + 1;
        emp.Name = $"Employee {emp.Id}";
        emp.Designation = $"QA Engineer {emp.Id}";
        emp.DOJ = new DateOnly(new Random().Next(1970, 2000), new Random().Next(1, 12), new Random().Next(1, 25));
        emp.IsActive = true;
        return emp;
    }
}

If you like Blazor Bootstrap, give it a star on GitHub!

Blazor Bootstrap

Designed and built with all the love in the world by the Blazor Bootstrap team with the help of our contributors.
Code licensed Apache License 2.0.
Currently v3.0.0.

Blazor Grid - Data binding

Data parameter - Assign collection#

Data parameter - Update collection#

Links

Guides

Community