diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_01_A_Client_Side_Filtering.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_01_A_Client_Side_Filtering.razor index f72ff5d5a..0795e9c95 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_01_A_Client_Side_Filtering.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_01_A_Client_Side_Filtering.razor @@ -1,5 +1,4 @@ - @code { - BlazorBootstrap.Grid grid = default!; private IEnumerable employees = default!; - protected override async Task OnAfterRenderAsync(bool firstRender) - { - await base.OnAfterRenderAsync(firstRender); - } - private async Task> EmployeesDataProvider(GridDataProviderRequest request) { if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_05_Set_Default_Filter.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_02_Set_Default_Filter.razor similarity index 100% rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_05_Set_Default_Filter.razor rename to BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_02_Set_Default_Filter.razor diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_06_Disable_Specific_Column_Filter.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_03_Disable_Specific_Column_Filter.razor similarity index 100% rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_06_Disable_Specific_Column_Filter.razor rename to BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_03_Disable_Specific_Column_Filter.razor diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_06_Increase_Filter_Textbox_Width.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_04_Increase_Filter_Textbox_Width.razor similarity index 100% rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_06_Increase_Filter_Textbox_Width.razor rename to BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_04_Increase_Filter_Textbox_Width.razor diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_35_Enum_Filters.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_05_Enum_Filters.razor similarity index 92% rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_35_Enum_Filters.razor rename to BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_05_Enum_Filters.razor index 7698d5e10..f642a5b1d 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_35_Enum_Filters.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_05_Enum_Filters.razor @@ -1,5 +1,4 @@ - @code { - BlazorBootstrap.Grid grid = default!; private IEnumerable users = default!; - protected override async Task OnAfterRenderAsync(bool firstRender) - { - await base.OnAfterRenderAsync(firstRender); - } - private async Task> UsersDataProvider(GridDataProviderRequest request) { if (users is null) // pull employees only one time for client-side filtering, sorting, and paging diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_36_Guid_Filters.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_06_Guid_Filters.razor similarity index 93% rename from BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_36_Guid_Filters.razor rename to BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_06_Guid_Filters.razor index 0288aaff2..9d226d025 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_36_Guid_Filters.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Demo_06_Guid_Filters.razor @@ -1,5 +1,4 @@ - @code { - BlazorBootstrap.Grid grid = default!; private IEnumerable users = default!; - protected override async Task OnAfterRenderAsync(bool firstRender) - { - await base.OnAfterRenderAsync(firstRender); - } - private async Task> UsersDataProvider(GridDataProviderRequest request) { if (users is null) // pull employees only one time for client-side filtering, sorting, and paging diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor index 6710e28f1..855ba0448 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/03-filters/Grid_Filters_Documentation.razor @@ -27,18 +27,18 @@ You can set the default filter on more than one GridColumn.
The default sorting is enabled on the Id column in the below example.
- +
Filterable parameter is required to disable the filter on a specific column. Add Filterable="false" parameter to GridColumn. The column filter is disabled on the Id column in the below example.
- +
Add FilterTextboxWidth parameter to the GridColumn to increase or decrease the filter textbox width, FilterTextboxWidth parameter is optional.
Filter textbox width measured in pixels. - +

@@ -51,10 +51,10 @@ - + - + @code { private const string pageUrl = "/grid/filters"; diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Demo_01_Translations.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Demo_01_Translations.razor new file mode 100644 index 000000000..1af66a71d --- /dev/null +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Demo_01_Translations.razor @@ -0,0 +1,101 @@ + + + + + @context.Id + + + @context.Name + + + @context.DOB + + + @context.Status + + + + + +@code { + private IEnumerable users = default!; + + private async Task> GridFiltersTranslationProvider() + { + var filtersTranslation = new List(); + + // number/date/boolean + filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals)); + filtersTranslation.Add(new("!=", "Niet gelijk", FilterOperator.NotEquals)); + // number/date + filtersTranslation.Add(new("<", "Minder dan", FilterOperator.LessThan)); + filtersTranslation.Add(new("<=", "Kleiner dan of gelijk aan", FilterOperator.LessThanOrEquals)); + filtersTranslation.Add(new(">", "Groter dan", FilterOperator.GreaterThan)); + filtersTranslation.Add(new(">=", "Groter dan of gelijk aan", FilterOperator.GreaterThanOrEquals)); + // string + filtersTranslation.Add(new("*a*", "Bevat", FilterOperator.Contains)); + filtersTranslation.Add(new("a**", "Begint met", FilterOperator.StartsWith)); + filtersTranslation.Add(new("**a", "Eindigt met", FilterOperator.EndsWith)); + filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals)); + // common + filtersTranslation.Add(new("x", "Duidelijk", FilterOperator.Clear)); + + return await Task.FromResult(filtersTranslation); + } + + + private async Task> UsersDataProvider(GridDataProviderRequest request) + { + if (users is null) // pull employees only one time for client-side filtering, sorting, and paging + users = GetUsers(); // call a service or an API to pull the employees + + return await Task.FromResult(request.ApplyTo(users)); + } + + private IEnumerable GetUsers() + { + return new List + { + new User { Id = 107, Name = "Alice", DOB = new DateOnly(1998, 11, 17), Status = UserStatus.Registered }, + new User { Id = null, Name = "Bob", DOB = new DateOnly(1985, 1, 5), Status = UserStatus.Verified }, + new User { Id = 106, Name = "John", DOB = new DateOnly(1995, 4, 17), Status = UserStatus.Registered }, + new User { Id = 104, Name = "Pop", DOB = new DateOnly(1985, 6, 8), Status = UserStatus.Registered }, + new User { Id = 105, Name = "Ronald", DOB = new DateOnly(1991, 8, 23), Status = UserStatus.VerificationPending }, + new User { Id = 102, Name = "Line", DOB = new DateOnly(1977, 1, 12), Status = UserStatus.VerificationPending }, + new User { Id = 101, Name = "Daniel", DOB = new DateOnly(1977, 1, 12), Status = UserStatus.Registered }, + new User { Id = 108, Name = "Zayne", DOB = new DateOnly(1991, 1, 1), Status = UserStatus.Verified }, + new User { Id = 109, Name = "Isha", DOB = null, Status = UserStatus.Verified }, + new User { Id = 110, Name = "Vijay", DOB = new DateOnly(1990, 7, 1), Status = UserStatus.Verified }, + }; + } + + public record class User + { + public int? Id { get; set; } + public string? Name { get; set; } + public DateOnly? DOB { get; set; } + public UserStatus Status { get; set; } + } + + public enum UserStatus + { + Registered, + VerificationPending, + Verified + } +} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Demo_31_Translations.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Demo_31_Translations.razor deleted file mode 100644 index 09b3c8cbb..000000000 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Demo_31_Translations.razor +++ /dev/null @@ -1,89 +0,0 @@ - - - - - @context.Id - - - @context.Name - - - @context.Designation - - - @context.DOJ - - - @context.IsActive - - - - - -@code { - private IEnumerable employees = default!; - - private async Task> GridFiltersTranslationProvider() - { - var filtersTranslation = new List(); - - // number/date/boolean - filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals)); - filtersTranslation.Add(new("!=", "Niet gelijk", FilterOperator.NotEquals)); - // number/date - filtersTranslation.Add(new("<", "Minder dan", FilterOperator.LessThan)); - filtersTranslation.Add(new("<=", "Kleiner dan of gelijk aan", FilterOperator.LessThanOrEquals)); - filtersTranslation.Add(new(">", "Groter dan", FilterOperator.GreaterThan)); - filtersTranslation.Add(new(">=", "Groter dan of gelijk aan", FilterOperator.GreaterThanOrEquals)); - // string - filtersTranslation.Add(new("*a*", "Bevat", FilterOperator.Contains)); - filtersTranslation.Add(new("a**", "Begint met", FilterOperator.StartsWith)); - filtersTranslation.Add(new("**a", "Eindigt met", FilterOperator.EndsWith)); - filtersTranslation.Add(new("=", "gelijk aan", FilterOperator.Equals)); - // common - filtersTranslation.Add(new("x", "Duidelijk", FilterOperator.Clear)); - - return await Task.FromResult(filtersTranslation); - } - - private async Task> EmployeesDataProvider(GridDataProviderRequest request) - { - if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging - employees = GetEmployees(); // call a service or an API to pull the employees - - return await Task.FromResult(request.ApplyTo(employees)); - } - - private IEnumerable GetEmployees() - { - return new List - { - new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, - new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, - new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, - new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, - new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, - new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, - new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, - new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, - new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, - new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, - new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, - new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, - }; - } -} \ No newline at end of file diff --git a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor index 736978820..97a474e11 100644 --- a/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor +++ b/BlazorBootstrap.Demo.RCL/Components/Pages/Grid/11-translations/Grid_Translations_Documentation.razor @@ -11,7 +11,7 @@

In the example below, you will see translations related to pagination and filters in Dutch.
- + @code { private const string pageUrl = "/grid/translations"; diff --git a/blazorbootstrap/Components/Grid/Grid.razor b/blazorbootstrap/Components/Grid/Grid.razor index 94fa60e44..88f0c3f50 100644 --- a/blazorbootstrap/Components/Grid/Grid.razor +++ b/blazorbootstrap/Components/Grid/Grid.razor @@ -2,7 +2,7 @@ @inherits BlazorBootstrapComponentBase @typeparam TItem - + @ChildContent @@ -58,7 +58,8 @@ @if (column.Filterable) { - filterItems) [Parameter] public string EmptyText { get; set; } = "No records to display"; + /// + /// Gets or sets the enum filter select text. + /// + /// + /// Default value is 'Select'. + /// + [Parameter] + public string? EnumFilterSelectText { get; set; } = "Select"; + /// /// Gets or sets the filters row css class. /// diff --git a/blazorbootstrap/Components/Grid/GridColumn.razor.cs b/blazorbootstrap/Components/Grid/GridColumn.razor.cs index 825f03384..236de2651 100644 --- a/blazorbootstrap/Components/Grid/GridColumn.razor.cs +++ b/blazorbootstrap/Components/Grid/GridColumn.razor.cs @@ -411,7 +411,8 @@ private async Task OnSortClickAsync() [Parameter] public bool IsDefaultSortColumn { get; set; } = false; - [CascadingParameter] public Grid Parent { get; set; } = default!; + [CascadingParameter(Name = "Parent")] + public Grid Parent { get; set; } = default!; /// /// Gets or sets the property name. diff --git a/blazorbootstrap/Components/Grid/GridColumnFilter.razor b/blazorbootstrap/Components/Grid/GridColumnFilter.razor index 30d33b4b0..4321a1811 100644 --- a/blazorbootstrap/Components/Grid/GridColumnFilter.razor +++ b/blazorbootstrap/Components/Grid/GridColumnFilter.razor @@ -58,7 +58,7 @@ @if (string.IsNullOrWhiteSpace(filterValue)) { - Select + @EnumFilterSelectText } else { diff --git a/blazorbootstrap/Components/Grid/GridColumnFilter.razor.cs b/blazorbootstrap/Components/Grid/GridColumnFilter.razor.cs index aed938940..d43af52b2 100644 --- a/blazorbootstrap/Components/Grid/GridColumnFilter.razor.cs +++ b/blazorbootstrap/Components/Grid/GridColumnFilter.razor.cs @@ -147,6 +147,9 @@ or StringConstants.PropertyTypeNameDecimal #region Properties, Indexers + [Parameter] + public string? EnumFilterSelectText { get; set; } + /// /// Gets or sets the filter button color. /// diff --git a/docs/docs/05-components/grid.mdx b/docs/docs/05-components/grid.mdx index cb8ece7af..0435972fc 100644 --- a/docs/docs/05-components/grid.mdx +++ b/docs/docs/05-components/grid.mdx @@ -35,6 +35,7 @@ Use Blazor Bootstrap grid component to display tabular data from the data source | DisableRowSelection | `Func?` | | | Enable or disable the row level checkbox selection. | 1.8.0 | | EmptyDataTemplate | RenderFragment | null | ✔️ | Template to render when there are no rows to display. | 1.0.0 | | EmptyText | string | `No records to display` | | Shows text on no records. | 1.0.0 | +| EnumFilterSelectText | string | `Select` | | Gets or sets the enum filter select text. | 3.1.0 | | FiltersRowCssClass | string | null | | Gets or sets the filters row css class. | 1.9.2 | | FiltersTranslationProvider | `GridFiltersTranslationDelegate` | null | | Filters transalation is for grid filters to render. The provider should always return a 'FilterOperatorInfo' collection, and 'null' is not allowed. | 1.10.0 | | FixedHeader | bool | false | | Gets or sets the grid fixed header. | 1.10.3 | @@ -2972,15 +2973,15 @@ Please see the following example where the row text color is set to **#fff (whit In the example below, you will see translations related to pagination and filters in **Dutch**. -Blazor Bootstrap: Grid Component - Translations +Blazor Bootstrap: Grid Component - Translations ```cshtml {8,13-14} showLineNumbers - - + @context.Id - + @context.Name - - @context.Designation - - - @context.DOJ + + @context.DOB - - @context.IsActive + + @context.Status @@ -3014,7 +3013,7 @@ In the example below, you will see translations related to pagination and filter ```cs {4-25} showLineNumbers @code { - private IEnumerable employees = default!; + private IEnumerable users = default!; private async Task> GridFiltersTranslationProvider() { @@ -3039,32 +3038,46 @@ In the example below, you will see translations related to pagination and filter return await Task.FromResult(filtersTranslation); } - private async Task> EmployeesDataProvider(GridDataProviderRequest request) + + private async Task> UsersDataProvider(GridDataProviderRequest request) { - if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging - employees = GetEmployees(); // call a service or an API to pull the employees + if (users is null) // pull employees only one time for client-side filtering, sorting, and paging + users = GetUsers(); // call a service or an API to pull the employees - return await Task.FromResult(request.ApplyTo(employees)); + return await Task.FromResult(request.ApplyTo(users)); } - private IEnumerable GetEmployees() + private IEnumerable GetUsers() { - return new List + return new List { - new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true }, - new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true }, - new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true }, - new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false }, - new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true }, - new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, - new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true }, - new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true }, - new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true }, - new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true }, - new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true }, - new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true }, + new User { Id = 107, Name = "Alice", DOB = new DateOnly(1998, 11, 17), Status = UserStatus.Registered }, + new User { Id = null, Name = "Bob", DOB = new DateOnly(1985, 1, 5), Status = UserStatus.Verified }, + new User { Id = 106, Name = "John", DOB = new DateOnly(1995, 4, 17), Status = UserStatus.Registered }, + new User { Id = 104, Name = "Pop", DOB = new DateOnly(1985, 6, 8), Status = UserStatus.Registered }, + new User { Id = 105, Name = "Ronald", DOB = new DateOnly(1991, 8, 23), Status = UserStatus.VerificationPending }, + new User { Id = 102, Name = "Line", DOB = new DateOnly(1977, 1, 12), Status = UserStatus.VerificationPending }, + new User { Id = 101, Name = "Daniel", DOB = new DateOnly(1977, 1, 12), Status = UserStatus.Registered }, + new User { Id = 108, Name = "Zayne", DOB = new DateOnly(1991, 1, 1), Status = UserStatus.Verified }, + new User { Id = 109, Name = "Isha", DOB = null, Status = UserStatus.Verified }, + new User { Id = 110, Name = "Vijay", DOB = new DateOnly(1990, 7, 1), Status = UserStatus.Verified }, }; } + + public record class User + { + public int? Id { get; set; } + public string? Name { get; set; } + public DateOnly? DOB { get; set; } + public UserStatus Status { get; set; } + } + + public enum UserStatus + { + Registered, + VerificationPending, + Verified + } } ```