Skip to content

Commit 6a735fc

Browse files
vveesseelliinnaapepinho24
authored andcommitted
docs(mulstiselect): Add Grouping article
1 parent ba9604f commit 6a735fc

File tree

1 file changed

+48
-0
lines changed

1 file changed

+48
-0
lines changed

controls/multiselect/functionality/grouping.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,51 @@ published: True
88
position: 4
99
---
1010

11+
12+
# Grouping
13+
14+
**RadMultiSelect** can group its data source based on the `GroupExpression` settings in the `WebServiceClientDataSource` tag. The `ClientDataSourceGroupExpression.FieldName` property holds the name of the field from the dataSource which will be used for the gruping.
15+
16+
The popup will show a header with the value of the field for each group, and a static header for the current group just below the column headers, so the user can see which group they are scrolling through regardless of the number of items in the control.
17+
18+
![multiselect-grouping](../images/multiselect-grouping.jpg)
19+
20+
21+
## Configuration
22+
23+
You can customize the headers through their [templates]({%slug multiselect/functionality/templates%}).
24+
25+
Grouping requires binding the control to a web service, and grouping is performed on the client over the returned flat data.
26+
27+
28+
29+
>caption Example 1: Grouping in RadMultiSelect
30+
31+
````ASP.NET
32+
<telerik:RadMultiSelect runat="server" Width="300px" ID="RadMultiSelect1"
33+
DataTextField="ContactName"
34+
DataValueField="CustomerID"
35+
DropDownHeight="400"
36+
Placeholder="Select customers...">
37+
<WebServiceClientDataSource>
38+
<WebServiceSettings ServiceType="OData">
39+
<Select Url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers" />
40+
</WebServiceSettings>
41+
<GroupExpressions>
42+
<telerik:ClientDataSourceGroupExpression FieldName="Country" />
43+
</GroupExpressions>
44+
</WebServiceClientDataSource>
45+
</telerik:RadMultiSelect>
46+
````
47+
48+
Web service binding creates a [Kendo DataSource](https://docs.telerik.com/kendo-ui/framework/datasource/overview) and applies the grouping settings to it automatically.
49+
50+
51+
## See Also
52+
53+
* [Live Demo - Grouping](http://demos.telerik.com/aspnet-ajax/multiselect/grouping/defaultcs.aspx)
54+
55+
* [Templates]({%slug multiselect/functionality/templates%})
56+
57+
* [Kendo Data Source Grouping Configuration](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/group)
58+

0 commit comments

Comments
 (0)