docs(multiselect): Add Tag mode article

Author: vveesseelliinnaa

controls/multiselect/functionality/grouping.md

@@ -9,3 +9,81 @@ position: 4
 ---
 
 
+# Grouping
+
+**RadMultiSelect** can group its data source based on the **GroupByField** property.
+
+The dropdown 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 it.
+
+You can customize the headers through their [templates]({%slug multiselect/functionality/templates%}).
+
+Grouping requires binding the control to a web service, and grouping is performed on the client over the returned flat data.
+
+>caption Example 1: Grouping in RadMultiSelect
+
+````ASP.NET
+<telerik:RadMultiSelect ID="RadMultiSelect4" runat="server" Skin="Default"
+    GroupByField="Country"
+    DataTextField="ContactName" DataValueField="CustomerID"
+    Filter="Contains" Placeholder="select from the dropdown or type"
+    DropDownWidth="500" Height="400" Width="100%">
+    <WebServiceSettings Select-ContentType="JSON" ServiceType="OData"
+        Select-Url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers">
+    </WebServiceSettings>
+    <ColumnsCollection>
+        <telerik:MultiColumnComboBoxColumn Field="CustomerID" Title="ID" />
+        <telerik:MultiColumnComboBoxColumn Field="ContactName" Title="Name" />
+    </ColumnsCollection>
+</telerik:RadMultiSelect>
+````
+
+Web service binding creates a Kendo DataSource and applies the grouping settings to it automatically. You can create your own Kendo DataSource instance and provide local data to it. In such a case, you must also provide the grouping settings to the data source.
+
+>caption Example 2: Grouping with local data and a Kendo DataSource
+
+````ASP.NET
+<script>
+	function OnLoad(sender, args) {
+		var data = [
+			{ id: 1, name: "one", color: "red" },
+			{ id: 2, name: "two", color: "green" },
+			{ id: 3, name: "three", color: "blue" },
+			{ id: 4, name: "four", color: "red" }
+		];
+
+		var kendoDs = new kendo.data.DataSource({
+			data: data,
+			//clone the original group settings from the server
+			group: {
+				field: sender.groupByField
+			}
+		});
+
+		sender.set_dataSource(kendoDs);
+	}
+</script>
+
+<telerik:RadMultiSelect ID="RadMultiSelect4" runat="server" Skin="Default"
+	GroupByField="color" DataTextField="name" DataValueField="id" 
+	Filter="Contains" FilterFields="name, color"
+	DropDownWidth="500" Height="400" Width="300px">
+	<ColumnsCollection>
+		<telerik:MultiColumnComboBoxColumn Field="id" Title="ID" />
+		<telerik:MultiColumnComboBoxColumn Field="name" Title="Name" />
+		<telerik:MultiColumnComboBoxColumn Field="color" Title="color" />
+	</ColumnsCollection>
+	<ClientEvents OnLoad="OnLoad" />
+</telerik:RadMultiSelect>
+````
+
+
+
+## See Also
+
+* [Live Demo - Grouping](multiselect/grouping/defaultcs.aspx)
+
+* [Templates]({%slug multiselect/functionality/templates%})
+
+* [Kendo Data Source Grouping Configuration](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/group)
+
+

controls/multiselect/functionality/tag-mode.md

@@ -7,3 +7,31 @@ tags: tags,tag,mode,client,customize
 published: True
 position: 3
 ---
+
+# Tag Mode
+
+**RadMultiSelect** provides options for displaying the items as individual (multiple) tags and as a single, summary tag. The available modes are (you can see them in **Figure 1**):
+ * `Single` - renders only one tag that shows the number of the selected values
+ * `Multiple` - renders a tag for every selected value. This is the default tag mode.
+
+![multiselect-tag-modes](../images/multiselect-tag-mode.png)
+
+Every `TagMode` has a specific `TagTemplate` value. You can control the content of the rendered tags by setting a custom a [TagTemplate]]({%slug multiselect/functionality/templates%}#tag-template) value.
+
+>caption Example 1: RadMultiSelect with single tag mode
+
+````ASP.NET
+<telerik:RadMultiSelect ID="RadMultiSelect1" runat="server"  Filter="Contains" Width="240px"
+    DataTextField="text" DataValueField="value" TagMode="Single">
+    <Items>
+        <telerik:MultiSelectItem Text="Apples" Value="1"></telerik:MultiSelectItem>
+        <telerik:MultiSelectItem Text="Oranges" Value="2"></telerik:MultiSelectItem>
+        <telerik:MultiSelectItem Text="Bananas" Value="3"></telerik:MultiSelectItem>
+        <telerik:MultiSelectItem Text="Cherries" Value="4"></telerik:MultiSelectItem>
+    </Items>
+</telerik:RadMultiSelect>
+````
+
+## See Also
+
+* [Live Demo - Tag Mode](https://localdemos.telerik.com/aspnet-ajax-dev/multiselect/tagmode/defaultcs.aspx)