From 0d09f5456711e16b88741f066d50081c5cc50ef5 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Mon, 9 Dec 2024 15:30:14 +0000 Subject: [PATCH 1/6] Added new kb article grid-kb-style-filtered-columns --- .../grid-kb-style-filtered-columns.md | 151 ++++++++++++++++++ 1 file changed, 151 insertions(+) create mode 100644 knowledge-base/grid-kb-style-filtered-columns.md diff --git a/knowledge-base/grid-kb-style-filtered-columns.md b/knowledge-base/grid-kb-style-filtered-columns.md new file mode 100644 index 000000000..e31463209 --- /dev/null +++ b/knowledge-base/grid-kb-style-filtered-columns.md @@ -0,0 +1,151 @@ +--- +title: Change Filtered Columns Color in Grid for Blazor +description: Learn how to change the background color of filtered columns in the Grid for Blazor for better visibility using CSS. +type: how-to +page_title: How to Style Filtered Columns in Telerik Grid for Blazor +slug: grid-kb-style-filtered-columns +tags: grid, blazor, styling, filtered columns, css, oncellrender, onstatechanged +res_type: kb +ticketid: 1672604 +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ +## Description + +I want to style filtered columns in the Grid for Blazor using RGBA for better visibility. Specifically, when a filter is applied, I want the background color of column cells to change. + +This knowledge base article answers the following questions: +- How to apply custom styles to filtered columns in a Blazor Grid? +- How to enhance the visibility of filtered columns in Blazor Grid using CSS? + +## Solution + +To style filtered columns in a Telerik Grid for Blazor: +1. Utilize the [`OnCellRender`]({%slug grid-column-events%}#oncellrender) and [`OnStateChanged`]({%slug grid-state%}#onstatechanged) events +2. Apply a custom CSS class to the filtered column when a filter is active + +>caption Grid with styled filtered column. + +`````CSHTML +@using Telerik.DataSource.Extensions +@using Telerik.DataSource + + + + + + + + + + + +@code { + private List SourceData { get; set; } + private string FilteredColumn { get; set; } + + private void OnNameColumnCellRender(GridCellRenderEventArgs args) + { + if (FilteredColumn == nameof(Employee.Name)) + { + args.Class = "highlighted-column"; // Apply the custom CSS class + } + } + + private void OnHireDateColumnCellRender(GridCellRenderEventArgs args) + { + if (FilteredColumn == nameof(Employee.HireDate)) + { + args.Class = "highlighted-column"; // Apply the custom CSS class + } + } + + private async Task OnGridStateChanged(GridStateEventArgs args) + { + if (args.PropertyName == "FilterDescriptors") + { + if (args.GridState.FilterDescriptors.Any()) + { + var filterDescriptors = new List(args.GridState.FilterDescriptors); + var filterDescriptor = filterDescriptors[0] as CompositeFilterDescriptor; + var filteredColumn = filterDescriptor.FilterDescriptors[0] as FilterDescriptor; + + // Capture the filtered column's field name + FilteredColumn = filteredColumn.Member; + } + else + { + FilteredColumn = null; // Reset when no filters are applied + } + + StateHasChanged(); // Re-render the grid + } + } + + protected async Task ReadItems(GridReadEventArgs args) + { + // Simulate network delay + await Task.Delay(100); + + var datasourceResult = SourceData.ToDataSourceResult(args.Request); + + args.Data = datasourceResult.Data; + args.Total = datasourceResult.Total; + } + + protected override void OnInitialized() + { + SourceData = GenerateData(); + } + + private List GenerateData() + { + var result = new List(); + var rand = new Random(); + for (int i = 0; i < 100; i++) + { + result.Add(new Employee() + { + ID = i, + Name = "Name " + i, + HireDate = DateTime.Now.Date.AddDays(rand.Next(-20, 20)) + }); + } + + return result; + } + + public class Employee + { + public int ID { get; set; } + public string Name { get; set; } + public DateTime HireDate { get; set; } + } +} +````` +## See Also + +- [Grid Columns](https://docs.telerik.com/blazor-ui/components/grid/columns/bound) +- [OnCellRender Event](https://docs.telerik.com/blazor-ui/components/grid/columns/events) +- [OnStateChanged Event](https://docs.telerik.com/blazor-ui/components/grid/state#onstatechanged) +- [Override the Theme or Apply Custom CSS Styles]({%slug themes-override%}) From f69558f54ad4a1ea7d63704eb3bdd600a21834ec Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:03:40 +0200 Subject: [PATCH 2/6] Update knowledge-base/grid-kb-style-filtered-columns.md --- knowledge-base/grid-kb-style-filtered-columns.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-kb-style-filtered-columns.md b/knowledge-base/grid-kb-style-filtered-columns.md index e31463209..229328141 100644 --- a/knowledge-base/grid-kb-style-filtered-columns.md +++ b/knowledge-base/grid-kb-style-filtered-columns.md @@ -1,6 +1,6 @@ --- title: Change Filtered Columns Color in Grid for Blazor -description: Learn how to change the background color of filtered columns in the Grid for Blazor for better visibility using CSS. +description: Learn how to change the background color of filtered columns in the Telerik Grid for Blazor for better visibility using CSS. type: how-to page_title: How to Style Filtered Columns in Telerik Grid for Blazor slug: grid-kb-style-filtered-columns From 5cd4f6188b88681749041067741a8ba471466f4e Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:03:46 +0200 Subject: [PATCH 3/6] Update knowledge-base/grid-kb-style-filtered-columns.md --- knowledge-base/grid-kb-style-filtered-columns.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-kb-style-filtered-columns.md b/knowledge-base/grid-kb-style-filtered-columns.md index 229328141..8529a466a 100644 --- a/knowledge-base/grid-kb-style-filtered-columns.md +++ b/knowledge-base/grid-kb-style-filtered-columns.md @@ -4,7 +4,7 @@ description: Learn how to change the background color of filtered columns in the type: how-to page_title: How to Style Filtered Columns in Telerik Grid for Blazor slug: grid-kb-style-filtered-columns -tags: grid, blazor, styling, filtered columns, css, oncellrender, onstatechanged +tags: grid, blazor, styling, filtering, css, oncellrender, onstatechanged res_type: kb ticketid: 1672604 --- From b6c9ff5139d598d53abce5058e78ff6e78ec7dba Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Fri, 13 Dec 2024 10:03:52 +0200 Subject: [PATCH 4/6] Update knowledge-base/grid-kb-style-filtered-columns.md --- knowledge-base/grid-kb-style-filtered-columns.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-kb-style-filtered-columns.md b/knowledge-base/grid-kb-style-filtered-columns.md index 8529a466a..e12ad2a43 100644 --- a/knowledge-base/grid-kb-style-filtered-columns.md +++ b/knowledge-base/grid-kb-style-filtered-columns.md @@ -37,8 +37,8 @@ To style filtered columns in a Telerik Grid for Blazor: >caption Grid with styled filtered column. `````CSHTML -@using Telerik.DataSource.Extensions @using Telerik.DataSource +@using Telerik.DataSource.Extensions - - - - - - - - - -@code { - private List SourceData { get; set; } - private string FilteredColumn { get; set; } - - private void OnNameColumnCellRender(GridCellRenderEventArgs args) - { - if (FilteredColumn == nameof(Employee.Name)) - { - args.Class = "highlighted-column"; // Apply the custom CSS class - } - } - - private void OnHireDateColumnCellRender(GridCellRenderEventArgs args) - { - if (FilteredColumn == nameof(Employee.HireDate)) - { - args.Class = "highlighted-column"; // Apply the custom CSS class - } - } - - private async Task OnGridStateChanged(GridStateEventArgs args) - { - if (args.PropertyName == "FilterDescriptors") - { - if (args.GridState.FilterDescriptors.Any()) - { - var filterDescriptors = new List(args.GridState.FilterDescriptors); - var filterDescriptor = filterDescriptors[0] as CompositeFilterDescriptor; - var filteredColumn = filterDescriptor.FilterDescriptors[0] as FilterDescriptor; - - // Capture the filtered column's field name - FilteredColumn = filteredColumn.Member; - } - else - { - FilteredColumn = null; // Reset when no filters are applied - } - - StateHasChanged(); // Re-render the grid - } - } - - protected async Task ReadItems(GridReadEventArgs args) - { - // Simulate network delay - await Task.Delay(100); - - var datasourceResult = SourceData.ToDataSourceResult(args.Request); - - args.Data = datasourceResult.Data; - args.Total = datasourceResult.Total; - } - - protected override void OnInitialized() - { - SourceData = GenerateData(); - } - - private List GenerateData() - { - var result = new List(); - var rand = new Random(); - for (int i = 0; i < 100; i++) - { - result.Add(new Employee() - { - ID = i, - Name = "Name " + i, - HireDate = DateTime.Today.AddDays(rand.Next(-20, 20)) - }); - } - - return result; - } - - public class Employee - { - public int ID { get; set; } - public string Name { get; set; } - public DateTime HireDate { get; set; } - } -} -````` -## See Also - -- [Grid Columns](https://docs.telerik.com/blazor-ui/components/grid/columns/bound) -- [OnCellRender Event](https://docs.telerik.com/blazor-ui/components/grid/columns/events) -- [OnStateChanged Event](https://docs.telerik.com/blazor-ui/components/grid/state#onstatechanged) -- [Override the Theme or Apply Custom CSS Styles]({%slug themes-override%}) diff --git a/knowledge-base/grid-style-filtered-columns.md b/knowledge-base/grid-style-filtered-columns.md new file mode 100644 index 000000000..9651cd110 --- /dev/null +++ b/knowledge-base/grid-style-filtered-columns.md @@ -0,0 +1,120 @@ +--- +title: Change Filtered Columns Color in Grid for Blazor +description: Learn how to change the background color of filtered columns in the Telerik Grid for Blazor for better visibility using CSS. +type: how-to +page_title: How to Style Filtered Columns in Telerik Grid for Blazor +slug: grid-kb-style-filtered-columns +tags: grid, blazor, styling, filtering, css, oncellrender, onstatechanged +res_type: kb +ticketid: 1672604 +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ +## Description + +I want to style filtered columns in the Grid for Blazor using RGBA for better visibility. Specifically, when a filter is applied, I want the background color of column cells to change. + +This knowledge base article answers the following questions: + +* How to apply custom styles to filtered columns in a Blazor Grid? +* How to enhance the visibility of filtered columns in Blazor Grid using CSS? + +## Solution + +To style filtered columns in a Telerik Grid for Blazor: + +1. Use the [`OnCellRender`]({%slug grid-column-events%}#oncellrender) and [`OnStateChanged`]({%slug grid-state%}#onstatechanged) events. +2. Apply a custom CSS class to the filtered columns when a filter is active. The CSS class will be rendered on each cell from these columns. + +>caption Grid with styled filtered column. + +`````CSHTML +@using Telerik.DataSource + + + + + + + + + + + +@code { + private List GridData { get; set; } = new(); + private List FilteredColumns { get; set; } = new(); + + private void OnGridCellRender(GridCellRenderEventArgs args, string field) + { + if (FilteredColumns.Contains(field)) + { + args.Class = "highlighted-column"; + } + } + + private void OnGridStateChanged(GridStateEventArgs args) + { + if (args.PropertyName == "FilterDescriptors") + { + FilteredColumns = new(); + + foreach (CompositeFilterDescriptor cfd in args.GridState.FilterDescriptors) + { + FilterDescriptor fd = (FilterDescriptor)cfd.FilterDescriptors.First(); + + FilteredColumns.Add(fd.Member); + } + } + } + + protected override void OnInitialized() + { + for (int i = 1; i <= 50; i++) + { + GridData.Add(new Employee() + { + ID = i, + Name = $"Employee Name {i}", + Salary = Random.Shared.Next(1000, 10000) + }); + } + } + + public class Employee + { + public int ID { get; set; } + public string Name { get; set; } = string.Empty; + public decimal Salary { get; set; } + } +} +````` +## See Also + +* [Grid Columns](https://docs.telerik.com/blazor-ui/components/grid/columns/bound) +* [OnCellRender Event](https://docs.telerik.com/blazor-ui/components/grid/columns/events) +* [OnStateChanged Event](https://docs.telerik.com/blazor-ui/components/grid/state#onstatechanged) +* [Override the Theme or Apply Custom CSS Styles]({%slug themes-override%})