From cb1e63e2fb37cbb7d3925d8a30d493b7ff7dfbee Mon Sep 17 00:00:00 2001 From: KB Bot Date: Tue, 12 Nov 2024 12:59:37 +0000 Subject: [PATCH 01/12] Added new kb article grid-dynamically-adjusting-column-header-styles --- ...amically-adjusting-column-header-styles.md | 43 +++++++++++++++++++ 1 file changed, 43 insertions(+) create mode 100644 knowledge-base/grid-dynamically-adjusting-column-header-styles.md diff --git a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md new file mode 100644 index 0000000000..4019b358c2 --- /dev/null +++ b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md @@ -0,0 +1,43 @@ +--- +title: Dynamically Adjusting Column Header Cell Style in Blazor Grid +description: Learn how to dynamically change the style of a column header cell in a Telerik Blazor Grid based on condition. +type: how-to +page_title: How to Dynamically Style Column Header Cell in a Telerik Blazor Grid +slug: grid-dynamically-adjusting-column-header-styles +tags: grid, blazor, header, headerclass +res_type: kb +ticketid: 1670074 +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ +## Description + +I am dynamically creating Grid columns in a loop and trying to adjust the column header cell style based on some condition and value from the [column field]({%slug components/grid/columns/bound%}#data-binding). Ideally, I want to implement logic to make this adjustment based on the value in the header cell. I have not been able to achieve this in the HeaderTemplate tag or in any of the cell render events handlers. In other templates, I have access to the @context field, which would make this easy, but that doesn't seem to work in the HeaderTemplate. + +## Solution + +To dynamically add style to a column's header cell when dynamically creating columns in a loop, use the [HeaderClass parameter]({%slug components/grid/columns/bound%}#appearance) to set a class under a condition and apply different styles depending on the class. For scenarios with numerous and more complex conditions, create a method to determine the appropriate class. + +It's important to note that the [HeaderTemplate]({%slug grid-templates-column-header%}) does not receive a context argument because it is not related to rows and models, as outlined in the [Templates Overview]({%slug components/grid/features/templates%}) of the Telerik UI for Blazor documentation. + +### Example + +```csharp + +``` + +## See Also + +- [Grid HeaderClass Parameter]({%slug components/grid/columns/bound%}#appearance) +- [Grid Column Header Template]({%slug grid-templates-column-header%}) +- [Templates Overview - Telerik UI for Blazor]({%slug components/grid/features/templates%}) From fa1732a03a475db9d512a1f162689b59b89d77e3 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Wed, 13 Nov 2024 14:12:50 +0200 Subject: [PATCH 02/12] Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- .../grid-dynamically-adjusting-column-header-styles.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md index 4019b358c2..d801d06454 100644 --- a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md +++ b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md @@ -22,7 +22,7 @@ ticketid: 1670074 ## Description -I am dynamically creating Grid columns in a loop and trying to adjust the column header cell style based on some condition and value from the [column field]({%slug components/grid/columns/bound%}#data-binding). Ideally, I want to implement logic to make this adjustment based on the value in the header cell. I have not been able to achieve this in the HeaderTemplate tag or in any of the cell render events handlers. In other templates, I have access to the @context field, which would make this easy, but that doesn't seem to work in the HeaderTemplate. +I am dynamically creating Grid columns in a loop and trying to adjust the column header cell style based on some condition and value from the [column field]({%slug components/grid/columns/bound%}#data-binding). Ideally, I want to implement logic to make this adjustment based on the value in the header cell. I have not been able to achieve this in the `HeaderTemplate` tag or in any of the cell render events handlers. In other templates, I have access to the `@context` field, which would make this easy, but that doesn't seem to work in the `HeaderTemplate`. ## Solution From c0d1b2c11cb618690e9933790d9c45b5772aadfc Mon Sep 17 00:00:00 2001 From: NansiYancheva Date: Wed, 13 Nov 2024 15:32:53 +0200 Subject: [PATCH 03/12] docs(Grid): Add example and update after review --- ...amically-adjusting-column-header-styles.md | 101 +++++++++++++++++- 1 file changed, 98 insertions(+), 3 deletions(-) diff --git a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md index d801d06454..94746152d4 100644 --- a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md +++ b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md @@ -26,14 +26,109 @@ I am dynamically creating Grid columns in a loop and trying to adjust the column ## Solution -To dynamically add style to a column's header cell when dynamically creating columns in a loop, use the [HeaderClass parameter]({%slug components/grid/columns/bound%}#appearance) to set a class under a condition and apply different styles depending on the class. For scenarios with numerous and more complex conditions, create a method to determine the appropriate class. +To dynamically add style to a column's header cell when dynamically creating columns in a loop, use the [`HeaderClass` parameter]({%slug components/grid/columns/bound%}#appearance) to set a class under a condition and apply different styles depending on the class. For scenarios with numerous and more complex conditions, you can create a method to determine the appropriate class. -It's important to note that the [HeaderTemplate]({%slug grid-templates-column-header%}) does not receive a context argument because it is not related to rows and models, as outlined in the [Templates Overview]({%slug components/grid/features/templates%}) of the Telerik UI for Blazor documentation. +Note that the [`HeaderTemplate`]({%slug grid-templates-column-header%}) does not receive a context argument because it is not related to rows and models, as outlined in the [Templates Overview]({%slug components/grid/features/templates%}) of the Telerik UI for Blazor documentation. ### Example -```csharp +````CSHTML + + + + @for (int i = 0; i <= MaxYears; i++) + { + + } + + + + + +@code { + private List GridData { get; set; } + private int MaxYears = 10; + private int StartYear = 2020; + + private string GetHeaderClass(int year) + { + switch (year) + { + case <= 2020: + return "very-past-year-column"; + case < 2024: + return "past-year-column"; + case 2024: + return "current-year-column"; + default: + return "future-year-column"; + } + } + + protected override void OnInitialized() + { + GridData = new List(); + + Random rnd = new Random(); + + for (int i = 1; i <= 30; i++) + { + GridData.Add(new Product + { + Id = i, + Name = "Product name " + i, + Y0 = rnd.Next(100, 9999), + Y1 = rnd.Next(100, 9999), + Y2 = rnd.Next(100, 9999), + Y3 = rnd.Next(100, 9999), + Y4 = rnd.Next(100, 9999), + Y5 = rnd.Next(100, 9999), + Y6 = rnd.Next(100, 9999), + Y7 = rnd.Next(100, 9999), + Y8 = rnd.Next(100, 9999), + Y9 = rnd.Next(100, 9999), + Y10 = rnd.Next(100, 9999) + }); + + } + + base.OnInitialized(); + } + + public class Product + { + public int Id { get; set; } + public string Name { get; set; } + public double? Y0 { get; set; } + public double? Y1 { get; set; } + public double? Y2 { get; set; } + public double? Y3 { get; set; } + public double? Y4 { get; set; } + public double? Y5 { get; set; } + public double? Y6 { get; set; } + public double? Y7 { get; set; } + public double? Y8 { get; set; } + public double? Y9 { get; set; } + public double? Y10 { get; set; } + } +} ``` ## See Also From c30bfbb0b81791c89bbc51cb727ed6da64b23b89 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:16:10 +0200 Subject: [PATCH 04/12] Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- .../grid-dynamically-adjusting-column-header-styles.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md index 94746152d4..c33bf7c49a 100644 --- a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md +++ b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md @@ -4,7 +4,7 @@ description: Learn how to dynamically change the style of a column header cell i type: how-to page_title: How to Dynamically Style Column Header Cell in a Telerik Blazor Grid slug: grid-dynamically-adjusting-column-header-styles -tags: grid, blazor, header, headerclass +tags: grid, blazor, headerclass res_type: kb ticketid: 1670074 --- From d7a4893f4c33ea8f9f862514c4d650793991e4f8 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:16:28 +0200 Subject: [PATCH 05/12] Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- .../grid-dynamically-adjusting-column-header-styles.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md index c33bf7c49a..ff165bdb77 100644 --- a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md +++ b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md @@ -1,5 +1,5 @@ --- -title: Dynamically Adjusting Column Header Cell Style in Blazor Grid +title: Adjust Grid Column Header Styles Dynamically description: Learn how to dynamically change the style of a column header cell in a Telerik Blazor Grid based on condition. type: how-to page_title: How to Dynamically Style Column Header Cell in a Telerik Blazor Grid From 96b7bcc18d673ff1cfb0b3d16c06f53bf2479a7c Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:16:44 +0200 Subject: [PATCH 06/12] Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- .../grid-dynamically-adjusting-column-header-styles.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md index ff165bdb77..154f0ef215 100644 --- a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md +++ b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md @@ -2,7 +2,7 @@ title: Adjust Grid Column Header Styles Dynamically description: Learn how to dynamically change the style of a column header cell in a Telerik Blazor Grid based on condition. type: how-to -page_title: How to Dynamically Style Column Header Cell in a Telerik Blazor Grid +page_title: How to Style Column Header Cells Dynamically in a Telerik Blazor Grid slug: grid-dynamically-adjusting-column-header-styles tags: grid, blazor, headerclass res_type: kb From d32076b6204a7918b6281802f60da116709d3193 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:17:18 +0200 Subject: [PATCH 07/12] Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- .../grid-dynamically-adjusting-column-header-styles.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md index 154f0ef215..e641e1f73b 100644 --- a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md +++ b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md @@ -26,7 +26,7 @@ I am dynamically creating Grid columns in a loop and trying to adjust the column ## Solution -To dynamically add style to a column's header cell when dynamically creating columns in a loop, use the [`HeaderClass` parameter]({%slug components/grid/columns/bound%}#appearance) to set a class under a condition and apply different styles depending on the class. For scenarios with numerous and more complex conditions, you can create a method to determine the appropriate class. +To style a column header cell when dynamically creating columns in a loop, use the [`HeaderClass` parameter]({%slug components/grid/columns/bound%}#appearance) to set a CSS class under a condition and apply different styles depending on the class. For scenarios with numerous and more complex conditions, you can create a method to determine the appropriate class. Note that the [`HeaderTemplate`]({%slug grid-templates-column-header%}) does not receive a context argument because it is not related to rows and models, as outlined in the [Templates Overview]({%slug components/grid/features/templates%}) of the Telerik UI for Blazor documentation. From 35d4cf23517f594081be4abdb0f67fc0531edcf5 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:17:27 +0200 Subject: [PATCH 08/12] Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- .../grid-dynamically-adjusting-column-header-styles.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md index e641e1f73b..5f5cf26f7d 100644 --- a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md +++ b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md @@ -48,7 +48,7 @@ Note that the [`HeaderTemplate`]({%slug grid-templates-column-header%}) does not background-color: yellow; } - .past-year-column { + .previous-year-column { background-color: royalblue; } From fc2089b6accdc0dae8ad5c16d071db5461f8f211 Mon Sep 17 00:00:00 2001 From: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Date: Fri, 15 Nov 2024 14:17:39 +0200 Subject: [PATCH 09/12] Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- .../grid-dynamically-adjusting-column-header-styles.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md index 5f5cf26f7d..d8d7816d3c 100644 --- a/knowledge-base/grid-dynamically-adjusting-column-header-styles.md +++ b/knowledge-base/grid-dynamically-adjusting-column-header-styles.md @@ -44,7 +44,7 @@ Note that the [`HeaderTemplate`]({%slug grid-templates-column-header%}) does not @code { private List GridData { get; set; } = new(); - private int MaxYears = 10; - private int StartYear = 2020; + private const int MaxYears = 10; + private const int StartYear = 2020; + private int currYear { get; set; } = DateTime.Now.Year; private string GetHeaderClass(int year) { - switch (year) - { - case <= 2020: - return "very-past-year-column"; - case < 2024: - return "past-year-column"; - case 2024: - return "current-year-column"; - default: - return "future-year-column"; - } + if (year <= StartYear) + return "past-year-column"; + else if (year < currYear) + return "previous-year-column"; + else if (year == currYear) + return "current-year-column"; + else + return "future-year-column"; } protected override void OnInitialized() { GridData = new List(); - Random rnd = new Random(); - - for (int i = 1; i <= 30; i++) + for (int i = 1; i <= 20; i++) { GridData.Add(new Product { Id = i, Name = "Product name " + i, - Y0 = rnd.Next(100, 9999), - Y1 = rnd.Next(100, 9999), - Y2 = rnd.Next(100, 9999), - Y3 = rnd.Next(100, 9999), - Y4 = rnd.Next(100, 9999), - Y5 = rnd.Next(100, 9999), - Y6 = rnd.Next(100, 9999), - Y7 = rnd.Next(100, 9999), - Y8 = rnd.Next(100, 9999), - Y9 = rnd.Next(100, 9999), - Y10 = rnd.Next(100, 9999) + StartYear0 = Random.Shared.Next(100, 9999), + StartYear1 = Random.Shared.Next(100, 9999), + StartYear2 = Random.Shared.Next(100, 9999), + StartYear3 = Random.Shared.Next(100, 9999), + StartYear4 = Random.Shared.Next(100, 9999), + StartYear5 = Random.Shared.Next(100, 9999), + StartYear6 = Random.Shared.Next(100, 9999), + StartYear7 = Random.Shared.Next(100, 9999), + StartYear8 = Random.Shared.Next(100, 9999), + StartYear9 = Random.Shared.Next(100, 9999), + StartYear10 = Random.Shared.Next(100, 9999) }); } @@ -116,17 +112,17 @@ Note that the [`HeaderTemplate`]({%slug grid-templates-column-header%}) does not { public int Id { get; set; } public string Name { get; set; } - public double? Y0 { get; set; } - public double? Y1 { get; set; } - public double? Y2 { get; set; } - public double? Y3 { get; set; } - public double? Y4 { get; set; } - public double? Y5 { get; set; } - public double? Y6 { get; set; } - public double? Y7 { get; set; } - public double? Y8 { get; set; } - public double? Y9 { get; set; } - public double? Y10 { get; set; } + public double? StartYear0 { get; set; } + public double? StartYear1 { get; set; } + public double? StartYear2 { get; set; } + public double? StartYear3 { get; set; } + public double? StartYear4 { get; set; } + public double? StartYear5 { get; set; } + public double? StartYear6 { get; set; } + public double? StartYear7 { get; set; } + public double? StartYear8 { get; set; } + public double? StartYear9 { get; set; } + public double? StartYear10 { get; set; } } } ```