diff --git a/components/grid/columns/command.md b/components/grid/columns/command.md index a34724a2e..45d7c1c39 100644 --- a/components/grid/columns/command.md +++ b/components/grid/columns/command.md @@ -21,6 +21,7 @@ In this article: * [Built-in Commands](#built-in-commands) * [OnClick Handler](#the-onclick-handler) * [Context](#context) + * [Header Template](#header-template) * [Code Example](#example) ## Features @@ -91,6 +92,10 @@ Use a **named** context variable to avoid errors when nesting components or `Ren ```` +### Header Template + +The Grid command column supports [`HeaderTemplate`](slug:grid-templates-command-column-header) that allows you to customize the header cell's rendering. + ## Example The following code example demonstrates declarations and handling. diff --git a/components/grid/templates/column-header.md b/components/grid/templates/column-header.md index 95a01fad4..be94d61a3 100644 --- a/components/grid/templates/column-header.md +++ b/components/grid/templates/column-header.md @@ -88,7 +88,7 @@ Bound columns render the name of the field or their `Title` in their header. Thr ![Blazor Grid Header Template](images/header-template.png) ->note Header Templates are not available for the `GridCheckboxColumn` and the `GridCommandColumn`. +>note Header Templates are not available for the `GridCheckboxColumn`. ## See Also diff --git a/components/grid/templates/command-column-header.md b/components/grid/templates/command-column-header.md new file mode 100644 index 000000000..5e9033eac --- /dev/null +++ b/components/grid/templates/command-column-header.md @@ -0,0 +1,78 @@ +--- +title: Command Column Header +meta_title: Grid - Command Column Header Template +description: Use custom command column header template in Grid for Blazor. +slug: grid-templates-command-column-header +tags: telerik,blazor,grid,templates,command,column,header +published: True +position: 23 +--- + +# Command Column Header Template + +The `HeaderTemplate` of the Grid command column enables you to customize the header cell's rendering and add custom content or components in the command column header. + +>caption Grid Command Column Header Template + +````RAZOR +@* Customize the header of the command column *@ + + + + + + + + + + Actions + + Edit + Update + Cancel + Delete + + + + +@code { + private List GridData { get; set; } = new List(); + + private async Task OnUpdateHandler(GridCommandEventArgs args) + { + var updatedItem = args.Item as Product; + var index = GridData.FindIndex(p => p.Id == updatedItem.Id); + if (index != -1) + { + GridData[index] = updatedItem; + } + } + + protected override void OnInitialized() + { + GridData = Enumerable.Range(1, 10).Select(x => new Product + { + Id = x, + Name = "Product " + x, + Price = Random.Shared.Next(1, 100), + Quantity = Random.Shared.Next(0, 50) + }).ToList(); + } + + public class Product + { + public int Id { get; set; } + public string Name { get; set; } + public decimal Price { get; set; } + public int Quantity { get; set; } + } +} +```` + +## See Also + +* [Grid Command Column](slug:components/grid/columns/command) \ No newline at end of file