docs(multiselect): Update images

Author: vveesseelliinnaa

controls/multiselect/functionality/grouping.md

@@ -8,82 +8,3 @@ published: True
 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

@@ -14,7 +14,7 @@ position: 3
  * `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)
+![multiselect-tag-modes](../images/multiselect-tag-mode.gif)
 
 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.
 

controls/multiselect/images/multiselect-overview.gif

@@ -16,7 +16,7 @@ It operates on the client, displays a list of options and allows multiple select
 
 >caption Figure 1: RadMultiSelect allows the multiple selection of a predefined list of items
 
-![multiselect-overview](images/multiselect-overview.jpg)
+![multiselect-overview](images/multiselect-overview.gif)
 
 ## Key Features