Skip to content

Commit d6be6ea

Browse files
xristianstefanovxristianstefanov
committed
chore(Grid): polish docs
1 parent 2ae495e commit d6be6ea

File tree

2 files changed

+79
-62
lines changed

2 files changed

+79
-62
lines changed

‎components/grid/columns/command.md‎

Lines changed: 1 addition & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -94,68 +94,7 @@ Use a **named** context variable to avoid errors when nesting components or `Ren
9494

9595
### Header Template
9696

97-
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.
98-
99-
>caption Grid Command Column Header Template
100-
101-
````RAZOR
102-
@* Customize the header of the command column *@
103-
104-
<TelerikGrid Data="@GridData"
105-
EditMode="@GridEditMode.Inline"
106-
OnUpdate="@OnUpdateHandler"
107-
Pageable="true"
108-
Height="400px">
109-
<GridColumns>
110-
<GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
111-
<GridColumn Field="@nameof(Product.Price)" Title="Price" />
112-
<GridColumn Field="@nameof(Product.Quantity)" Title="Quantity" />
113-
<GridCommandColumn Width="280px">
114-
<HeaderTemplate>
115-
<TelerikSvgIcon Icon="@SvgIcon.Gear" />
116-
<strong>Actions</strong>
117-
</HeaderTemplate>
118-
<GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
119-
<GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
120-
<GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
121-
<GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
122-
</GridCommandColumn>
123-
</GridColumns>
124-
</TelerikGrid>
125-
126-
@code {
127-
private List<Product> GridData { get; set; } = new List<Product>();
128-
129-
private async Task OnUpdateHandler(GridCommandEventArgs args)
130-
{
131-
var updatedItem = args.Item as Product;
132-
var index = GridData.FindIndex(p => p.Id == updatedItem.Id);
133-
if (index != -1)
134-
{
135-
GridData[index] = updatedItem;
136-
}
137-
}
138-
139-
protected override void OnInitialized()
140-
{
141-
GridData = Enumerable.Range(1, 10).Select(x => new Product
142-
{
143-
Id = x,
144-
Name = "Product " + x,
145-
Price = Random.Shared.Next(1, 100),
146-
Quantity = Random.Shared.Next(0, 50)
147-
}).ToList();
148-
}
149-
150-
public class Product
151-
{
152-
public int Id { get; set; }
153-
public string Name { get; set; }
154-
public decimal Price { get; set; }
155-
public int Quantity { get; set; }
156-
}
157-
}
158-
````
97+
The Grid command column supports [`HeaderTemplate`](slug:grid-templates-command-column-header) that allows you to customize the header cell's rendering.
15998

16099
## Example
161100

‎components/grid/templates/command-column-header.md‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
title: Command Column Header
3+
page_title: Grid - Command Column Header Template
4+
description: Use custom command column header template in Grid for Blazor.
5+
slug: grid-templates-command-column-header
6+
tags: telerik,blazor,grid,templates,command,column,header
7+
published: True
8+
position: 23
9+
---
10+
11+
# Command Column Header Template
12+
13+
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.
14+
15+
>caption Grid Command Column Header Template
16+
17+
````RAZOR
18+
@* Customize the header of the command column *@
19+
20+
<TelerikGrid Data="@GridData"
21+
EditMode="@GridEditMode.Inline"
22+
OnUpdate="@OnUpdateHandler"
23+
Pageable="true"
24+
Height="400px">
25+
<GridColumns>
26+
<GridColumn Field="@nameof(Product.Name)" Title="Product Name" />
27+
<GridColumn Field="@nameof(Product.Price)" Title="Price" />
28+
<GridColumn Field="@nameof(Product.Quantity)" Title="Quantity" />
29+
<GridCommandColumn Width="280px">
30+
<HeaderTemplate>
31+
<TelerikSvgIcon Icon="@SvgIcon.Gear" />
32+
<strong>Actions</strong>
33+
</HeaderTemplate>
34+
<GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil">Edit</GridCommandButton>
35+
<GridCommandButton Command="Save" Icon="@SvgIcon.Save" ShowInEdit="true">Update</GridCommandButton>
36+
<GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true">Cancel</GridCommandButton>
37+
<GridCommandButton Command="Delete" Icon="@SvgIcon.Trash">Delete</GridCommandButton>
38+
</GridCommandColumn>
39+
</GridColumns>
40+
</TelerikGrid>
41+
42+
@code {
43+
private List<Product> GridData { get; set; } = new List<Product>();
44+
45+
private async Task OnUpdateHandler(GridCommandEventArgs args)
46+
{
47+
var updatedItem = args.Item as Product;
48+
var index = GridData.FindIndex(p => p.Id == updatedItem.Id);
49+
if (index != -1)
50+
{
51+
GridData[index] = updatedItem;
52+
}
53+
}
54+
55+
protected override void OnInitialized()
56+
{
57+
GridData = Enumerable.Range(1, 10).Select(x => new Product
58+
{
59+
Id = x,
60+
Name = "Product " + x,
61+
Price = Random.Shared.Next(1, 100),
62+
Quantity = Random.Shared.Next(0, 50)
63+
}).ToList();
64+
}
65+
66+
public class Product
67+
{
68+
public int Id { get; set; }
69+
public string Name { get; set; }
70+
public decimal Price { get; set; }
71+
public int Quantity { get; set; }
72+
}
73+
}
74+
````
75+
76+
## See Also
77+
78+
* [Grid Command Column](slug:components/grid/columns/command)

0 commit comments

Comments
 (0)