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

Edit Mode

#	First Name	Last Name	Email	Salary
2	Irvin	Ziemann	Irvin.Ziemann@gmail.com	61 781,31 €
4	Cora	Conn	Cora27@yahoo.com	84 414,66 €
5	Alfonso	D'Amore	Alfonso.DAmore@hotmail.com	69 318,29 €
6	Jessie	Wilkinson	Jessie_Wilkinson@gmail.com	78 566,12 €
7	Gregory	Renner	Gregory63@hotmail.com	57 456,82 €

First
Prev
1
2
3
4
5
Next
Last

1 - 5 of 498 items

498 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  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 Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
        <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
        <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
        <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable />
        <DataGridColumn 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>
    </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 Name	Last Name	Email	Salary
2	Irvin	Ziemann	Irvin.Ziemann@gmail.com	61 781,31 €
4	Cora	Conn	Cora27@yahoo.com	84 414,66 €
5	Alfonso	D'Amore	Alfonso.DAmore@hotmail.com	69 318,29 €
6	Jessie	Wilkinson	Jessie_Wilkinson@gmail.com	78 566,12 €
7	Gregory	Renner	Gregory63@hotmail.com	57 456,82 €

First
Prev
1
2
3
4
5
Next
Last

1 - 5 of 498 items

498 items

<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          NewItemDefaultSetter="@OnEmployeeNewItemDefaultSetter"
          Editable
          Responsive
          ShowPager>
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
    <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable />
    <DataGridColumn 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();
    }

    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:

	Salary	Tax
	61 781,31 €	15 445,33 €
	84 414,66 €	21 103,67 €
	69 318,29 €	17 329,57 €
	78 566,12 €	19 641,53 €
	57 456,82 €	14 364,21 €

First
Prev
1
2
3
4
5
Next
Last

1 - 5 of 498 items

498 items

<DataGrid TItem="Employee"
          Data="@employeeList"
          Editable
          EditMode="DataGridEditMode.Inline"
          Responsive
          ShowPager>
    <DataGridCommandColumn />
    <DataGridColumn 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 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 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 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 a per-column basis. You can define your editor with custom filtering to filter column values. You can see the dropdown menu to filter by gender in the following example by specifying <FilterTemplate> on DataGridColumn.

Name	Gender
David	M
Mladen	M
John	M
Ana	F
Jessica	F

<DataGrid TItem="Employee"
          Data="@employeeList"
          Filterable
          Responsive>
    <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="Name" Editable="false"></DataGridColumn>
    <DataGridSelectColumn CustomFilter="@OnGenderCustomFilter" Field="@nameof( Employee.Gender )" Caption="Gender" Editable>
        <FilterTemplate>
            <Select TValue="string" SelectedValue="@selectedGenderFilter" SelectedValueChanged="@(value => { selectedGenderFilter = value; context.TriggerFilterChange( selectedGenderFilter ); })">
                <SelectItem Value="@("*")">All</SelectItem>
                <SelectItem Value="@("M")">Male</SelectItem>
                <SelectItem Value="@("F")">Female</SelectItem>
                <SelectItem 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

Resize Mode

#	First Name	Last Name	Email	Salary
2	Irvin	Ziemann	Irvin.Ziemann@gmail.com	61 781,31 €
4	Cora	Conn	Cora27@yahoo.com	84 414,66 €
5	Alfonso	D'Amore	Alfonso.DAmore@hotmail.com	69 318,29 €
6	Jessie	Wilkinson	Jessie_Wilkinson@gmail.com	78 566,12 €
7	Gregory	Renner	Gregory63@hotmail.com	57 456,82 €

<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 />
    <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
    <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable />
    <DataGridColumn 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 Name	Last Name	Email	Salary
2	Irvin	Ziemann	Irvin.Ziemann@gmail.com	61 781,31 €
4	Cora	Conn	Cora27@yahoo.com	84 414,66 €
5	Alfonso	D'Amore	Alfonso.DAmore@hotmail.com	69 318,29 €
6	Jessie	Wilkinson	Jessie_Wilkinson@gmail.com	78 566,12 €
7	Gregory	Renner	Gregory63@hotmail.com	57 456,82 €
8	Maryann	Hilpert	Maryann.Hilpert12@gmail.com	89 153,38 €
9	Merle	Pacocha	Merle3@gmail.com	55 349,94 €
10	Angelina	Ward	Angelina42@gmail.com	73 625,86 €
11	Kara	Brekke	Kara.Brekke@hotmail.com	58 321,87 €
12	Yvette	Ferry	Yvette22@gmail.com	89 658,90 €
13	Pablo	Friesen	Pablo_Friesen96@gmail.com	77 090,27 €
14	Ernest	Homenick	Ernest_Homenick92@yahoo.com	54 910,14 €
15	Leslie	Wehner	Leslie_Wehner@hotmail.com	78 930,58 €
16	Miguel	Lynch	Miguel.Lynch0@gmail.com	65 348,06 €
17	Tommy	Swaniawski	Tommy_Swaniawski@gmail.com	92 326,27 €
18	Viola	Wilderman	Viola.Wilderman@yahoo.com	76 575,00 €
19	Brenda	Jacobson	Brenda_Jacobson55@gmail.com	86 145,68 €
20	Roger	Herzog	Roger_Herzog@gmail.com	53 168,45 €
21	Casey	Weber	Casey90@yahoo.com	56 257,49 €
22	Tara	Schoen	Tara_Schoen@yahoo.com	72 637,29 €
23	Al	Sanford	Al_Sanford1@yahoo.com	88 870,12 €
24	Jill	Stokes	Jill.Stokes@yahoo.com	59 252,89 €
25	Marian	Armstrong	Marian_Armstrong@yahoo.com	69 182,74 €
26	Janie	Stanton	Janie26@yahoo.com	51 608,79 €
27	Dixie	Block	Dixie65@yahoo.com	89 653,26 €
28	Teresa	Dietrich	Teresa.Dietrich@yahoo.com	56 151,34 €
29	Renee	Herzog	Renee39@yahoo.com	93 592,47 €
30	Damon	Lubowitz	Damon_Lubowitz@hotmail.com	89 271,37 €
31	Cody	Rau	Cody56@hotmail.com	63 067,69 €
32	Ethel	Kassulke	Ethel.Kassulke@yahoo.com	92 175,30 €
33	Rudy	Walsh	Rudy_Walsh54@gmail.com	76 356,17 €
34	Ross	Hauck	Ross18@hotmail.com	51 620,31 €
35	Otis	Little	Otis_Little28@hotmail.com	77 906,94 €
36	Benjamin	Friesen	Benjamin40@yahoo.com	78 343,54 €
37	Moses	Mosciski	Moses_Mosciski@gmail.com	99 202,48 €
38	Kellie	Murazik	Kellie_Murazik@gmail.com	98 314,89 €
39	Nichole	Keebler	Nichole69@gmail.com	65 412,00 €
40	Bobbie	Rogahn	Bobbie.Rogahn7@yahoo.com	52 889,16 €
41	Charlie	Borer	Charlie.Borer68@hotmail.com	50 448,59 €
42	Luis	Rutherford	Luis.Rutherford@hotmail.com	83 594,06 €
43	Jared	Pfannerstill	Jared82@gmail.com	54 282,76 €
44	Floyd	Satterfield	Floyd96@yahoo.com	59 157,17 €
45	Claude	Parker	Claude_Parker55@gmail.com	58 576,97 €
46	Donald	Daugherty	Donald.Daugherty@gmail.com	66 692,86 €
47	Roland	Bruen	Roland5@yahoo.com	98 404,23 €
48	Pauline	Conroy	Pauline_Conroy@yahoo.com	69 674,96 €
49	Lora	Lockman	Lora55@hotmail.com	74 035,99 €
50	Joey	Koelpin	Joey_Koelpin@yahoo.com	57 184,86 €
51	Stacey	Graham	Stacey_Graham88@gmail.com	88 562,39 €
52	Daisy	Medhurst	Daisy75@yahoo.com	51 011,13 €
53	Erin	Corwin	Erin_Corwin17@gmail.com	70 013,81 €
54	Arturo	Denesik	Arturo.Denesik@gmail.com	61 456,56 €
55	Cheryl	Collier	Cheryl.Collier@yahoo.com	59 868,88 €
56	Andres	Williamson	Andres34@yahoo.com	74 180,71 €
57	Phyllis	Wilderman	Phyllis.Wilderman90@gmail.com	59 518,29 €
58	Billy	Wiza	Billy84@gmail.com	92 241,90 €
59	Woodrow	Gibson	Woodrow_Gibson55@yahoo.com	90 288,10 €
60	Cristina	Harris	Cristina.Harris@yahoo.com	81 762,53 €
61	Darlene	Daniel	Darlene.Daniel52@gmail.com	74 142,55 €
62	Courtney	Frami	Courtney.Frami@yahoo.com	68 435,70 €
63	Mae	Feeney	Mae92@gmail.com	65 623,26 €
64	Josh	Doyle	Josh75@yahoo.com	87 057,60 €
65	Gwen	Abbott	Gwen.Abbott86@yahoo.com	65 189,89 €
66	Mona	Beier	Mona8@gmail.com	80 367,71 €
67	Minnie	Corwin	Minnie_Corwin96@yahoo.com	78 002,56 €
68	Dwight	Runolfsson	Dwight99@gmail.com	73 986,40 €
69	Beth	Bartell	Beth.Bartell@yahoo.com	85 841,65 €
70	Steve	Schulist	Steve_Schulist@hotmail.com	94 190,45 €
71	Pam	Greenholt	Pam44@gmail.com	75 695,28 €
72	Darrel	Williamson	Darrel_Williamson@yahoo.com	70 327,72 €
73	Rolando	Sauer	Rolando_Sauer@hotmail.com	84 971,22 €
74	Cesar	Schaefer	Cesar79@yahoo.com	92 704,04 €
75	Luis	Leannon	Luis13@gmail.com	61 167,01 €
76	Fannie	Williamson	Fannie_Williamson@gmail.com	94 194,50 €
77	Marianne	Pouros	Marianne_Pouros60@hotmail.com	71 394,54 €
78	Spencer	Rogahn	Spencer.Rogahn12@gmail.com	55 993,84 €
79	Donnie	Luettgen	Donnie_Luettgen@hotmail.com	77 655,38 €
80	Blanca	Breitenberg	Blanca77@hotmail.com	75 633,97 €
81	Pat	Rohan	Pat_Rohan@gmail.com	50 151,72 €
82	Virginia	Kassulke	Virginia_Kassulke@yahoo.com	77 411,81 €
83	Lela	Breitenberg	Lela_Breitenberg44@hotmail.com	53 894,64 €
84	Randal	Koss	Randal.Koss67@hotmail.com	93 602,37 €
85	Kimberly	Christiansen	Kimberly_Christiansen2@hotmail.com	65 089,52 €
86	Jean	Boyer	Jean42@hotmail.com	99 805,01 €
87	Muriel	Shields	Muriel.Shields12@gmail.com	66 809,95 €
88	Marcus	Emmerich	Marcus_Emmerich@yahoo.com	99 401,27 €
89	Faith	Nicolas	Faith.Nicolas@yahoo.com	50 439,25 €
90	Boyd	Davis	Boyd_Davis@gmail.com	58 591,48 €
91	Wilbur	Stiedemann	Wilbur29@gmail.com	64 479,16 €
92	Roberto	Stracke	Roberto_Stracke@yahoo.com	57 007,18 €
93	Mindy	Smitham	Mindy.Smitham5@hotmail.com	56 810,55 €
94	Dianne	Maggio	Dianne.Maggio83@yahoo.com	73 990,94 €
95	Mandy	Bahringer	Mandy55@hotmail.com	69 018,94 €
96	Marlon	Ledner	Marlon.Ledner26@hotmail.com	72 372,09 €
97	Laverne	Schuster	Laverne.Schuster38@gmail.com	84 767,07 €
98	Kendra	Corkery	Kendra_Corkery@gmail.com	79 303,18 €
99	Chris	Barton	Chris.Barton@yahoo.com	68 642,57 €
100	Ed	Price	Ed.Price21@gmail.com	84 665,20 €
101	Tracey	Durgan	Tracey.Durgan3@hotmail.com	63 539,54 €
102	Alyssa	Gaylord	Alyssa95@gmail.com	92 963,65 €

<DataGrid TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          Responsive
          PageSize="100"
          FixedHeader
          FixedHeaderDataGridMaxHeight="300px">
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
    <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable />
    <DataGridColumn 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();
    }
}

Scroll To

Scroll to API is available when the DataGrid FixedHeader or Virtualize is set.

#	First Name	Last Name	Email	Salary
2	Irvin	Ziemann	Irvin.Ziemann@gmail.com	61 781,31 €
4	Cora	Conn	Cora27@yahoo.com	84 414,66 €
5	Alfonso	D'Amore	Alfonso.DAmore@hotmail.com	69 318,29 €
6	Jessie	Wilkinson	Jessie_Wilkinson@gmail.com	78 566,12 €
7	Gregory	Renner	Gregory63@hotmail.com	57 456,82 €
8	Maryann	Hilpert	Maryann.Hilpert12@gmail.com	89 153,38 €
9	Merle	Pacocha	Merle3@gmail.com	55 349,94 €
10	Angelina	Ward	Angelina42@gmail.com	73 625,86 €
11	Kara	Brekke	Kara.Brekke@hotmail.com	58 321,87 €
12	Yvette	Ferry	Yvette22@gmail.com	89 658,90 €
13	Pablo	Friesen	Pablo_Friesen96@gmail.com	77 090,27 €
14	Ernest	Homenick	Ernest_Homenick92@yahoo.com	54 910,14 €
15	Leslie	Wehner	Leslie_Wehner@hotmail.com	78 930,58 €
16	Miguel	Lynch	Miguel.Lynch0@gmail.com	65 348,06 €
17	Tommy	Swaniawski	Tommy_Swaniawski@gmail.com	92 326,27 €
18	Viola	Wilderman	Viola.Wilderman@yahoo.com	76 575,00 €
19	Brenda	Jacobson	Brenda_Jacobson55@gmail.com	86 145,68 €
20	Roger	Herzog	Roger_Herzog@gmail.com	53 168,45 €
21	Casey	Weber	Casey90@yahoo.com	56 257,49 €
22	Tara	Schoen	Tara_Schoen@yahoo.com	72 637,29 €
23	Al	Sanford	Al_Sanford1@yahoo.com	88 870,12 €
24	Jill	Stokes	Jill.Stokes@yahoo.com	59 252,89 €
25	Marian	Armstrong	Marian_Armstrong@yahoo.com	69 182,74 €
26	Janie	Stanton	Janie26@yahoo.com	51 608,79 €
27	Dixie	Block	Dixie65@yahoo.com	89 653,26 €
28	Teresa	Dietrich	Teresa.Dietrich@yahoo.com	56 151,34 €
29	Renee	Herzog	Renee39@yahoo.com	93 592,47 €
30	Damon	Lubowitz	Damon_Lubowitz@hotmail.com	89 271,37 €
31	Cody	Rau	Cody56@hotmail.com	63 067,69 €
32	Ethel	Kassulke	Ethel.Kassulke@yahoo.com	92 175,30 €
33	Rudy	Walsh	Rudy_Walsh54@gmail.com	76 356,17 €
34	Ross	Hauck	Ross18@hotmail.com	51 620,31 €
35	Otis	Little	Otis_Little28@hotmail.com	77 906,94 €
36	Benjamin	Friesen	Benjamin40@yahoo.com	78 343,54 €
37	Moses	Mosciski	Moses_Mosciski@gmail.com	99 202,48 €
38	Kellie	Murazik	Kellie_Murazik@gmail.com	98 314,89 €
39	Nichole	Keebler	Nichole69@gmail.com	65 412,00 €
40	Bobbie	Rogahn	Bobbie.Rogahn7@yahoo.com	52 889,16 €
41	Charlie	Borer	Charlie.Borer68@hotmail.com	50 448,59 €
42	Luis	Rutherford	Luis.Rutherford@hotmail.com	83 594,06 €
43	Jared	Pfannerstill	Jared82@gmail.com	54 282,76 €
44	Floyd	Satterfield	Floyd96@yahoo.com	59 157,17 €
45	Claude	Parker	Claude_Parker55@gmail.com	58 576,97 €
46	Donald	Daugherty	Donald.Daugherty@gmail.com	66 692,86 €
47	Roland	Bruen	Roland5@yahoo.com	98 404,23 €
48	Pauline	Conroy	Pauline_Conroy@yahoo.com	69 674,96 €
49	Lora	Lockman	Lora55@hotmail.com	74 035,99 €
50	Joey	Koelpin	Joey_Koelpin@yahoo.com	57 184,86 €
51	Stacey	Graham	Stacey_Graham88@gmail.com	88 562,39 €
52	Daisy	Medhurst	Daisy75@yahoo.com	51 011,13 €

First
Prev
1
2
3
4
5
Next
Last

1 - 50 of 498 items

498 items

<Button Size="Size.Small" Color="Color.Primary" Clicked="@ScrollToRow">Scroll To Row</Button>
<Button Size="Size.Small" Color="Color.Primary" Clicked="@ScrollToPixels">Scroll To Pixels</Button>

<DataGrid @ref="dataGridRef"
          TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          Responsive
          ShowPager
          FixedHeader
          FixedHeaderDataGridMaxHeight="250px"
          PageSize="50">
    <DataGridCommandColumn />
    <DataGridColumn Field="@nameof(Employee.Id)" Caption="#" Sortable="false" />
    <DataGridColumn Field="@nameof(Employee.FirstName)" Caption="First Name" Editable />
    <DataGridColumn Field="@nameof(Employee.LastName)" Caption="Last Name" Editable />
    <DataGridColumn Field="@nameof(Employee.Email)" Caption="Email" Editable />
    <DataGridColumn 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 DataGrid<Employee> dataGridRef;

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

    private Task ScrollToRow()
         => dataGridRef.ScrollToRow(30).AsTask();

    private Task ScrollToPixels()
        => dataGridRef.ScrollToPixels(500).AsTask();
}