зеркало из https://github.com/telerik/blazor-docs.git
Added new kb article grid-dynamically-adjusting-column-header-styles (#2523)
* Added new kb article grid-dynamically-adjusting-column-header-styles * Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> * docs(Grid): Add example and update after review * Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * Update knowledge-base/grid-dynamically-adjusting-column-header-styles.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> * docs(Grid): update KB example after review --------- Co-authored-by: KB Bot <kb-bot@telerik.com> Co-authored-by: NansiYancheva <106161782+NansiYancheva@users.noreply.github.com> Co-authored-by: Iva Stefanova Koevska-Atanasova <koevska@progress.com> Co-authored-by: NansiYancheva <nansi.qncheva@abv.bg> Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com>
This commit is contained in:
Kendo Bot
GitHub
Родитель
1d837a54e6
Коммит
b0ad6f319c
|
|
@ -0,0 +1,134 @@
|
||||||
|
---
|
||||||
|
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 Style Column Header Cells Dynamically in a Telerik Blazor Grid
|
||||||
|
slug: grid-dynamically-adjusting-column-header-styles
|
||||||
|
tags: grid, blazor, headerclass
|
||||||
|
res_type: kb
|
||||||
|
ticketid: 1670074
|
||||||
|
---
|
||||||
|
|
||||||
|
## Environment
|
||||||
|
|
||||||
|
<table>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>Product</td>
|
||||||
|
<td>Grid for Blazor, <br /> TreeList for Blazor</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
|
||||||
|
## 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 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.
|
||||||
|
|
||||||
|
### Example
|
||||||
|
|
||||||
|
````CSHTML
|
||||||
|
<TelerikGrid Data="@GridData">
|
||||||
|
<GridColumns>
|
||||||
|
<GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
|
||||||
|
@for (int i = 0; i <= MaxYears; i++)
|
||||||
|
{
|
||||||
|
<GridColumn @key="@i" Field="@( $"StartYear{i}" )" Title=@( $"{StartYear + i}" ) DisplayFormat="{0:N}" HeaderClass="@GetHeaderClass(StartYear + i)" />
|
||||||
|
}
|
||||||
|
</GridColumns>
|
||||||
|
</TelerikGrid>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.past-year-column {
|
||||||
|
background-color: yellow;
|
||||||
|
}
|
||||||
|
|
||||||
|
.previous-year-column {
|
||||||
|
background-color: royalblue;
|
||||||
|
}
|
||||||
|
|
||||||
|
.current-year-column {
|
||||||
|
background-color: pink;
|
||||||
|
}
|
||||||
|
|
||||||
|
.future-year-column {
|
||||||
|
background-color: red;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
@code {
|
||||||
|
private List<Product> GridData { get; set; } = new();
|
||||||
|
private const int MaxYears = 10;
|
||||||
|
private const int StartYear = 2020;
|
||||||
|
private int currYear { get; set; } = DateTime.Now.Year;
|
||||||
|
|
||||||
|
private string GetHeaderClass(int year)
|
||||||
|
{
|
||||||
|
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<Product>();
|
||||||
|
|
||||||
|
for (int i = 1; i <= 20; i++)
|
||||||
|
{
|
||||||
|
GridData.Add(new Product
|
||||||
|
{
|
||||||
|
Id = i,
|
||||||
|
Name = "Product name " + i,
|
||||||
|
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)
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
base.OnInitialized();
|
||||||
|
}
|
||||||
|
|
||||||
|
public class Product
|
||||||
|
{
|
||||||
|
public int Id { get; set; }
|
||||||
|
public string Name { 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; }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
## 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%})
|
||||||
Загрузка…
Ссылка в новой задаче