Lire en français

Warning, version 3.0.0 introduces changes compared to the previous version which requires to review the implementation in your programs

Since version 5.0.0 it's not longer necesary to specified the colection used in each column and cells anymore

BlazorDatagrid

It's a Blazor component. A filtered, paged and sorted datagrid.

Nuget Gallery

The Nuget package page can be found at https://www.nuget.org/packages/BlazorDataGrid/

Installation

To install BlazorDataGrid using Package Manager run the following command

Install-Package BlazorDataGrid -Version 6.0.1

To install BlazorDataGrid using .NET CLI run the following command

dotnet add package BlazorDataGrid --version 6.0.1

After you have installed the package add the following line in the _Imports.razor file

@using BlazorDataGrid

And in the Startup.cs file in the method public void ConfigureServices(IServiceCollection services)

services.AddScoped<AppState>();

Parameters

• The <BlazorDataGrid> component accepts following parameters:

  • Items(mandatory): The list with the results to show in the datagrid
  • PageSize: The initial number of results per page. If it is not present, the initial number is the first value of the selector.
  • ShowTotalResult: A boolean to show or not the total number of results.
  • BlazorDataGridColumn: A component to display the header
  • GridRow: Datagrid's row
  • Translation: (optional) A dictionnary with the datagrid's translation. the A dictionnary with the datagrid's translation detail the content of the dictionnary.
  • ShowPageSelector: true or false, show or not the item per page selector
  • PageSelector : A dictionnary (string int). Allows to customize the selector (display / value). The value 0 means all the elements. By default the display is the following:
  • "5", 5
  • "10", 10
  • "25", 25
  • "50", 50
  • "100", 100
  • "*", 0
  • Editable: true or false, allows the datagrid to be editable. If the parameter is not present, the datagrid is not editable.

• The <BlazorDataGridColumn> component accepts following parameters:

  • DataGridColumn: The header component.

• The <DataGridColumn> component accepts following parameters:

  • ColumnName: The actual name of the column on which the filter and the sorted are based
  • DisplayColumnName: (non mandatory) The name that will be displayed in the header. It is possible to pass the contents of the header between the tags instead
  • Filter: true or false to show or not the input filter on the column
  • DropdownFilter: true or false. Replacing the filter input text by a list witch contains all different values of the column.
  • Format: Specifies the date format to display
  • ReadOnly: Set a column ReadOnly when the datagrid is editable.

• The <GridRow> component accepts following parameters:

  • Cell : The component detailing each cell of the row.

• The Cell component accepts following parameters:

  • Content : The contents of the cell. The parameter of the collection to display is placed in a double brace {{}}
  • ValidationPattern : A regular expression to apply a control on the cell.
  • LabelError : The message to display in case of validation failure.

Example of use:

<BlazorDataGrid Items="@forecasts" ShowTotalResult="true" TheadClass="thead-dark" Translation="@translate" ShowPageSelector="true" PageSelector="@PageSelector" Editable="false" RowSelector="true"> <BlazorDataGridColumn> <DataGridColumn ColumnName="Date" Filter="true" Format="dd/MM/yyyy"><strong>Date</strong></DataGridColumn> <DataGridColumn ColumnName="TemperatureC" DisplayColumnName="TemperatureC" Filter="true"></DataGridColumn> <DataGridColumn ColumnName="TemperatureF" DisplayColumnName="TemperatureF" DropdownFilter="true" ReadOnly="true"></DataGridColumn> <DataGridColumn ColumnName="Summary" DisplayColumnName="Summary" Filter="true"></DataGridColumn> </BlazorDataGridColumn> <GridRow> <Cell Content="{{Date}}"/> <Cell Content="<strong>{{TemperatureC}}</strong>" ValidationPattern="^[-]?\d+$" LabelError="@translate["labelError"]"/> <Cell Content="{{TemperatureF}}" /> <Cell Context="ctx" > @ctx.Summary </Cell> </GridRow> </BlazorDataGrid> private Dictionary<string, string> translate = new Dictionary<string, string> { {"next", "next" }, {"previous", "Previous" }, {"pages", "Page __curpage__ of __totalpages__" }, {"totalresult", "__totalcount__ item" }, {"totalresultplural", "__totalcount__ items"}, {"filteredresults", "__filteredcount__ result of __totalcount__ items" }, {"filteredresultsplural", "__filteredcount__ results of __totalcount__ items" }, {"selector", "Items per page:"} }; private Dictionary<string, int> PageSelector = new Dictionary<string, int> { {"5", 5 }, {"10", 10 }, {"20", 20 }, {"30", 30 }, {"All", 0 } };

Translation

The translation is done through a dictionary string string. The different key values ​​are as follows:

• next: button next in pagination
• previous: button previous in pagination
• pages: The display area of ​​the current page and the total number of pages. In the value part, it is possible to enter the following variables:
  • __curpage__: the current page
  • __totalpages__: the total number of pages
• totalresult: The sentence displays the total number of results in the singular (0 or 1 result). In the value part, it is possible to enter the following variables:
  • __totalcount__: the total number of results
• totalresultplural: The sentence displays the total number of results in the plural (2 résults or more)
  • __totalcount__: the total number of results
• filteredresults : allows the display of filtered results in the singular (0 or 1 result).
  • __filteredcount__: the number of filtered results.
  • __totalcount__: the total number of results
• filteredresultsplural: allows the display of filtered results in the plural (2 résults or more).
  • __filteredcount__: the number of filtered results.
  • __totalcount__: the total number of results
• selector: Text for the items per page selector
• loading: The loading message.
• labelError: Error message when you enter an invalid format in the datagrid.

preview

Release Notes