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
  • PagerOptions will provide you with additional settings to customize your pager.

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, set the Editable attribute to true on the DataGrid, and then set Editable to true on each column you wish to be editable.

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
86JeanBoyerJean42@hotmail.com99 805,01 €
87MurielShieldsMuriel.Shields12@gmail.com66 809,95 €
90BoydDavisBoyd_Davis@gmail.com58 591,48 €
92RobertoStrackeRoberto_Stracke@yahoo.com57 007,18 €
93MindySmithamMindy.Smitham5@hotmail.com56 810,55 €
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 €
1 - 10 z 409 wierszy
409 wierszy
<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 NameLast NameEmailSalary
86JeanBoyerJean42@hotmail.com99 805,01 €
87MurielShieldsMuriel.Shields12@gmail.com66 809,95 €
90BoydDavisBoyd_Davis@gmail.com58 591,48 €
92RobertoStrackeRoberto_Stracke@yahoo.com57 007,18 €
93MindySmithamMindy.Smitham5@hotmail.com56 810,55 €
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 €
1 - 10 z 409 wierszy
409 wierszy
<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:

SalaryTax
99 805,01 €24 951,25 €
66 809,95 €16 702,49 €
58 591,48 €14 647,87 €
57 007,18 €14 251,80 €
56 810,55 €14 202,64 €
84 767,07 €21 191,77 €
79 303,18 €19 825,80 €
68 642,57 €17 160,64 €
84 665,20 €21 166,30 €
63 539,54 €15 884,89 €
1 - 10 z 409 wierszy
409 wierszy
<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.
NameGender
DavidM
MladenM
JohnM
AnaF
JessicaF
<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

#First NameLast NameEmailSalary
86JeanBoyerJean42@hotmail.com99 805,01 €
87MurielShieldsMuriel.Shields12@gmail.com66 809,95 €
90BoydDavisBoyd_Davis@gmail.com58 591,48 €
92RobertoStrackeRoberto_Stracke@yahoo.com57 007,18 €
93MindySmithamMindy.Smitham5@hotmail.com56 810,55 €
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 €
<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 NameLast NameEmailSalary
86JeanBoyerJean42@hotmail.com99 805,01 €
87MurielShieldsMuriel.Shields12@gmail.com66 809,95 €
90BoydDavisBoyd_Davis@gmail.com58 591,48 €
92RobertoStrackeRoberto_Stracke@yahoo.com57 007,18 €
93MindySmithamMindy.Smitham5@hotmail.com56 810,55 €
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 €
107VanGleichnerVan.Gleichner99@hotmail.com90 917,71 €
108FrederickBodeFrederick.Bode44@gmail.com52 949,98 €
109LelaGutmannLela85@gmail.com52 247,22 €
110HarveyGutmannHarvey_Gutmann85@gmail.com82 998,73 €
111LuisRobelLuis.Robel21@gmail.com91 952,69 €
112BrandiWardBrandi_Ward@yahoo.com70 341,50 €
113MargieHillsMargie16@hotmail.com93 092,75 €
114TobyBeattyToby19@gmail.com66 829,50 €
115BobbyWardBobby.Ward@gmail.com82 475,01 €
116JasonBarrowsJason.Barrows@gmail.com87 777,57 €
117FrancisUllrichFrancis26@gmail.com69 615,22 €
118HermanMarquardtHerman.Marquardt51@yahoo.com84 744,26 €
119FrancisGleasonFrancis.Gleason35@hotmail.com58 666,45 €
120CarolynKunzeCarolyn_Kunze68@hotmail.com80 404,42 €
121TerryRogahnTerry_Rogahn62@gmail.com69 352,10 €
122KendraSengerKendra.Senger26@gmail.com93 641,61 €
123RochelleKesslerRochelle.Kessler@yahoo.com96 931,95 €
124YvonneHalvorsonYvonne63@hotmail.com94 598,15 €
125KendraBernhardKendra_Bernhard86@hotmail.com59 931,41 €
126KatherinePriceKatherine.Price22@hotmail.com60 998,60 €
127LillianWymanLillian_Wyman@yahoo.com52 545,83 €
129KristyHermanKristy.Herman@yahoo.com96 811,63 €
130ErickParkerErick15@gmail.com88 902,23 €
131DeanJohnstonDean.Johnston26@hotmail.com72 987,32 €
132PhillipBrekkePhillip.Brekke91@hotmail.com69 227,78 €
133AshleyBlickAshley32@hotmail.com74 736,25 €
134LarryFeeneyLarry42@hotmail.com76 448,86 €
135KaylaGloverKayla.Glover@gmail.com97 369,33 €
136AlvinSimonisAlvin.Simonis@gmail.com62 546,08 €
137KevinKassulkeKevin74@hotmail.com80 076,32 €
138TeresaO'KonTeresa.OKon40@yahoo.com87 065,63 €
139EllaCartwrightElla.Cartwright51@yahoo.com90 099,49 €
140AlbertHoweAlbert.Howe7@gmail.com50 647,80 €
141AndrewPfefferAndrew35@yahoo.com99 691,54 €
142GarrettJenkinsGarrett_Jenkins47@gmail.com56 963,04 €
143LouisKuvalisLouis.Kuvalis96@hotmail.com80 519,61 €
144MyrtleTrompMyrtle_Tromp@gmail.com69 930,94 €
145AndrewMurphyAndrew_Murphy42@gmail.com55 579,15 €
146PatriciaGaylordPatricia47@gmail.com89 805,17 €
147PrestonKuvalisPreston_Kuvalis3@hotmail.com83 615,78 €
148MerleOsinskiMerle4@yahoo.com92 220,65 €
149AlbertoBernhardAlberto.Bernhard41@gmail.com52 655,29 €
150DarrellBeattyDarrell51@hotmail.com54 224,58 €
151JoanneBartolettiJoanne.Bartoletti3@yahoo.com53 083,34 €
152GloriaBahringerGloria93@gmail.com65 360,79 €
153CameronHaneCameron_Hane76@gmail.com74 440,82 €
154ConradDooleyConrad77@hotmail.com79 099,12 €
155ErikMarksErik0@yahoo.com93 408,43 €
156CarolynWolffCarolyn2@hotmail.com97 583,81 €
157SilviaO'HaraSilvia78@gmail.com72 185,23 €
158DexterHettingerDexter_Hettinger@yahoo.com90 261,40 €
159MargaretLednerMargaret.Ledner38@yahoo.com62 783,44 €
160EllisHerzogEllis.Herzog4@gmail.com60 940,26 €
161MerleBahringerMerle.Bahringer92@hotmail.com53 660,05 €
162RobertoYostRoberto.Yost48@hotmail.com61 169,10 €
163StacyKuhlmanStacy98@yahoo.com93 823,76 €
164CoreyMonahanCorey_Monahan35@gmail.com57 966,22 €
165ChelseaSawaynChelsea_Sawayn51@yahoo.com52 049,90 €
166CliftonMillsClifton_Mills@gmail.com68 356,52 €
167TeriKlingTeri.Kling29@yahoo.com67 176,87 €
168TanyaFarrellTanya8@hotmail.com58 393,52 €
169MarianneCarrollMarianne.Carroll@yahoo.com92 390,80 €
170RosaliePurdyRosalie.Purdy19@gmail.com86 463,78 €
171ShirleyGreenfelderShirley_Greenfelder2@hotmail.com91 685,68 €
172DeloresSteuberDelores.Steuber50@hotmail.com94 113,92 €
173TerriKleinTerri.Klein96@hotmail.com68 647,08 €
174MarjorieBeahanMarjorie_Beahan75@hotmail.com84 706,53 €
175ReginaldReingerReginald_Reinger31@hotmail.com85 323,79 €
176KelleyBodeKelley.Bode39@gmail.com79 071,76 €
177LorenHowellLoren_Howell74@gmail.com93 204,93 €
178LindseySmithLindsey_Smith76@yahoo.com99 085,43 €
179DougWilkinsonDoug_Wilkinson41@yahoo.com79 267,68 €
180BernadetteWatsicaBernadette18@gmail.com77 302,18 €
181BillyVolkmanBilly93@gmail.com68 235,94 €
182CourtneyReingerCourtney59@yahoo.com54 541,73 €
183MarjorieDietrichMarjorie_Dietrich@yahoo.com51 211,89 €
184MeghanPollichMeghan71@gmail.com62 102,58 €
185PhillipSmithamPhillip_Smitham40@yahoo.com79 097,74 €
186VernaKlockoVerna.Klocko@gmail.com66 963,02 €
187RodolfoMertzRodolfo95@hotmail.com57 742,48 €
188SabrinaHyattSabrina.Hyatt0@yahoo.com82 874,64 €
189RogerLehnerRoger.Lehner20@gmail.com85 927,11 €
190JuliaHuelsJulia35@gmail.com67 309,00 €
191MayReynoldsMay52@yahoo.com96 990,64 €
192BennieWilliamsonBennie_Williamson@yahoo.com67 591,28 €
<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();
    }
}

Row Context Menu

You may need to know which element the user clicked in some cases so that you can use it in command handling. You might also want to change the menu's contents depending on which element the user clicked (e.g., disable or entirely remove some items from the menu based on a condition).

To integrate the context menu with the DataGrid, you need to:

  1. Use the grid's RowContextMenu event to get the current row model and show the menu.
  2. Use the context menu's MouseEventArgs parameter to handle the desired operation.

In this example, the context menu is used to show the menu items, put an item in edit mode and delete items.

#First NameLast NameEmail
86JeanBoyerJean42@hotmail.com
87MurielShieldsMuriel.Shields12@gmail.com
90BoydDavisBoyd_Davis@gmail.com
92RobertoStrackeRoberto_Stracke@yahoo.com
93MindySmithamMindy.Smitham5@hotmail.com
97LaverneSchusterLaverne.Schuster38@gmail.com
98KendraCorkeryKendra_Corkery@gmail.com
99ChrisBartonChris.Barton@yahoo.com
100EdPriceEd.Price21@gmail.com
101TraceyDurganTracey.Durgan3@hotmail.com
@using System.Drawing

<DataGrid @ref="@dataGridRef"
          TItem="Employee"
          Data="@employeeList"
          @bind-SelectedRow="@selectedEmployee"
          RowContextMenu="@OnRowContextMenu"
          RowContextMenuPreventDefault="true"
          Responsive
          Editable>
    <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 />
</DataGrid>

@if ( showContextMenu )
{
    <Div Position="Position.Fixed" Background="Background.Danger" Style="@($"left:{contextMenuPos.X}px;top:{contextMenuPos.Y}px;")">
        <ListGroup>
            <ListGroupItem Clicked="@(()=>OnContextItemEditClicked(contextMenuEmployee))">
                <Icon Name="IconName.Edit" TextColor="TextColor.Secondary" /> Edit
            </ListGroupItem>
            <ListGroupItem Clicked="@(()=>OnContextItemDeleteClicked(contextMenuEmployee))">
                <Icon Name="IconName.Delete" TextColor="TextColor.Danger" /> Delete
            </ListGroupItem>
        </ListGroup>
    </Div>
}
@code {
    [Inject]
    public EmployeeData EmployeeData { get; set; }
    private List<Employee> employeeList;
    private Employee selectedEmployee;
    private DataGrid<Employee> dataGridRef;

    bool showContextMenu = false;
    Employee contextMenuEmployee;
    Point contextMenuPos;

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

    protected Task OnRowContextMenu( DataGridRowMouseEventArgs<Employee> eventArgs )
    {
        showContextMenu = true;
        contextMenuEmployee = eventArgs.Item;
        contextMenuPos = eventArgs.MouseEventArgs.Client;

        return Task.CompletedTask;
    }

    protected async Task OnContextItemEditClicked( Employee employee )
    {
        await dataGridRef.Edit( employee );

        showContextMenu = false;
    }

    protected async Task OnContextItemDeleteClicked( Employee employee )
    {
        await dataGridRef.Delete( employee );

        showContextMenu = false;
    }
}

Scroll To

Scroll to API is available when the DataGrid FixedHeader or Virtualize is set.
#First NameLast NameEmailSalary
86JeanBoyerJean42@hotmail.com99 805,01 €
87MurielShieldsMuriel.Shields12@gmail.com66 809,95 €
90BoydDavisBoyd_Davis@gmail.com58 591,48 €
92RobertoStrackeRoberto_Stracke@yahoo.com57 007,18 €
93MindySmithamMindy.Smitham5@hotmail.com56 810,55 €
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 €
107VanGleichnerVan.Gleichner99@hotmail.com90 917,71 €
108FrederickBodeFrederick.Bode44@gmail.com52 949,98 €
109LelaGutmannLela85@gmail.com52 247,22 €
110HarveyGutmannHarvey_Gutmann85@gmail.com82 998,73 €
111LuisRobelLuis.Robel21@gmail.com91 952,69 €
112BrandiWardBrandi_Ward@yahoo.com70 341,50 €
113MargieHillsMargie16@hotmail.com93 092,75 €
114TobyBeattyToby19@gmail.com66 829,50 €
115BobbyWardBobby.Ward@gmail.com82 475,01 €
116JasonBarrowsJason.Barrows@gmail.com87 777,57 €
117FrancisUllrichFrancis26@gmail.com69 615,22 €
118HermanMarquardtHerman.Marquardt51@yahoo.com84 744,26 €
119FrancisGleasonFrancis.Gleason35@hotmail.com58 666,45 €
120CarolynKunzeCarolyn_Kunze68@hotmail.com80 404,42 €
121TerryRogahnTerry_Rogahn62@gmail.com69 352,10 €
122KendraSengerKendra.Senger26@gmail.com93 641,61 €
123RochelleKesslerRochelle.Kessler@yahoo.com96 931,95 €
124YvonneHalvorsonYvonne63@hotmail.com94 598,15 €
125KendraBernhardKendra_Bernhard86@hotmail.com59 931,41 €
126KatherinePriceKatherine.Price22@hotmail.com60 998,60 €
127LillianWymanLillian_Wyman@yahoo.com52 545,83 €
129KristyHermanKristy.Herman@yahoo.com96 811,63 €
130ErickParkerErick15@gmail.com88 902,23 €
131DeanJohnstonDean.Johnston26@hotmail.com72 987,32 €
132PhillipBrekkePhillip.Brekke91@hotmail.com69 227,78 €
133AshleyBlickAshley32@hotmail.com74 736,25 €
134LarryFeeneyLarry42@hotmail.com76 448,86 €
135KaylaGloverKayla.Glover@gmail.com97 369,33 €
136AlvinSimonisAlvin.Simonis@gmail.com62 546,08 €
137KevinKassulkeKevin74@hotmail.com80 076,32 €
138TeresaO'KonTeresa.OKon40@yahoo.com87 065,63 €
139EllaCartwrightElla.Cartwright51@yahoo.com90 099,49 €
140AlbertHoweAlbert.Howe7@gmail.com50 647,80 €
141AndrewPfefferAndrew35@yahoo.com99 691,54 €
142GarrettJenkinsGarrett_Jenkins47@gmail.com56 963,04 €
1 - 50 z 409 wierszy
409 wierszy
<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();
}