You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Copy file name to clipboardExpand all lines: components/grid/columns/bound.md
+2Lines changed: 2 additions & 0 deletions
Original file line number
Diff line number
Diff line change
@@ -81,6 +81,8 @@ You can use the following properties on the bound columns:
81
81
82
82
*`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.
83
83
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
+
84
86
*`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%}).
85
87
86
88
*`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.
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`.
108
110
109
111
To hide a column from the Column Chooser set the `VisibleInColumnChooser` property of the column to `false`.
110
112
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
+

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. *@
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
+
111
196
### Example of Column Menu Features Settings
112
197
113
198
>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
165
250
166
251
* If the Grid has a [frozen]({%slug grid-columns-frozen%}) column (`Locked="true"`), that column cannot be unfrozen from the column menu.
167
252
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.
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 *@
0 commit comments