|
1 | 1 | --- |
2 | 2 | title: Grouping |
3 | | -page_title: ComboBox - Grouping |
4 | | -description: Grouping in the ComboBox for Blazor. |
5 | | -slug: components/combobox/grouping |
6 | | -tags: telerik,blazor,combo,combobox,group,grouping |
| 3 | +page_title: MultiColumnComboBox - Grouping |
| 4 | +description: Grouping in the MultiColumnComboBox for Blazor. |
| 5 | +slug: multicolumncombobox-grouping |
| 6 | +tags: telerik,blazor,multicolumncombobox,combobox,group,grouping |
7 | 7 | published: True |
8 | 8 | position: 15 |
9 | 9 | --- |
10 | 10 |
|
11 | | -# ComboBox Grouping |
| 11 | +# MultiColumnComboBox Grouping |
12 | 12 |
|
13 | | -The ComboBox component allows users to see the listed items grouped in categories. This can improve the user experience and make browsing through the items faster. |
| 13 | +The MultiColumnComboBox component allows users to see the listed items grouped in categories. This can improve the user experience and make browsing through the items faster. |
14 | 14 |
|
15 | | -To enable ComboBox grouping, set the `GroupField` parameter to a field name from the model. The ComboBox will display the corresponding field values as group headers in the dropdown. Nested values of complex object properties are supported (see the example below). |
| 15 | +To enable MultiColumnComboBox grouping, set the `GroupField` parameter to a field name from the model. The MultiColumnComboBox will display the corresponding field values as group headers in the dropdown. Nested values of complex object properties are supported (see the example below). |
16 | 16 |
|
17 | 17 | The group headers can stick to the top of the dropdown during scrolling. In other words, users will always know which is the group of the current topmost items in the scrollable list. |
18 | 18 |
|
19 | | ->caption Grouping in the ComboBox |
| 19 | +>caption Grouping in the MultiColumnComboBox |
20 | 20 |
|
21 | 21 | ````CSHTML |
22 | | -<TelerikComboBox Data="@Data" |
| 22 | +<TelerikMultiColumnComboBox Data="@Data" |
23 | 23 | @bind-Value="@SelectedValue" |
24 | 24 | GroupField="Category.CategoryName" |
25 | 25 | TextField="ProductName" |
26 | 26 | ValueField="ProductId" |
27 | 27 | Placeholder="Select a product"> |
28 | | -</TelerikComboBox> |
| 28 | + <MultiColumnComboBoxColumns> |
| 29 | + <MultiColumnComboBoxColumn Field="@nameof(Product.ProductId)"></MultiColumnComboBoxColumn> |
| 30 | + <MultiColumnComboBoxColumn Field="@nameof(Product.ProductName)"></MultiColumnComboBoxColumn> |
| 31 | + </MultiColumnComboBoxColumns> |
| 32 | +</TelerikMultiColumnComboBox> |
29 | 33 |
|
30 | 34 | @code { |
31 | 35 | public IEnumerable<Product> Data { get; set; } |
@@ -68,10 +72,10 @@ The group headers can stick to the top of the dropdown during scrolling. In othe |
68 | 72 |
|
69 | 73 | * One level of grouping is supported. |
70 | 74 | * The `DefaultItem` (e.g. "Select item...") is always rendered above the sticky group header in the dropdown. |
71 | | -* A grouped ComboBox will provide a `Groups` property with a single [`GroupDescriptor`](https://docs.telerik.com/blazor-ui/api/Telerik.DataSource.GroupDescriptor) in the [`DataSourceRequest`](https://docs.telerik.com/blazor-ui/api/Telerik.DataSource.DataSourceRequest) argument of its [OnRead event]({%slug components/combobox/events%}#onread). This will allow the developer to apply grouping with [manual data operations]({%slug components/grid/manual-operations%}). |
| 75 | +* A grouped MultiColumnComboBox will provide a `Groups` property with a single [`GroupDescriptor`](https://docs.telerik.com/blazor-ui/api/Telerik.DataSource.GroupDescriptor) in the [`DataSourceRequest`](https://docs.telerik.com/blazor-ui/api/Telerik.DataSource.DataSourceRequest) argument of its [OnRead event]({%slug multicolumncombobox-events%}#onread). This will allow the developer to apply grouping with [manual data operations]({%slug components/grid/manual-operations%}). |
72 | 76 | * `GroupHeaderTemplate` and `GroupItemTemplate` will be introduced in a future version. Currently there is a bug in the Blazor framework that prevents us from supporting them. |
73 | 77 | * Virtual scrolling with grouping will be supported in a future version. |
74 | 78 |
|
75 | 79 | ## See Also |
76 | 80 |
|
77 | | - * [Live Demo: ComboBox Grouping](https://demos.telerik.com/blazor-ui/combobox/grouping) |
| 81 | + * [Live Demo: ComboBox Grouping](https://demos.telerik.com/blazor-ui/multicolumncombobox/grouping) |
0 commit comments