Skip to content

Commit 577932d

Browse files
svdimitrsvdimitr
authored
Document the Template and Grouping in ColumnChooser (#242)
* feat(column-menu): section - initial commit * chore(column-chooser-template): add template article * chore(columnmenu): add new lines * chore(menu-sections): improve code snippet * chore(grouping): add a note * chore(grouping): fix typo * chore(menu): fix see also * chore(column-menu-grouping): improvements * chore(columnmenu): Improvements to the column menu article * chore(menu): add link to the column menu demo * chore(column-chooser-template): add link to custom column menu demo * chore(column-chooser-template): remove note
1 parent c4c6508 commit 577932d

File tree

5 files changed

+183
-3
lines changed

5 files changed

+183
-3
lines changed

‎components/grid/columns/bound.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,8 @@ You can use the following properties on the bound columns:
8181

8282
* `DisplayFormat` - the C# format string that is used to render the field value in the cell when the grid is in display mode. Read more in the [Column Display Format]({%slug grid-columns-displayformat%}) article.
8383

84+
* `Id` - a unique identifier of the Grid Column. Use to associate the column to the respective item in the column chooser when the columns are organized in [sections]({%slug grid-column-menu%}#sections).
85+
8486
* `Editable` - (defaults to `true`) - you can set this property to `true` or `false` to allow or prevent [editing]({%slug components/grid/overview%}#editing) of this field. Defaults to `true`. To edit data, you also need a [CommandColumn]({%slug components/grid/columns/command%}).
8587

8688
* `Filterable` - (defaults to `true`) - you can set this to `false` so a [filterable]({%slug components/grid/filtering%}) grid will not let the user filter that particular column.

‎components/grid/columns/images/column-menu-sections-example.png

25.6 KB
Loading

‎components/grid/columns/menu.md

Lines changed: 90 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ In this article:
2323
* [Filtering](#filtering)
2424
* [Frozen Columns](#frozen-columns)
2525
* [Column Chooser](#column-chooser)
26+
* [Sections](#sections)
2627
* [Notes](#notes)
2728

2829
## Basics
@@ -79,6 +80,7 @@ To control the common features of the `Column Menu` use the `<GridColumnMenuSett
7980
* [Filtering](#filtering)
8081
* [Frozen Columns](#frozen-columns)
8182
* [Column Chooser](#column-chooser)
83+
* [Sections](#sections)
8284

8385
### Sorting
8486

@@ -104,10 +106,93 @@ The Column Chooser in the Column Menu and allows you to toggle the visiblity of
104106

105107
![column chooser screenshot](images/column-menu-chooser-in-action.gif)
106108

107-
To disable the column chooser, set the `ShowColumnChooser` paramter of the `<GridColumnMenuSettings>` to `false`.
109+
To disable the column chooser, set the `ShowColumnChooser` parameter of the `<GridColumnMenuSettings>` to `false`.
108110

109111
To hide a column from the Column Chooser set the `VisibleInColumnChooser` property of the column to `false`.
110112

113+
### Sections
114+
115+
You can organize the columns in the [Column Chooser](#column-chooser) in different sections. To group the columns in different sections:
116+
117+
1. Use the `GridColumnMenuChooser` tag (child to the `GridColumnMenuSettings`)
118+
119+
1. Add the [Template]({%slug grid-templates-column-chooser%}) tag
120+
121+
1. Provide `GridColumnMenuChooserGroup` which is a collection of the columns that should be in the section
122+
123+
* You can use the `Title` parameter to render a Title for the section
124+
125+
1. Use the `GridColumnMenuChooserItem` to denote the columns that should be in the group
126+
127+
* You must use set the `ColumnId` parameter of the `GridColumnMenuChooserItem` to the value of the [`Id`]({%slug components/grid/columns/bound%}#grid-bound-column-parameters) parameter of the corresponding Grid Column.
128+
129+
* If you set the `Title` parameter of the `GridColumnMenuChooserItem` it will override the value of the `Title` parameter of the corresponding Grid Column.
130+
131+
![columns organized in groups](images/column-menu-sections-example.png)
132+
133+
>caption Organize the columns in the Column Chooser in sections
134+
135+
````CSHTML
136+
@* Organize the columns in the Column Chooser in some sections. Use the Id and ColumnId parameters of the Grid Column and GridColumnMenuChooserItem respectively to relate them. *@
137+
138+
<TelerikGrid Data="@MyData"
139+
Pageable="true"
140+
PageSize="5"
141+
Width="700px"
142+
FilterMode="@GridFilterMode.FilterMenu"
143+
Sortable="true"
144+
ShowColumnMenu="true">
145+
<GridSettings>
146+
<GridColumnMenuSettings>
147+
<GridColumnMenuChooser>
148+
<Template>
149+
<GridColumnMenuChooserGroup Title="Personal Information">
150+
<GridColumnMenuChooserItem ColumnId="id-column-id" />
151+
<GridColumnMenuChooserItem ColumnId="firstname-column-id" />
152+
<GridColumnMenuChooserItem ColumnId="lastname-column-id" />
153+
</GridColumnMenuChooserGroup>
154+
<GridColumnMenuChooserGroup Title="Employee Information">
155+
<GridColumnMenuChooserItem ColumnId="companyname-column-id" />
156+
<GridColumnMenuChooserItem ColumnId="team-column-id" />
157+
<GridColumnMenuChooserItem ColumnId="hiredate-column-id" />
158+
</GridColumnMenuChooserGroup>
159+
</Template>
160+
</GridColumnMenuChooser>
161+
</GridColumnMenuSettings>
162+
</GridSettings>
163+
<GridColumns>
164+
<GridColumn Field="@(nameof(SampleData.Id))" Width="80px" Id="id-column-id" />
165+
<GridColumn Field="@(nameof(SampleData.FirstName))" Title="First Name" Id="firstname-column-id" />
166+
<GridColumn Field="@(nameof(SampleData.LastName))" Title="Last Name" Id="lastname-column-id" />
167+
<GridColumn Field="@(nameof(SampleData.CompanyName))" Title="Company" Id="companyname-column-id" />
168+
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Id="team-column-id" />
169+
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" Id="hiredate-column-id" />
170+
</GridColumns>
171+
</TelerikGrid>
172+
173+
@code {
174+
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
175+
{
176+
Id = x,
177+
FirstName = $"FirstName {x}",
178+
LastName = $"LastName {x}",
179+
CompanyName = $"Company {x}",
180+
Team = "team " + x % 5,
181+
HireDate = DateTime.Now.AddDays(-x).Date
182+
});
183+
184+
public class SampleData
185+
{
186+
public int Id { get; set; }
187+
public string FirstName { get; set; }
188+
public string LastName { get; set; }
189+
public string CompanyName { get; set; }
190+
public string Team { get; set; }
191+
public DateTime HireDate { get; set; }
192+
}
193+
}
194+
````
195+
111196
### Example of Column Menu Features Settings
112197

113198
>caption Use the GridColumnMenuSettings tag to control the common features of the Column Menu, use column parameters to affect its relationship with the column menu
@@ -165,6 +250,8 @@ To hide a column from the Column Chooser set the `VisibleInColumnChooser` proper
165250

166251
* If the Grid has a [frozen]({%slug grid-columns-frozen%}) column (`Locked="true"`), that column cannot be unfrozen from the column menu.
167252

168-
## See Also
253+
* If you are using the [Column Chooser Template]({%slug grid-templates-column-chooser%}) or you are grouping the columns into [sections](#sections), it is recommended to add the `Title` parameter to all Grid Columns.
169254

170-
* [Live Demo: Visible Columns](https://demos.telerik.com/blazor-ui/grid/columns)
255+
## See Also
256+
* [Live Demo: Grid Column Menu](https://demos.telerik.com/blazor-ui/grid/column-menu)
257+
* [Live Demo: Grid Custom Column Menu](https://demos.telerik.com/blazor-ui/grid/custom-column-menu)

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
---
2+
title: Column Chooser
3+
page_title: Grid - Column Chooser Template
4+
description: Customize the content of the Column Chooser.
5+
slug: grid-templates-column-chooser
6+
tags: telerik,blazor,grid,templates,column,menu
7+
published: True
8+
position: 40
9+
---
10+
11+
# Column Chooser Template
12+
13+
The `Column Chooser Template` lets you control the rendering of the [ColumnChooser]({%slug grid-column-menu%}#column-chooser). It exposes a `context` object that contains a List of all columns in the Grid.
14+
15+
When the Template is setup the list of columns, rendered by default, would not be present.
16+
17+
>caption Use the Template to provide custom rendering
18+
19+
````CSHTML
20+
@* Use the Template to render the list of columns and add some custom styles *@
21+
22+
<TelerikGrid Data="@MyData"
23+
Pageable="true"
24+
PageSize="5"
25+
Width="700px"
26+
FilterMode="@GridFilterMode.FilterMenu"
27+
Sortable="true"
28+
ShowColumnMenu="true">
29+
<GridSettings>
30+
<GridColumnMenuSettings>
31+
<GridColumnMenuChooser>
32+
<Template>
33+
@{
34+
var columns = context.Columns;
35+
foreach (var column in columns)
36+
{
37+
<div style="border: solid 1px red">
38+
<GridColumnMenuChooserItem Title="@column.DisplayTitle" ColumnId="@column.Id" />
39+
</div>
40+
}
41+
}
42+
43+
</Template>
44+
</GridColumnMenuChooser>
45+
</GridColumnMenuSettings>
46+
</GridSettings>
47+
<GridColumns>
48+
<GridColumn Field="@(nameof(SampleData.Id))" Width="80px" Title="Id" Id="id-column-id" />
49+
<GridColumn Field="@(nameof(SampleData.FirstName))" Title="First Name" Id="firstname-column-id" />
50+
<GridColumn Field="@(nameof(SampleData.LastName))" Title="Last Name" Id="lastname-column-id" />
51+
<GridColumn Field="@(nameof(SampleData.CompanyName))" Title="Company" Id="companyname-column-id" />
52+
<GridColumn Field="@(nameof(SampleData.Team))" Title="Team" Id="team-column-id" />
53+
<GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" Id="hiredate-column-id" />
54+
</GridColumns>
55+
</TelerikGrid>
56+
57+
@code {
58+
public string TextboxValue { get; set; } = string.Empty;
59+
60+
public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
61+
{
62+
Id = x,
63+
FirstName = $"FirstName {x}",
64+
LastName = $"LastName {x}",
65+
CompanyName = $"Company {x}",
66+
Team = "team " + x % 5,
67+
HireDate = DateTime.Now.AddDays(-x).Date
68+
});
69+
70+
public class SampleData
71+
{
72+
public int Id { get; set; }
73+
public string FirstName { get; set; }
74+
public string LastName { get; set; }
75+
public string CompanyName { get; set; }
76+
public string Team { get; set; }
77+
public DateTime HireDate { get; set; }
78+
}
79+
}
80+
````
81+
82+
>caption The result from the code snippet above
83+
84+
![templated column chooser example](images/templates-column-chooser-example.png)
85+
86+
## See Also
87+
88+
* [Live Demo: Grid Templates](https://demos.telerik.com/blazor-ui/grid/templates)
89+
* [Live Demo: Grid Custom Column Menu](https://demos.telerik.com/blazor-ui/grid/custom-column-menu)
90+
* [Columns Menu]({%slug grid-column-menu%})
91+

‎components/grid/templates/images/templates-column-chooser-example.png

22.5 KB
Loading

0 commit comments

Comments
 (0)