Blazorise DataGrid: Dynamic Data Binding

The Blazorise DataGrid component offers the ability to bind to dynamic data, providing enhanced flexibility for various applications.

Examples

Basic Example

To ensure the DataGrid correctly interprets the structure and type of your dynamic data during specific operations, such as creating new items or aggregating data, you need to define a representation within the NewItemCreator function. Below is an illustrative example.
#
First Name
Last Name
Email
City
Zip
Birth Date
Childrens
Gender
Salary
Active
1SamuelCollierSamuel.Collier62@gmail.comNew Lura91848-471426.08.19703M86 030,41 €
2IrvinZiemannIrvin.Ziemann@gmail.comModestomouth16505-840525.05.19743M61 781,31 €
3GeraldPollichGerald82@yahoo.comTheresashire2861229.04.19691M58 810,75 €
4CoraConnCora27@yahoo.comNorth Art10437-225312.02.19845D84 414,66 €
5AlfonsoD'AmoreAlfonso.DAmore@hotmail.comEast Carolefort87912-393306.11.19835F69 318,29 €
Total emails: 25781 793 183,29 €14
1 - 5 of 25 items
25 items
@using System.Dynamic

<DataGrid TItem="ExpandoObject"
          Data="inMemoryData"
          Responsive
          ShowPager
          ShowPageSizes
          PageSize="5"
          Editable
          EditMode="DataGridEditMode.Inline"
          NewItemCreator="NewItemCreator">
    <DataGridAggregates>
        <DataGridAggregate Field="Email" Aggregate="DataGridAggregateType.Count">
            <DisplayTemplate>
                @($"Total emails: {context.Value}")
            </DisplayTemplate>
        </DataGridAggregate>
        <DataGridAggregate Field="Salary" Aggregate="DataGridAggregateType.Sum" DisplayFormat="C" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo( "fr-FR" )" />
        <DataGridAggregate Field="IsActive" Aggregate="DataGridAggregateType.TrueCount" />
        <DataGridAggregate Field="Childrens" Aggregate="DataGridAggregateType.Sum" />
    </DataGridAggregates>
    <DataGridColumns>
        <DataGridCommandColumn />
        <DataGridColumn Editable TextAlignment="TextAlignment.Center" Field="@nameof( Employee.Id )" Caption="#" Width="Width.Px( 60 )" />
        <DataGridColumn Editable Field="FirstName" Caption="First Name" />
        <DataGridColumn Editable Field="LastName" Caption="Last Name" />
        <DataGridColumn Editable Field="Email" Caption="Email" />
        <DataGridColumn Editable Field="City" Caption="City">
            <CaptionTemplate>
                <Icon Name="IconName.City" /> @context.Caption
            </CaptionTemplate>
        </DataGridColumn>
        <DataGridColumn Editable Field="Zip" Caption="Zip" />
        <DataGridDateColumn Field="DateOfBirth" DisplayFormat="dd.MM.yyyy" Caption="Birth Date" Editable />
        <DataGridNumericColumn Field="Childrens" Caption="Childrens" ReverseSorting="true" Editable Filterable="false" />
        <DataGridSelectColumn Field="Gender" Caption="Gender" Editable Data="EmployeeData.Genders" ValueField="( x ) => ( (Gender)x ).Code" TextField="( x ) => ( (Gender)x ).Description" />
        <DataGridColumn Field="Salary" Caption="Salary" Editable Width="Width.Px( 140 )" DisplayFormat="C" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo( "fr-FR" )" TextAlignment="TextAlignment.End" />
        <DataGridCheckColumn Field="IsActive" Caption="Active" Editable Filterable="false">
            <DisplayTemplate>
                <Check TValue="bool" Value="@(((dynamic)context.Item).IsActive)" Disabled ReadOnly />
            </DisplayTemplate>
        </DataGridCheckColumn>
    </DataGridColumns>
</DataGrid>

@code {

    private readonly EmployeeData EmployeeData = new();

    private List<ExpandoObject> inMemoryData;

    protected override async Task OnInitializedAsync()
    {
        inMemoryData = new();
        var data = ( await EmployeeData.GetDataAsync().ConfigureAwait( false ) ).Take( 25 );

        foreach ( var item in data )
        {

            IDictionary<string, object> expando = new ExpandoObject();

            foreach ( var property in typeof( Employee ).GetProperties() )
            {
                expando.Add( property.Name, property.GetValue( item ) );
            }
            inMemoryData.Add( (ExpandoObject)expando );
        }


        await base.OnInitializedAsync();
    }

    private ExpandoObject NewItemCreator()
    {
        IDictionary<string, object> expando = new ExpandoObject();

        foreach ( var property in typeof( Employee ).GetProperties() )
        {
            expando.Add( property.Name, property.PropertyType.IsValueType ? Activator.CreateInstance( property.PropertyType ) : null );
        }

        return (ExpandoObject)expando;
    }
}

Generated Columns

The Blazorise DataGrid also supports auto-generating columns based on the data structure. This feature simplifies the process of displaying data by automatically creating columns that match the properties of the bound data objects.

Auto-generated columns support nullable data. If your data includes null values, ensure you provide a NewItemCreator. DataGrid requires an item with non-null values to properly generate the columns.

1 - 5 of 25 items
25 items
@using System.Dynamic

<DataGrid TItem="ExpandoObject"
          Data="inMemoryData"
          Responsive
          ShowPager
          ShowPageSizes
          PageSize="5"
          Editable
          EditMode="DataGridEditMode.Inline"
          NewItemCreator="NewItemCreator" />

@code {
    private readonly EmployeeData EmployeeData = new();

    private List<ExpandoObject> inMemoryData;

    protected override async Task OnInitializedAsync()
    {
        inMemoryData = new();
        var data = ( await EmployeeData.GetDataAsync().ConfigureAwait( false ) ).Take( 25 );

        foreach ( var item in data )
        {

            IDictionary<string, object> expando = new ExpandoObject();

            foreach ( var property in typeof( Employee ).GetProperties() )
            {
                expando.Add( property.Name, property.GetValue( item ) );
            }
            inMemoryData.Add( (ExpandoObject)expando );
        }


        await base.OnInitializedAsync();
    }

    private ExpandoObject NewItemCreator()
    {
        IDictionary<string, object> expando = new ExpandoObject();

        foreach ( var property in typeof( Employee ).GetProperties() )
        {
            expando.Add( property.Name,
                property.PropertyType switch
                {
                    { } t when t == typeof( string ) => "",
                    { IsValueType: true } => Activator.CreateInstance( property.PropertyType ) ?? "",
                    _ => "" //better than null
                } );
        }

        return (ExpandoObject)expando;
    }
}

API

See the API reference for the parameters, events, methods, and related types available to the components covered on this page.

On this page