Skip to content

Commit 837da54

Browse files
github-actions[bot]ntacheva
github-actions[bot]
and
ntacheva
authored
Merge document-using-components-in-templates-2667 into production (#2674)
* chore(Grid): document templates breaking changes * chore(Grid): link kb * chore(Grid): update breaking changes * chore(Grid): add sections in footer and group footer templates --------- Co-authored-by: Nadezhda Tacheva <[email protected]>
1 parent 681f2ae commit 837da54

File tree

9 files changed

+209
-82
lines changed

9 files changed

+209
-82
lines changed

‎_contentTemplates/grid/common-link.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -211,3 +211,7 @@ Therefore, we advise that you do not set `Locked=false` for child columns of loc
211211
The keyboard navigation in the multi-column headers follows the functionality of Excel.
212212

213213
#end
214+
215+
#using-components-in-templates
216+
See specifics and example in this knowledge base article: [Using Components in Grid Templates]({%slug grid-kb-using-components-in-templates%}).
217+
#end

‎components/grid/columns/command.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,10 @@ The following code example demonstrates declarations and handling.
219219
220220
![Blazor Grid Command Column Result](images/command-column-result.png)
221221

222+
## Using Components in Grid Command Column
223+
224+
@[template](/_contentTemplates/grid/common-link.md#using-components-in-templates)
225+
222226
## See Also
223227

224228
* [Live Demo: Grid Command Column](https://demos.telerik.com/blazor-ui/grid/editing-inline)

‎components/grid/hierarchy.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,6 +119,9 @@ The following articles and sample projects can be helpful when implementing hier
119119

120120
* [Custom Excel Export that Includes Hierarchy](https://github.com/telerik/blazor-ui/tree/master/grid/export-to-xlsx-hierarchy)
121121

122+
## Using Components in Grid Detail Templates
123+
124+
@[template](/_contentTemplates/grid/common-link.md#using-components-in-templates)
122125

123126
## See Also
124127

‎components/grid/templates/column-footer.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,9 @@ You can use [aggregates]({%slug grid-aggregates%}) for the current field directl
8282
8383
![Blazor Grid Footer Template](images/footer-template.png)
8484

85+
## Using Components in Grid Column Footer Templates
86+
87+
@[template](/_contentTemplates/grid/common-link.md#using-components-in-templates)
8588

8689
## Notes
8790

‎components/grid/templates/column-group-footer.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -79,6 +79,9 @@ When the grid is grouped, the columns can display a footer with information abou
7979
8080
![Blazor Grid Column Group Footer Template](images/column-group-footer-template.png)
8181

82+
## Using Components in Grid Group Footer Templates
83+
84+
@[template](/_contentTemplates/grid/common-link.md#using-components-in-templates)
8285

8386
## See Also
8487

‎components/grid/templates/column.md‎

Lines changed: 1 addition & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -100,87 +100,7 @@ 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
150-
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-
````
103+
@[template](/_contentTemplates/grid/common-link.md#using-components-in-templates)
184104

185105
## See Also
186106

‎components/grid/templates/row.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@ Render the entire row with your own code and logic
6262
6363
![Blazor Grid Row Template](images/row-template.png)
6464

65+
## Using Components in Grid Row Templates
66+
67+
@[template](/_contentTemplates/grid/common-link.md#using-components-in-templates)
68+
6569

6670
## See Also
6771

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

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
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 Setting @key to child components inside Grid templates
44+
45+
<div class="skip-repl"></div>
46+
````RAZOR Home.razor
47+
@using YourAppName.Data
48+
49+
<ul>
50+
<li>Filter and sort the Grid to see the difference between the two columns.</li>
51+
<li>Group the Grid by the first column to test the GroupFooterTemplate.</li>
52+
<li>Uncomment the RowTemplate to see it in action. </li>
53+
</ul>
54+
55+
<TelerikGrid Data="@GridData"
56+
EditMode="@GridEditMode.Inline"
57+
FilterMode="GridFilterMode.FilterRow"
58+
Groupable="true"
59+
Pageable="true"
60+
PageSize="5"
61+
Sortable="true">
62+
<GridAggregates>
63+
<GridAggregate Field="@nameof(SampleModel.Id)" FieldType="@typeof(int)" Aggregate="@GridAggregateType.Max" />
64+
</GridAggregates>
65+
<GridColumns>
66+
<GridColumn Field="@nameof(SampleModel.Id)" Title="Template with Key">
67+
<Template>
68+
@{
69+
var dataItem = (SampleModel)context;
70+
}
71+
Direct: @dataItem.Id
72+
<br />
73+
In child:
74+
<Child @key="@dataItem" Model="@dataItem" Color="green" />
75+
</Template>
76+
<FooterTemplate>
77+
Direct: @context.Max
78+
<br />
79+
In child:
80+
<Child Model="@( new SampleModel() { Id = Convert.ToInt32(context.Max) })" Color="green" />
81+
</FooterTemplate>
82+
<GroupFooterTemplate>
83+
Direct: @context.Max
84+
<br />
85+
In child:
86+
<Child Model="@( new SampleModel() { Id = Convert.ToInt32(context.Max) })" Color="green" />
87+
</GroupFooterTemplate>
88+
</GridColumn>
89+
<GridColumn Field="@nameof(SampleModel.Name)" Title="Template without Key">
90+
<Template>
91+
@{
92+
var dataItem = (SampleModel)context;
93+
}
94+
Direct: @dataItem.Id
95+
<br />
96+
In child:
97+
<Child Model="@dataItem" Color="red" />
98+
</Template>
99+
</GridColumn>
100+
<GridCommandColumn>
101+
<GridCommandButton Command="Edit" Icon="@SvgIcon.Pencil" />
102+
<GridCommandButton Command="Cancel" Icon="@SvgIcon.Cancel" ShowInEdit="true" />
103+
@{
104+
var dataItem = (SampleModel)context;
105+
}
106+
Direct: @dataItem.Id
107+
<br />
108+
In child:
109+
<Child @key="@dataItem" Model="@dataItem" />
110+
</GridCommandColumn>
111+
</GridColumns>
112+
@* <RowTemplate>
113+
@{
114+
var dataItem = (SampleModel)context;
115+
}
116+
<td>
117+
Direct: @dataItem.Id
118+
<br />
119+
In child:
120+
<Child @key="@dataItem" Model="@dataItem" />
121+
</td>
122+
<td>@dataItem.Name</td>
123+
</RowTemplate> *@
124+
<DetailTemplate>
125+
@{
126+
var masterItem = (SampleModel)context;
127+
}
128+
<p><strong>DetailTemplate</strong></p>
129+
Direct: @masterItem.Id
130+
<br />
131+
In child: <Child @key="@masterItem" Model="@masterItem" />
132+
</DetailTemplate>
133+
</TelerikGrid>
134+
135+
@code {
136+
private List<SampleModel> GridData { get; set; } = new();
137+
138+
protected override void OnInitialized()
139+
{
140+
for (int i = 1; i <= 77; i++)
141+
{
142+
GridData.Add(new SampleModel()
143+
{
144+
Id = i,
145+
Name = $"Name {i}"
146+
});
147+
}
148+
}
149+
}
150+
````
151+
````RAZOR Child.razor
152+
@using YourAppName.Data
153+
154+
Properties require @@key:
155+
<strong style="color: @Color; background: yellow; padding: 0 .2em;">@Foo</strong>
156+
157+
<br />
158+
159+
Parameters refresh:
160+
<strong>@Model.Id</strong>
161+
162+
@code {
163+
[Parameter]
164+
public SampleModel Model { get; set; } = new();
165+
166+
[Parameter]
167+
public string Color { get; set; } = "inherit";
168+
169+
private string Foo { get; set; } = string.Empty;
170+
171+
protected override void OnInitialized()
172+
{
173+
Foo = Model.Id.ToString();
174+
}
175+
}
176+
````
177+
````C# SampleModel.cs
178+
namespace YourAppName.Data
179+
{
180+
public class SampleModel
181+
{
182+
public int Id { get; set; }
183+
public string Name { get; set; } = string.Empty;
184+
}
185+
}
186+
````

‎upgrade/breaking-changes/7-0-0.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ The obsolete `ClearButton` parameter is removed. Use `ShowClearButton` instead.
4444
* The obsolete `AutoFitColumns()` method is removed. Use `AutoFitColumnsAsync()` instead.
4545
* The obsolete `AutoFitAllColumns()` method is removed. Use `AutoFitAllColumnsAsync()` instead.
4646
* When using [grouping and `OnRead`]({%slug components/grid/manual-operations%}#grouping-with-onread), casting `DataSourceResult.Data` to a list of objects (`.Cast<object>()`) is no longer needed.
47-
* [Components in a Grid column `<Template>` require a `@key`]({%slug grid-templates-column%}#using-components-in-grid-column-templates) in order to display correct values after data operations like sorting, filtering, paging, and others.
47+
* [Components in some Grid templates require a `@key`]({%slug grid-kb-using-components-in-templates%}) in order to display correct values after data operations like sorting, filtering, paging, and others.
4848

4949
>caption Using custom components in Grid column templates up to version 6.2.0 and after version 7.0.0
5050

0 commit comments

Comments
 (0)