From a84a37ccaeee5a33c12454ddae86489c8049a5f2 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Oct 2025 10:45:52 +0000 Subject: [PATCH 1/4] Initial plan From 2ae495e507f6392ac28fa1cc1eb1300979bf8511 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Tue, 21 Oct 2025 10:52:30 +0000 Subject: [PATCH 2/4] Add GridCommandColumn HeaderTemplate documentation Co-authored-by: xristianstefanov <72554148+xristianstefanov@users.noreply.github.com> --- components/grid/columns/command.md | 66 ++++++++++++++++++++++ components/grid/templates/column-header.md | 2 +- 2 files changed, 67 insertions(+), 1 deletion(-) diff --git a/components/grid/columns/command.md b/components/grid/columns/command.md index a34724a2e8..4cc443558a 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,71 @@ Use a **named** context variable to avoid errors when nesting components or `Ren ```` +### 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; } + } +} +```` + ## 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 95a01fad4f..be94d61a3e 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 From d6be6eae2a1e9898a046f49e91daf9a2f970d09e Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Wed, 22 Oct 2025 17:15:50 +0300 Subject: [PATCH 3/4] chore(Grid): polish docs --- components/grid/columns/command.md | 63 +-------------- .../grid/templates/command-column-header.md | 78 +++++++++++++++++++ 2 files changed, 79 insertions(+), 62 deletions(-) create mode 100644 components/grid/templates/command-column-header.md diff --git a/components/grid/columns/command.md b/components/grid/columns/command.md index 4cc443558a..45d7c1c393 100644 --- a/components/grid/columns/command.md +++ b/components/grid/columns/command.md @@ -94,68 +94,7 @@ Use a **named** context variable to avoid errors when nesting components or `Ren ### 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; } - } -} -```` +The Grid command column supports [`HeaderTemplate`](slug:grid-templates-command-column-header) that allows you to customize the header cell's rendering. ## Example diff --git a/components/grid/templates/command-column-header.md b/components/grid/templates/command-column-header.md new file mode 100644 index 0000000000..9e78ea0dad --- /dev/null +++ b/components/grid/templates/command-column-header.md @@ -0,0 +1,78 @@ +--- +title: Command Column Header +page_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 From 719e11094af09fec8411d1cf245c473979d7816a Mon Sep 17 00:00:00 2001 From: Hristian Stefanov Date: Thu, 23 Oct 2025 16:28:16 +0300 Subject: [PATCH 4/4] chore(Grid): add proper meta field --- components/grid/templates/command-column-header.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/templates/command-column-header.md b/components/grid/templates/command-column-header.md index 9e78ea0dad..5e9033eacf 100644 --- a/components/grid/templates/command-column-header.md +++ b/components/grid/templates/command-column-header.md @@ -1,6 +1,6 @@ --- title: Command Column Header -page_title: Grid - Command Column Header Template +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