DataGrid: Features

Paging

Paging is handled automatically by the DataGrid. You also have some additional attributes to configure paging based on your requirements.
  • ShowPager to hide or show pagination controls
  • PageSize the maximum number of items for each page.
  • CurrentPage current page number.
  • PreviousPageButtonTemplate template for previous page button
  • NextPageButtonTemplate template for next page button
  • FirstPageButtonTemplate template for first page button
  • LastPageButtonTemplate template for last page button
  • PageButtonTemplate template for explicated page button with PageButtonContext as parameter

Sorting

All columns can be sorted automatically if the option Sortable is enabled on the column.

Use SortField if you would like to set a different field or property to be considered by the sorting mechanism on a certain column.

Editing

The grid can perform some basic CRUD operations on the supplied Data collection. To enable editing on data-grid just set the Editable attribute to true.

By default every time the Item is saved it will be automatically handled by the data-grid itself. That means that all its fields will be populated after the user clicks on Save button. If you want to change that, you can just disable it by setting the UseInternalEditing to false.

The grid can work in two different editing modes that can provide different user experiences.

EditMode:
  • Form editing is done in the internal DataGrid form
  • Inline editing is done in the current row
  • Popup editing is done in the the modal dialog
#First NameLast NameEmailSalary
4CoraConnCora27@yahoo.com84 414,66 €
6JessieWilkinsonJessie_Wilkinson@gmail.com78 566,12 €
8MaryannHilpertMaryann.Hilpert12@gmail.com89 153,38 €
10AngelinaWardAngelina42@gmail.com73 625,86 €
11KaraBrekkeKara.Brekke@hotmail.com58 321,87 €
1 - 5 van de 492 items
492 items
<Field>
    <FieldLabel>
        Edit Mode
    </FieldLabel>
    <FieldBody>
        <Select @bind-SelectedValue="@editMode">
            <SelectItem Value="DataGridEditMode.Form">Form</SelectItem>
            <SelectItem Value="DataGridEditMode.Inline">Inline</SelectItem>
            <SelectItem Value="DataGridEditMode.Popup">Popup</SelectItem>
        </Select>
    </FieldBody>
</Field>

<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          Editable
          Responsive
          ShowPager
          CommandMode="DataGridCommandMode.ButtonRow"
          EditMode="editMode">
    <DataGridColumns>
        <DataGridCommandColumn TItem="Employee" NewCommandAllowed="false" EditCommandAllowed="false" DeleteCommandAllowed="false"  >
            <SaveCommandTemplate>
                <Button ElementId="btnSave" Type="ButtonType.Submit" PreventDefaultOnSubmit Color="Color.Primary" Clicked="@context.Clicked">@context.LocalizationString</Button>
            </SaveCommandTemplate>
            <CancelCommandTemplate>
                <Button ElementId="btnCancel" Color="Color.Secondary" Clicked="@context.Clicked">@context.LocalizationString</Button>
            </CancelCommandTemplate>
        </DataGridCommandColumn>
        <DataGridColumn TItem="Employee" Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
        <DataGridColumn TItem="Employee" Field="@nameof(Employee.FirstName)" Caption="First Name" Editable="true" />
        <DataGridColumn TItem="Employee" Field="@nameof(Employee.LastName)" Caption="Last Name" Editable="true" />
        <DataGridColumn TItem="Employee" Field="@nameof(Employee.Email)" Caption="Email" Editable="true" />
        <DataGridColumn TItem="Employee" Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable="true">
            <EditTemplate>
                <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" />
            </EditTemplate>
        </DataGridColumn>
    </DataGridColumns>
    <ButtonRowTemplate>
        <Button Color="Color.Success" Clicked="context.NewCommand.Clicked">New</Button>
        <Button Color="Color.Primary" Disabled="(selectedEmployee is null)" Clicked="context.EditCommand.Clicked">Edit</Button>
        <Button Color="Color.Danger" Disabled="(selectedEmployee is null)" Clicked="context.DeleteCommand.Clicked">Delete</Button>
        <Button Color="Color.Link" Clicked="context.ClearFilterCommand.Clicked">Clear Filter</Button>
    </ButtonRowTemplate>
</DataGrid>
@code{
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private Employee selectedEmployee;
    private DataGridEditMode editMode = DataGridEditMode.Form;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

NewItemDefaultSetter

NewItemDefaultSetter function is used to set default values when new item is created and before the edit form is shown. It will only be evaluate, if DataGrid is editable.
#First NameLast NameEmailSalary
4CoraConnCora27@yahoo.com84 414,66 €
6JessieWilkinsonJessie_Wilkinson@gmail.com78 566,12 €
8MaryannHilpertMaryann.Hilpert12@gmail.com89 153,38 €
10AngelinaWardAngelina42@gmail.com73 625,86 €
11KaraBrekkeKara.Brekke@hotmail.com58 321,87 €
1 - 5 van de 492 items
492 items
<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          NewItemDefaultSetter="@OnEmployeeNewItemDefaultSetter"
          Editable
          Responsive
          ShowPager>
    <DataGridCommandColumn TItem="Employee" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.FirstName)" Caption="First Name" Editable="true" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.LastName)" Caption="Last Name" Editable="true" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Email)" Caption="Email" Editable="true" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable="true">
        <EditTemplate>
            <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" />
        </EditTemplate>
    </DataGridColumn>
</DataGrid>
@code{
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private Employee selectedEmployee;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }

    void OnEmployeeNewItemDefaultSetter( Employee employee )
    {
        employee.Salary = 100.0M;
        employee.IsActive = true;
    }
}

Cascading values

In some case you want to update a different cell in a DataGrid when you update a value. This can be achieved with an UpdateCell method. You have two ways of updating a cell:

  • by calling UpdateCell on the context inside of EditTemplate, or
  • by calling UpdateCellEditValue on the DataGrid instance

In the following example we’re simply calling context.UpdateCell with a field-name to change and a new value that we want it to assign:

SalaryTax
84 414,66 €21 103,67 €
78 566,12 €19 641,53 €
89 153,38 €22 288,35 €
73 625,86 €18 406,47 €
58 321,87 €14 580,47 €
1 - 5 van de 492 items
492 items
<DataGrid TItem="Employee"
          Data="@employeeList"
          Editable
          EditMode="DataGridEditMode.Inline"
          Responsive
          ShowPager>
    <DataGridCommandColumn TItem="Employee"></DataGridCommandColumn>
    <DataGridColumn TItem="Employee" Field="@nameof( Employee.Salary )" Caption="Salary" Editable DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")">
        <EditTemplate>
            <NumericEdit TValue="decimal"
                         Value="@((decimal)context.CellValue)"
                         ValueChanged="@( v => {
                            context.CellValue = v;
                            context.UpdateCell( nameof( Employee.Tax ), v * context.Item.TaxPercentage );
                         })" />
        </EditTemplate>
    </DataGridColumn>
    <DataGridColumn TItem="Employee" Field="@nameof( Employee.Tax )" Caption="Tax" Editable DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")">
        <EditTemplate>
            <NumericEdit TValue="decimal"
                         Value="@((decimal)context.CellValue)"
                         Disabled />
        </EditTemplate>
    </DataGridColumn>
</DataGrid>
@code {
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

Filtering

Use an attribute Filterable to enable or disable automatic filtering in grid component.

Default method for filtering is Contains. If you want to change it you can set the FilterMethod attribute on data grid. Supported methods are:

  • Contains search for any occurrence (default)
  • StartsWith search only the beginning
  • EndsWith search only the ending
  • Equals search must match the entire value
  • NotEquals opposite of Equals
Name
David
Mladen
John
Ana
Jessica
<DataGrid TItem="Employee"
          Data="@employeeList"
          Filterable
          FilterMethod="DataGridFilterMethod.StartsWith"
          Responsive>
    <DataGridColumn TItem="Employee" Field="@nameof( Employee.FirstName )" Caption="Name" Editable="false"></DataGridColumn>
</DataGrid>
@code{
    private List<Employee> employeeList = new() { new() { FirstName = "David" }, new() { FirstName = "Mladen" }, new() { FirstName = "John" }, new() { FirstName = "Ana" }, new() { FirstName = "Jessica" } };
}

Custom Filtering

Regular filter works on per field basis. To enable advanced search capabilities you can use an attribute CustomFilter. Filter API is fairly straightforward. All you need is to attach CustomFilter to a function and bind search value to TextEdit field. DataGrid will automatically respond to entered value.
Custom Filter:
Name
David
MLaden
John
Ana
Jessica
Custom Filter: <TextEdit @bind-Text="@customFilterValue" ></TextEdit>

<DataGrid TItem="Employee"
          Data="@employeeList"
          CustomFilter="@OnCustomFilter"
          Responsive>
    <DataGridColumn TItem="Employee" Field="@nameof( Employee.FirstName )" Caption="Name" Editable="false"></DataGridColumn>
</DataGrid>
@code{
    private List<Employee> employeeList = new() { new() { FirstName = "David" }, new() { FirstName = "MLaden" }, new() { FirstName = "John" }, new() { FirstName = "Ana" }, new() { FirstName = "Jessica" } };

    private string customFilterValue;

    private bool OnCustomFilter( Employee model )
    {
        // We want to accept empty value as valid or otherwise
        // datagrid will not show anything.
        if ( string.IsNullOrEmpty( customFilterValue ) )
            return true;

        return model.FirstName?.Contains( customFilterValue, StringComparison.OrdinalIgnoreCase ) == true;
    }

}

Custom Column Filtering

Similar to the DataGrid custom filtering it is also possible to use custom filtering on per-column basis.
NameGender
DavidM
MladenM
JohnM
AnaF
JessicaF
<DataGrid TItem="Employee"
          Data="@employeeList"
          Filterable
          Responsive>
    <DataGridColumn TItem="Employee" Field="@nameof( Employee.FirstName )" Caption="Name" Editable="false"></DataGridColumn>
    <DataGridSelectColumn CustomFilter="@OnGenderCustomFilter" TItem="Employee" Field="@nameof( Employee.Gender )" Caption="Gender" Editable="true">
        <FilterTemplate>
            <Select TValue="string" SelectedValue="@selectedGenderFilter" SelectedValueChanged="@(value => { selectedGenderFilter = value; context.TriggerFilterChange( selectedGenderFilter ); })">
                <SelectItem TValue="string" Value="@("*")">All</SelectItem>
                <SelectItem TValue="string" Value="@("M")">Male</SelectItem>
                <SelectItem TValue="string" Value="@("F")">Female</SelectItem>
                <SelectItem TValue="string" Value="@("D")">Diverse</SelectItem>
            </Select>
        </FilterTemplate>
    </DataGridSelectColumn>
</DataGrid>
@code{
    private List<Employee> employeeList = new() { new() { FirstName = "David", Gender = "M" }, new() { FirstName = "Mladen", Gender = "M" }, new() { FirstName = "John", Gender = "M" }, new() { FirstName = "Ana", Gender = "F" }, new() { FirstName = "Jessica", Gender = "F" } };

    string selectedGenderFilter;

    private bool OnGenderCustomFilter( object itemValue, object searchValue )
    {
        if ( searchValue is string genderFilter )
        {
            return genderFilter == "*" || genderFilter == itemValue?.ToString();
        }

        return true;
    }

}

Resizable

#First NameLast NameEmailSalary
4CoraConnCora27@yahoo.com84 414,66 €
6JessieWilkinsonJessie_Wilkinson@gmail.com78 566,12 €
8MaryannHilpertMaryann.Hilpert12@gmail.com89 153,38 €
10AngelinaWardAngelina42@gmail.com73 625,86 €
11KaraBrekkeKara.Brekke@hotmail.com58 321,87 €
<Field>
    <FieldLabel>
        Resize Mode
    </FieldLabel>
    <FieldBody>
        <Select @bind-SelectedValue="@resizeMode">
            <SelectItem Value="TableResizeMode.Header">Header</SelectItem>
            <SelectItem Value="TableResizeMode.Columns">Columns</SelectItem>
        </Select>
    </FieldBody>
</Field>

<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          Responsive
          Resizable
          ResizeMode="@resizeMode">
    <DataGridCommandColumn TItem="Employee" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Email)" Caption="Email" Editable />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable>
        <EditTemplate>
            <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" />
        </EditTemplate>
    </DataGridColumn>
</DataGrid>
@code {
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private Employee selectedEmployee;
    private TableResizeMode resizeMode = TableResizeMode.Header;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}

Fixed Header

#First NameLast NameEmailSalary
4CoraConnCora27@yahoo.com84 414,66 €
6JessieWilkinsonJessie_Wilkinson@gmail.com78 566,12 €
8MaryannHilpertMaryann.Hilpert12@gmail.com89 153,38 €
10AngelinaWardAngelina42@gmail.com73 625,86 €
11KaraBrekkeKara.Brekke@hotmail.com58 321,87 €
12YvetteFerryYvette22@gmail.com89 658,90 €
13PabloFriesenPablo_Friesen96@gmail.com77 090,27 €
14ErnestHomenickErnest_Homenick92@yahoo.com54 910,14 €
15LeslieWehnerLeslie_Wehner@hotmail.com78 930,58 €
16MiguelLynchMiguel.Lynch0@gmail.com65 348,06 €
17TommySwaniawskiTommy_Swaniawski@gmail.com92 326,27 €
18ViolaWildermanViola.Wilderman@yahoo.com76 575,00 €
19BrendaJacobsonBrenda_Jacobson55@gmail.com86 145,68 €
20RogerHerzogRoger_Herzog@gmail.com53 168,45 €
21CaseyWeberCasey90@yahoo.com56 257,49 €
22TaraSchoenTara_Schoen@yahoo.com72 637,29 €
23AlSanfordAl_Sanford1@yahoo.com88 870,12 €
24JillStokesJill.Stokes@yahoo.com59 252,89 €
25MarianArmstrongMarian_Armstrong@yahoo.com69 182,74 €
26JanieStantonJanie26@yahoo.com51 608,79 €
27DixieBlockDixie65@yahoo.com89 653,26 €
28TeresaDietrichTeresa.Dietrich@yahoo.com56 151,34 €
29ReneeHerzogRenee39@yahoo.com93 592,47 €
30DamonLubowitzDamon_Lubowitz@hotmail.com89 271,37 €
31CodyRauCody56@hotmail.com63 067,69 €
32EthelKassulkeEthel.Kassulke@yahoo.com92 175,30 €
33RudyWalshRudy_Walsh54@gmail.com76 356,17 €
34RossHauckRoss18@hotmail.com51 620,31 €
35OtisLittleOtis_Little28@hotmail.com77 906,94 €
36BenjaminFriesenBenjamin40@yahoo.com78 343,54 €
37MosesMosciskiMoses_Mosciski@gmail.com99 202,48 €
38KellieMurazikKellie_Murazik@gmail.com98 314,89 €
39NicholeKeeblerNichole69@gmail.com65 412,00 €
40BobbieRogahnBobbie.Rogahn7@yahoo.com52 889,16 €
41CharlieBorerCharlie.Borer68@hotmail.com50 448,59 €
42LuisRutherfordLuis.Rutherford@hotmail.com83 594,06 €
43JaredPfannerstillJared82@gmail.com54 282,76 €
44FloydSatterfieldFloyd96@yahoo.com59 157,17 €
45ClaudeParkerClaude_Parker55@gmail.com58 576,97 €
46DonaldDaughertyDonald.Daugherty@gmail.com66 692,86 €
47RolandBruenRoland5@yahoo.com98 404,23 €
48PaulineConroyPauline_Conroy@yahoo.com69 674,96 €
49LoraLockmanLora55@hotmail.com74 035,99 €
50JoeyKoelpinJoey_Koelpin@yahoo.com57 184,86 €
51StaceyGrahamStacey_Graham88@gmail.com88 562,39 €
52DaisyMedhurstDaisy75@yahoo.com51 011,13 €
53ErinCorwinErin_Corwin17@gmail.com70 013,81 €
54ArturoDenesikArturo.Denesik@gmail.com61 456,56 €
55CherylCollierCheryl.Collier@yahoo.com59 868,88 €
56AndresWilliamsonAndres34@yahoo.com74 180,71 €
57PhyllisWildermanPhyllis.Wilderman90@gmail.com59 518,29 €
58BillyWizaBilly84@gmail.com92 241,90 €
59WoodrowGibsonWoodrow_Gibson55@yahoo.com90 288,10 €
60CristinaHarrisCristina.Harris@yahoo.com81 762,53 €
61DarleneDanielDarlene.Daniel52@gmail.com74 142,55 €
62CourtneyFramiCourtney.Frami@yahoo.com68 435,70 €
63MaeFeeneyMae92@gmail.com65 623,26 €
64JoshDoyleJosh75@yahoo.com87 057,60 €
65GwenAbbottGwen.Abbott86@yahoo.com65 189,89 €
66MonaBeierMona8@gmail.com80 367,71 €
67MinnieCorwinMinnie_Corwin96@yahoo.com78 002,56 €
68DwightRunolfssonDwight99@gmail.com73 986,40 €
69BethBartellBeth.Bartell@yahoo.com85 841,65 €
70SteveSchulistSteve_Schulist@hotmail.com94 190,45 €
71PamGreenholtPam44@gmail.com75 695,28 €
72DarrelWilliamsonDarrel_Williamson@yahoo.com70 327,72 €
73RolandoSauerRolando_Sauer@hotmail.com84 971,22 €
74CesarSchaeferCesar79@yahoo.com92 704,04 €
75LuisLeannonLuis13@gmail.com61 167,01 €
76FannieWilliamsonFannie_Williamson@gmail.com94 194,50 €
77MariannePourosMarianne_Pouros60@hotmail.com71 394,54 €
78SpencerRogahnSpencer.Rogahn12@gmail.com55 993,84 €
79DonnieLuettgenDonnie_Luettgen@hotmail.com77 655,38 €
80BlancaBreitenbergBlanca77@hotmail.com75 633,97 €
81PatRohanPat_Rohan@gmail.com50 151,72 €
82VirginiaKassulkeVirginia_Kassulke@yahoo.com77 411,81 €
83LelaBreitenbergLela_Breitenberg44@hotmail.com53 894,64 €
84RandalKossRandal.Koss67@hotmail.com93 602,37 €
85KimberlyChristiansenKimberly_Christiansen2@hotmail.com65 089,52 €
86JeanBoyerJean42@hotmail.com99 805,01 €
87MurielShieldsMuriel.Shields12@gmail.com66 809,95 €
88MarcusEmmerichMarcus_Emmerich@yahoo.com99 401,27 €
89FaithNicolasFaith.Nicolas@yahoo.com50 439,25 €
90BoydDavisBoyd_Davis@gmail.com58 591,48 €
91WilburStiedemannWilbur29@gmail.com64 479,16 €
92RobertoStrackeRoberto_Stracke@yahoo.com57 007,18 €
93MindySmithamMindy.Smitham5@hotmail.com56 810,55 €
94DianneMaggioDianne.Maggio83@yahoo.com73 990,94 €
95MandyBahringerMandy55@hotmail.com69 018,94 €
96MarlonLednerMarlon.Ledner26@hotmail.com72 372,09 €
97LaverneSchusterLaverne.Schuster38@gmail.com84 767,07 €
98KendraCorkeryKendra_Corkery@gmail.com79 303,18 €
99ChrisBartonChris.Barton@yahoo.com68 642,57 €
100EdPriceEd.Price21@gmail.com84 665,20 €
101TraceyDurganTracey.Durgan3@hotmail.com63 539,54 €
102AlyssaGaylordAlyssa95@gmail.com92 963,65 €
103HelenMuellerHelen_Mueller@gmail.com51 704,43 €
104RonaldMoenRonald56@yahoo.com88 173,43 €
105GerardMcDermottGerard.McDermott@gmail.com79 616,46 €
106SamanthaZboncakSamantha_Zboncak@gmail.com75 298,13 €
<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          Responsive
          PageSize="100"
          FixedHeader
          FixedHeaderDataGridMaxHeight="300px">
    <DataGridCommandColumn TItem="Employee" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Email)" Caption="Email" Editable />
    <DataGridColumn TItem="Employee" Field="@nameof(Employee.Salary)" Caption="Salary" DisplayFormat="{0:C}" DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")" Editable>
        <EditTemplate>
            <NumericEdit TValue="decimal" Value="@((decimal)context.CellValue)" ValueChanged="@( v => context.CellValue = v)" />
        </EditTemplate>
    </DataGridColumn>
</DataGrid>
@code {
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private Employee selectedEmployee;

    protected override async Task OnInitializedAsync()
    {
        employeeList = await EmployeeData.GetDataAsync();
        await base.OnInitializedAsync();
    }
}