Merge pull request #4902 from syncfusion-content/BLAZ-910685-doc2

910685: Need to update the documentation for the multicolumn combobox component

Author: PrinceOliver

blazor-toc.html

@@ -3408,6 +3408,24 @@
 					<li> <a href="/blazor/multicolumn-combobox/getting-started">Blazor Server and WASM App</a></li>
 				</ul>
 			</li>
+			<li>
+				<a href="/blazor/multicolumn-combobox/value-binding">Value Binding</a>
+		    </li>
+			<li>
+				<a href="/blazor/multicolumn-combobox/selection">Selection</a>
+		    </li>
+			<li>
+				<a href="/blazor/multicolumn-combobox/data-binding">Data Binding</a>
+			</li>
+			<li>
+				<a href="/blazor/multicolumn-combobox/placeholder-and-floatlabel">Placeholder and Floatlabel</a>
+			</li>
+			<li>
+				<a href="/blazor/multicolumn-combobox/filtering">Filtering</a>
+			</li>
+			<li>
+				<a href="/blazor/multicolumn-combobox/custom-value">Custom Value</a>
+			</li>
 			<li> <a href="/blazor/multicolumn-combobox/popup-setting">Popup Setting</a></li>
 			<li><a href="/blazor/multicolumn-combobox/sorting">Sorting</a></li>
 			<li> <a href="/blazor/multicolumn-combobox/virtualization">Virtualization</a></li>

blazor/multicolumn-combobox/data-binding.md

@@ -65,31 +65,6 @@ Index value binding can be accomplished with the `bind-Index` attribute, which s
 }
 ```
 
-<!-- ### DataBound event
-
-The [DataBound]() event triggers when the data source is populated in the popup list.
-
-{% highlight cshtml %}
-
-{% include_relative code-snippet/data-binding/data-bound.razor %}
-
-{% endhighlight %}
-
-
-### Complex data type
-
-The MultiColumn ComboBox can generate its list items through an array of complex data. For this, the appropriate columns should be mapped to the [TextField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_TextField) and [ValueField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ValueField) property.
-
-In the following example, the `Code.ID` column and `Country.CountryID` column from complex data have been mapped to the [TextField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_TextField) and [ValueField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ValueField) property respectively.
-
-{% highlight cshtml %}
-
-{% include_relative code-snippet/data-binding/complex-data-type.razor %}
-
-{% endhighlight %}
-
-![Blazor ComboBox with Complex data type](./images/data-binding/blazor_combobox_complex-data-type.png) -->
-
 ### Expando object binding
 
 Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.expandoobject?view=net-5.0) data to the MultiColumn ComboBox component. In the following example, the `ExpandoObject` is bound to the collection of vehicles data.
@@ -102,18 +77,6 @@ Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn
 
 ![Blazor ComboBox with Expando object binding](./images/data-binding/blazor_combobox_expando-object-binding.png)
 
-<!-- ### Observable collection binding
-
-Bind the [ObservableCollection](https://blazor.syncfusion.com/documentation/common/data-binding/data-updates#observable-collection) data to the MultiColumn ComboBox component. In the following example, the `Observable Data` is bound to a collection of colors data.
-
-{% highlight cshtml %}
-
-{% include_relative code-snippet/data-binding/observable-collection-binding.razor %}
-
-{% endhighlight %}
-
-![Blazor ComboBox with Observable collection binding](./images/data-binding/blazor_combobox_observable-collection-binding.png) -->
-
 ### Dynamic object binding
 
 Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic.dynamicobject?view=net-5.0) data to the MultiColumn ComboBox component. In the following example, the `DynamicObject` is bound to the collection of customer data.
@@ -136,8 +99,6 @@ Bind the [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuet
 
 {% endhighlight %}
 
-![Blazor ComboBox with ValueTuple data binding](./images/data-binding/blazor_combobox_value-tuple-data-binding.png)
-
 ## Binding remote data 
 
 The MultiColumn ComboBox loads the data from remote data services through the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_DataSource) property. 
@@ -158,16 +119,6 @@ The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Mult
 
 {% endhighlight %}
 
-<!-- ### OnActionComplete event
-
-The [OnActionComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_OnActionComplete) event triggers after data is fetched successfully from the remote server.
-
-{% highlight cshtml %}
-
-{% include_relative code-snippet/data-binding/action-complete.razor %}
-
-{% endhighlight %} -->
-
 ### OnActionFailure event
 
 The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_OnActionFailure) event triggers when the data fetch request from the remote server fails.
@@ -202,39 +153,6 @@ The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#
 
 ![Blazor ComboBox with Web API Adaptor](./images/data-binding/blazor_combobox_web-api-adaptor.png)
 
-<!-- ### Custom adaptor
-
-The [SfDataManager](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Data.SfDataManager.html) has custom adaptor support which allows you to perform manual operations on the data. This can be utilized for implementing customize data binding and editing operations in the MultiColumn ComboBox component.
-
-For implementing custom data binding in the MultiColumn ComboBox, the `DataAdaptor` class is used. This abstract class acts as a base class for the custom adaptor.
-
-The `DataAdaptor` abstract class has both synchronous and asynchronous method signatures, which can be overridden in the custom adaptor. Following are the method signatures present in this class.
-
-```csharp
-public abstract class DataAdaptor
-{
-    /// <summary>   
-    /// Performs data Read operation synchronously.
-    /// </summary>
-    public virtual object Read(DataManagerRequest dataManagerRequest, string key = null)
-
-    /// <summary>
-    /// Performs data Read operation asynchronously.
-    /// </summary>
-    public virtual Task<object> ReadAsync(DataManagerRequest dataManagerRequest, string key = null)
-}
-```
-
-In custom Adaptor, the data binding operation can be performed in the MultiColumn ComboBox component by providing the custom adaptor class and overriding the Read or ReadAsync method of the DataAdaptor abstract class.
-
-The following sample code demonstrates implementing custom data binding using custom adaptor.
-
-{% highlight cshtml %}
-
-{% include_relative code-snippet/data-binding/custom-adaptor.razor %}
-
-{% endhighlight %} -->
-
 ### Offline mode
 
 To avoid post back for every action, set the MultiColumn ComboBox to load all data on initialization and make the actions process on the client-side. To enable this behavior, use the `Offline` property of `DataManager`.
@@ -368,18 +286,6 @@ Now, configure the MultiColumn ComboBox using the [SfDataManager](https://blazor
 
 {% highlight cshtml %}
 
-{% include_relative code-snippet/data-binding/-comboboxwith-web-api-adaptor.razor %}
+{% include_relative code-snippet/data-binding/combobox-with-web-api-adaptor.razor %}
 
 {% endhighlight %}
-
-<!-- ## Adding new items
-
-Add the new item in the popup with the help of [AddItemsAsync]() public method. This method will add a mentioned item in the MultiColumn ComboBox popup without affecting the data source items.
-
-{% highlight cshtml %}
-
-{% include_relative code-snippet/data-binding/add-new-item.razor %}
-
-{% endhighlight %}
-
-![Blazor ComboBox with adding new Item](./images/data-binding/blazor_combobox_add-new-item.gif) -->

blazor/multicolumn-combobox/filtering.md

@@ -55,7 +55,7 @@ In the following example, `EndsWith` filter type has been mapped to the `FilterT
 
 ![Blazor MultiColumn ComboBox with Filter Type](./images/filtering/blazor_combobox_filter-type.png)
 
-## Minimum filter length
+<!-- ## Minimum filter length
 
 When filtering list items, you can specify a character count limit to trigger a remote request and retrieve filtered data for the DropDownList. This can be achieved through manual validation using the [Filtering event arguments](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.FilteringEventArgs.html) within the [Filtering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Filtering) event handler.
 
@@ -65,9 +65,7 @@ In the following example, the remote request does not fetch the search data unti
 
 {% include_relative code-snippet/filtering/minimum-filter-length.razor %}
 
-{% endhighlight %}
-
-![Blazor MultiColumn ComboBox with Minimum filter length](./images/filtering/blazor_combobox_minimum-filter-length.gif)
+{% endhighlight %} -->
 
 <!-- ## Multi column filtering
 
@@ -79,7 +77,6 @@ To enable multi-column support in the built-in Syncfusion Blazor theme files, si
 
 {% endhighlight %}
 
-![Blazor ComboBox with Multi Column filtering](./images/filtering/blazor_combobox_multi-column.png)
 
 You can achieve multiple column(field) filtering by passing the List of [predicates](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_predicates) to the [And](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_And_Syncfusion_Blazor_Data_WhereFilter_) or [Or](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_Or_Syncfusion_Blazor_Data_WhereFilter_) methods of [WhereFilters](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter__ctor).
 
@@ -89,8 +86,6 @@ You can achieve multiple column(field) filtering by passing the List of [predica
 
 {% endhighlight %}
 
-![Blazor MultiColumn ComboBox with Multi Column filtering](./images/filtering/blazor_combobox_multi-colum-filtering.gif) -->
-
 <!-- ## Case sensitive filtering
 
 The Data items can be filtered with or without case sensitivity using the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). This can be done by passing the fourth optional parameter [IgnoreCase](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WhereFilter.html#Syncfusion_Blazor_Data_WhereFilter_IgnoreCase) of the [Where clause](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.Query.html#Syncfusion_Blazor_Data_Query_Where_Syncfusion_Blazor_Data_WhereFilter_).