Skip to content

Commit afc55ee

Browse files
ntachevantacheva
committed
chore(Grid): document templates breaking changes
1 parent 0d341f9 commit afc55ee

File tree

2 files changed

+186
-80
lines changed

2 files changed

+186
-80
lines changed

‎components/grid/templates/column.md‎

Lines changed: 1 addition & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -100,87 +100,8 @@ The example below shows how to:
100100
101101
## Using Components in Grid Column Templates
102102

103-
The Grid optimizes the UI renders after data operations. If you are using child components inside Grid column templates, <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor/components/element-component-model-relationships" target="_blank">set the `@key` attribute to these components to ensure that they always show the correct values and content after filtering, paging, and sorting</a>.
104-
105-
>caption Seting @key to child components inside a Grid column template
106-
<div class="skip-repl"></div>
107-
````RAZOR Home.razor
108-
@using YourAppName.Data
109-
110-
<TelerikGrid Data="@GridData"
111-
TItem="@SampleModel"
112-
FilterMode="GridFilterMode.FilterRow"
113-
Pageable="true"
114-
PageSize="5"
115-
Sortable="true">
116-
<GridColumns>
117-
<GridColumn Field="@nameof(SampleModel.Name)" Title="Template with Key">
118-
<Template>
119-
@{ var dataItem = (SampleModel)context; }
120-
<Child @key="@dataItem" Model="@dataItem" Color="green" />
121-
</Template>
122-
</GridColumn>
123-
<GridColumn Field="@nameof(SampleModel.Name)" Title="Template without Key">
124-
<Template>
125-
@{ var dataItem = (SampleModel)context; }
126-
<Child Model="@dataItem" Color="red" />
127-
</Template>
128-
</GridColumn>
129-
</GridColumns>
130-
</TelerikGrid>
131-
132-
@code {
133-
private List<SampleModel> GridData { get; set; } = new();
134-
135-
protected override void OnInitialized()
136-
{
137-
for (int i = 1; i <= 77; i++)
138-
{
139-
GridData.Add(new SampleModel()
140-
{
141-
Id = i,
142-
Name = $"Name {i}"
143-
});
144-
}
145-
}
146-
}
147-
````
148-
````RAZOR Child.razor
149-
@using YourAppName.Data
103+
See specifics and example in this knowledge base article: [Using Components in Grid Templates]({%slug grid-kb-using-components-in-templates%})
150104

151-
Properties require @@key:
152-
<strong style="color: @Color; background: yellow; padding: 0 .2em;">@Foo</strong>
153-
154-
<br />
155-
156-
Parameters refresh:
157-
<strong>@Model.Id</strong>
158-
159-
@code {
160-
[Parameter]
161-
public SampleModel Model { get; set; } = new();
162-
163-
[Parameter]
164-
public string Color { get; set; } = "inherit";
165-
166-
private string Foo { get; set; } = string.Empty;
167-
168-
protected override void OnInitialized()
169-
{
170-
Foo = Model.Id.ToString();
171-
}
172-
}
173-
````
174-
````C# SampleModel.cs
175-
namespace YourAppName.Data
176-
{
177-
public class SampleModel
178-
{
179-
public int Id { get; set; }
180-
public string Name { get; set; } = string.Empty;
181-
}
182-
}
183-
````
184105

185106
## See Also
186107

‎knowledge-base/grid-using-components-in-templates.md‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
---
2+
title: Using Components in Grid Templates
3+
description: How to use my custom component in the various UI for Blazor Grid templates
4+
type: how-to
5+
page_title: Using Components in Grid Templates
6+
slug: grid-kb-using-components-in-templates
7+
position:
8+
tags:
9+
ticketid:
10+
res_type: kb
11+
---
12+
13+
## Environment
14+
15+
<table>
16+
<tbody>
17+
<tr>
18+
<td>Product</td>
19+
<td>Grid for Blazor</td>
20+
</tr>
21+
</tbody>
22+
</table>
23+
24+
## Description
25+
26+
I'm trying to render my own component in the Column Template of the Grid. However, the component does not show correct values after filtering, paging or sorting.
27+
28+
How to properly use components in Grid templates?
29+
30+
## Solution
31+
32+
The Grid optimizes the UI renders after data operations. If you are using child components inside Grid column templates, [set the `@key` attribute to these components to ensure that they always show the correct values and content after filtering, paging, and sorting](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/element-component-model-relationships?view=aspnetcore-9.0).
33+
34+
This applies to the following Grid elements:
35+
36+
* [CommandColumn]({%slug components/grid/columns/command%})
37+
* [DetailTemplate]({%slug components/grid/features/hierarchy%})
38+
* [FooterTemplate]({%slug grid-templates-column-footer%})
39+
* [GroupFooterTemplate]({%slug grid-templates-column-group-footer%})
40+
* [RowTemplate]({%slug grid-templates-row%})
41+
* [Template]({%slug grid-templates-column%})
42+
43+
> caption Seting @key to child components inside Grid templates
44+
45+
<div class="skip-repl"></div>
46+
````RAZOR Home.razor
47+
@using YourAppName.Data
48+
<ul>
49+
<li>Filter and sort the Grid to see the difference between the two columns.</li>
50+
<li>Group the Grid by the first column to test the GroupFooterTemplate.</li>
51+
<li>Uncomment the RowTemplate to see it in action. </li>
52+
</ul>
53+
54+
<TelerikGrid Data="@GridData"
55+
EditMode="@GridEditMode.Inline"
56+
FilterMode="GridFilterMode.FilterRow"
57+
Groupable="true"
58+
Pageable="true"
59+
PageSize="5"
60+
Sortable="true">
61+
<GridAggregates>
62+
<GridAggregate Field="@nameof(SampleModel.Id)" FieldType="@typeof(int)" Aggregate="@GridAggregateType.Max" />
63+
</GridAggregates>
64+
<GridColumns>
65+
<GridColumn Field="@nameof(SampleModel.Id)" Title="Template with Key">
66+
<Template>
67+
@{
68+
var dataItem = (SampleModel)context;
69+
}
70+
Direct: @dataItem.Id
71+
<br />
72+
In child:
73+
<Child @key="@dataItem" Model="@dataItem" Color="green" />
74+
</Template>
75+
<FooterTemplate>
76+
Direct: @context.Max
77+
<br />
78+
In child:
79+
<Child Model="@( new SampleModel() { Id = Convert.ToInt32(context.Max) })" Color="green" />
80+
</FooterTemplate>
81+
<GroupFooterTemplate>
82+
Direct: @context.Max
83+
<br />
84+
In child:
85+
<Child Model="@( new SampleModel() { Id = Convert.ToInt32(context.Max) })" Color="green" />
86+
</GroupFooterTemplate>
87+
</GridColumn>
88+
<GridColumn Field="@nameof(SampleModel.Name)" Title="Template without Key">
89+
<Template>
90+
@{
91+
var dataItem = (SampleModel)context;
92+
}
93+
Direct: @dataItem.Id
94+
<br />
95+
In child:
96+
<Child Model="@dataItem" Color="red" />
97+
</Template>
98+
</GridColumn>
99+
<GridCommandColumn>
100+
<GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil" />
101+
<GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true" />
102+
@{
103+
var dataItem = (SampleModel)context;
104+
}
105+
Direct: @dataItem.Id
106+
<br />
107+
In child:
108+
<Child @key="@dataItem" Model="@dataItem" />
109+
</GridCommandColumn>
110+
</GridColumns>
111+
@* <RowTemplate>
112+
@{
113+
var dataItem = (SampleModel)context;
114+
}
115+
<td>
116+
Direct: @dataItem.Id
117+
<br />
118+
In child:
119+
<Child @key="@dataItem" Model="@dataItem" />
120+
</td>
121+
<td>@dataItem.Name</td>
122+
</RowTemplate> *@
123+
<DetailTemplate>
124+
@{
125+
var masterItem = (SampleModel)context;
126+
}
127+
<p><strong>DetailTemplate</strong></p>
128+
Direct: @masterItem.Id
129+
<br />
130+
In child: <Child @key="@masterItem" Model="@masterItem" />
131+
</DetailTemplate>
132+
</TelerikGrid>
133+
134+
@code {
135+
private List<SampleModel> GridData { get; set; } = new();
136+
137+
protected override void OnInitialized()
138+
{
139+
for (int i = 1; i <= 77; i++)
140+
{
141+
GridData.Add(new SampleModel()
142+
{
143+
Id = i,
144+
Name = $"Name {i}"
145+
});
146+
}
147+
}
148+
}
149+
````
150+
````RAZOR Child.razor
151+
@using YourAppName.Data
152+
153+
Properties require @@key:
154+
<strong style="color: @Color; background: yellow; padding: 0 .2em;">@Foo</strong>
155+
156+
<br />
157+
158+
Parameters refresh:
159+
<strong>@Model.Id</strong>
160+
161+
@code {
162+
[Parameter]
163+
public SampleModel Model { get; set; } = new();
164+
165+
[Parameter]
166+
public string Color { get; set; } = "inherit";
167+
168+
private string Foo { get; set; } = string.Empty;
169+
170+
protected override void OnInitialized()
171+
{
172+
Foo = Model.Id.ToString();
173+
}
174+
}
175+
````
176+
````C# SampleModel.cs
177+
namespace YourAppName.Data
178+
{
179+
public class SampleModel
180+
{
181+
public int Id { get; set; }
182+
public string Name { get; set; } = string.Empty;
183+
}
184+
}
185+
````

0 commit comments

Comments
 (0)