Merge pull request #4914 from syncfusion-content/BLAZ-911019-PreView2

911019: Need to provide preview sample for Multicolumn ComboBox

Author: PrinceOliver

blazor/multicolumn-combobox/custom-value.md

@@ -49,5 +49,6 @@ You can include custom values in the MultiColumn ComboBox component. If the ente
 {% endhighlight razor %}
 {% endtabs %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBftEMuAkIFhdAn?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
 
 ![Blazor MultiColumn ComboBox with custom value](./images/blazor-multicolumn-custom-value.gif)

blazor/multicolumn-combobox/data-binding.md

@@ -23,6 +23,8 @@ The MultiColumn ComboBox loads the data from local data sources through the [Dat
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLftusaTrQvPHgm?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ![Blazor ComboBox with local data binding](./images/data-binding/blazor_combobox_local-binding.png)
 
 ## Index value binding
@@ -65,6 +67,8 @@ Index value binding can be accomplished with the `bind-Index` attribute, which s
 }
 ```
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBTtYiOqwKUHZCY?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ### 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.
@@ -75,7 +79,7 @@ Bind the [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn
 
 {% endhighlight %}
 
-![Blazor ComboBox with Expando object binding](./images/data-binding/blazor_combobox_expando-object-binding.png)
+![Blazor ComboBox with Expando object binding](./images/data-binding/blazor_combobox_expando-object-binding.gif)
 
 ### Dynamic object binding
 
@@ -87,7 +91,7 @@ Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn
 
 {% endhighlight %}
 
-![Blazor ComboBox with Dynamic object binding](./images/data-binding/blazor_combobox_dynamic-data-binding.png)
+![Blazor ComboBox with Dynamic object binding](./images/data-binding/blazor_combobox_dynamic-data-binding.gif)
 
 ### ValueTuple data binding
 
@@ -99,6 +103,8 @@ Bind the [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuet
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBJXOWYqcwRBUbm?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ## 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. 
@@ -119,6 +125,8 @@ The [OnActionBegin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Mult
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhTXOBtLtGPxmzl?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ### 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.
@@ -129,6 +137,8 @@ The [OnActionFailure](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Mu
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhpjYWagPigEDli?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ### OData v4 services
 
 The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odatav4-adaptor) provides the ability to consume and manipulate data from OData v4 services. The following sample displays the first six customer details from `Customers` table of the `Northwind` Data Service.
@@ -139,6 +149,8 @@ The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrfXYsuKbAMJeTB?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ![Blazor ComboBox with OData v4 Adaptor](./images/data-binding/blazor_combobox_odata-v4-services.png)
 
 ### Web API adaptor
@@ -151,6 +163,8 @@ The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors#
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrTXaVNLsiKTDqf?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ![Blazor ComboBox with Web API Adaptor](./images/data-binding/blazor_combobox_web-api-adaptor.png)
 
 ### Offline mode
@@ -165,6 +179,7 @@ The following example is for remote data binding and enabled offline mode.
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBTDYiueZHDbZmB?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
 
 ### Entity Framework
 

blazor/multicolumn-combobox/filtering.md

@@ -21,6 +21,8 @@ The following code demonstrates the filtering functionality with local data in t
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVpZOCaUbksiExT?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ![Blazor MultiColumn ComboBox with local data filtering](./images/filtering/blazor_combobox_local-data.png)
 
 ## Remote data
@@ -35,6 +37,8 @@ The following code illustrates the filtering capabilities using the [ODataAdapto
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVpDEWEAkDqmrEI?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ## Filter type
 
 You can use [FilterType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_FilterType) property to specify on which filter type needed to be considered on the search action of the component. The available `FilterType` and its supported data types are:
@@ -53,6 +57,8 @@ In the following example, `EndsWith` filter type has been mapped to the `FilterT
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrftaBZLMRWvRyO?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ![Blazor MultiColumn ComboBox with Filter Type](./images/filtering/blazor_combobox_filter-type.png)
 
 <!-- ## Minimum filter length
@@ -127,4 +133,6 @@ In the following example, the isTyped flag is used to track whether the filterin
 
 {% include_relative code-snippet/filtering/prevent-popupopen-in-filtering.razor %}
 
-{% endhighlight %}
+{% endhighlight %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBzZYVjLimaBuKY?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}

blazor/multicolumn-combobox/images/data-binding/blazor_combobox_dynamic-data-binding.gif

@@ -19,6 +19,8 @@ Utilize the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVpXEWYAYcFnftW?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ![Blazor ComboBox with placeholder](./images/placeholder-and-floatlabel/blazor_combobox_placeholder.png)
 
 <!-- ## Color of the placeholder text
@@ -29,9 +31,7 @@ You can change the color of the placeholder by targeting its CSS class `input.e-
 
 {% include_relative code-snippet/placeholder-and-floatlabel/placeholder-with-color.razor %}
 
-{% endhighlight %}
-
-![Blazor ComboBox with color placeholder](./images/placeholder-and-floatlabel/blazor_combobox_placeholder-with-color.png)  -->
+{% endhighlight %} -->
 
  ## Add mandatory indicator using placeholder
 
@@ -43,6 +43,8 @@ The mandatory indicator `*` can be applied to the placeholder by targeting its C
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXuWkpfiTqsiM?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ![Blazor ComboBox with mandatory indicator placeholder](./images/placeholder-and-floatlabel/blazor_combobox_placeholder-with-mandatory.png) 
 
 ## FloatLabel
@@ -65,6 +67,8 @@ The `FloatLabelType` as  `Auto` is demonstrated in the following code sample.
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLJtasupZNuHICO?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ![Blazor ComboBox with float label](./images/placeholder-and-floatlabel/blazor_combobox_floatlabel.gif)
 
 <!-- ## Customizing the float label element’s focusing color
@@ -75,6 +79,4 @@ You can change the text color of the floating label when it is focused by target
 
 {% include_relative code-snippet/placeholder-and-floatlabel/floatlabel-focusing-color.razor %}
 
-{% endhighlight %}
-
-![Blazor ComboBox with float label focusing color](./images/placeholder-and-floatlabel/blazor_combobox_floatlabel-focusing-color.png) -->
+{% endhighlight %} -->

blazor/multicolumn-combobox/images/data-binding/blazor_combobox_expando-object-binding.gif

@@ -19,6 +19,8 @@ Retrieve the selected value from the MultiColumn ComboBox component during the [
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BthftYMaJBNGrdDn?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 Retrieve the full object list corresponding to the selected value in the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ValueChange) event by utilizing the [ValueChangeEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.ValueChangeEventArgs-2.html#Syncfusion_Blazor_MultiColumnComboBox_ValueChangeEventArgs_2_ItemData) property.
 
 {% highlight cshtml %}
@@ -27,6 +29,8 @@ Retrieve the full object list corresponding to the selected value in the [ValueC
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLfZOMYJBsbSpiT?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ## Preselected value on OnInitializedAsync
 
 To associate a pre-selected value with the MultiColumn ComboBox component, use the [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Value) attribute. You can set the value property in the [OnInitializedAsync](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-6.0#component-initialization-oninitializedasync) lifecycle method. The following example illustrates how to bind the value when the component is initially rendered.
@@ -37,6 +41,8 @@ To associate a pre-selected value with the MultiColumn ComboBox component, use t
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLTtOMYoiBxOutq?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ![Blazor ComboBox with pre-select value](./images/selection/blazor_combobox_preselect-value.png)
 
 ## Programmatically change the selected value
@@ -49,6 +55,8 @@ You can change the component's value either programmatically or externally via t
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htBTtaWOTIoCCOww?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ![Blazor ComboBox with pre-select value before](./images/selection/blazor_combobox_changing-selected-value.gif)
 
 ### ValueChange event
@@ -61,6 +69,8 @@ The [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiC
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBTjaikpWnchtLT?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ### OnValueSelect event 
 
 The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_OnValueSelect) event is activated whenever a value is chosen in the DropDownList component. You can access the relevant arguments, including the [ValueSelectEventArgs.ItemData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.ValueChangeEventArgs-2.html#Syncfusion_Blazor_MultiColumnComboBox_ValueChangeEventArgs_2_ItemData). Additionally, you can prevent item selection by setting the [ValueSelectEventArgs.Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.ValueChangeEventArgs-2.html#Syncfusion_Blazor_MultiColumnComboBox_ValueChangeEventArgs_2_Cancel) property to `true` within the event arguments.
@@ -71,6 +81,8 @@ The [OnValueSelect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Mult
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhTtkMaJMoQeBSK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ## Preselect value with index
 
 Bind the pre-selected value to the component using the [@bind-Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Value) attribute. It binds the respective value present in the specified index position of the datasource.
@@ -83,6 +95,8 @@ The following sample shows how to bind the index on the initial rendering.
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBJDOiEpMTRyGJU?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ![Blazor MultiColumn ComboBox with bind-index](./images/selection/blazor_combobox_preselect-value-index.png)
 
 <!-- ## Autofill the selected value
@@ -93,9 +107,7 @@ The [Autofill]() property determines if the component's input field will automat
 
 {% include_relative code-snippet/selection/auto-fill.razor %}
 
-{% endhighlight %} 
-
-![Blazor ComboBox with Autofill property](./images/selection/blazor_combobox_with-autofill-property.gif) -->
+{% endhighlight %}  -->
 
 <!-- ## Get selected item by value
 
@@ -117,6 +129,8 @@ Focus the component programmatically using the [FocusAsync](https://help.syncfus
 
 {% endhighlight %}
 
+![Blazor ComboBox with Focus the next component on selection](./images/selection/blazor_combobox_focus-next-component.gif)
+
 <!-- ## Programmatically clear the selected value
 
 To programmatically reset the value of the MultiColumn ComboBox, you can utilize the [ClearAsync]() method. This method removes any selected values from the SfComboBox<TValue, TItem> component and sets both the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Value) and [Index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Index) properties to null.
@@ -125,9 +139,7 @@ To programmatically reset the value of the MultiColumn ComboBox, you can utilize
 
 {% include_relative code-snippet/selection/programmatically-clear-value.razor %}
 
-{% endhighlight %}
-
-![Blazor ComboBox with programatically clear value](./images/selection/blazor_combobox_with-programmatically-clear-value.gif) -->
+{% endhighlight %} -->
 
 ## Prevent reload on form submit
 
@@ -139,6 +151,8 @@ To prevent the page from reloading when using the MultiColumn ComboBox component
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhpNuWOfWMzQIrf?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 <!-- ## Programmatically trigger onChange event
 
 Trigger the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ValueChange) event manually by using the instance (taken from @ref attribute) of the component. In the following example, the `ValueChange` event is invoked inside the `Created` event handler. As per the following code, it will trigger once the component is created or rendered on the page.
@@ -171,6 +185,8 @@ The [Focus](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnC
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLpNEMkpWjDUxyW?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ### Blur event
 
 The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_Blur) event will trigger when focus moves out from the component. 
@@ -179,4 +195,6 @@ The [Blur](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnCo
 
 {% include_relative code-snippet/selection/blur-event.razor %}
 
-{% endhighlight %}
+{% endhighlight %}
+
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrJZkiapZPZlLCm?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}

blazor/multicolumn-combobox/images/selection/blazor_combobox_focus-next-component.gif

@@ -40,6 +40,7 @@ The Index value binding is accomplished through the [@bind-Index]() attribute, w
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLfZasEAxNRINSJ?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
 
 ![Blazor MultiColumn ComboBox with Index Value](./images/value-binding/blazor_combobox_index-value.png)
 
@@ -53,9 +54,7 @@ In the example provided, the `Name` column is linked to the [ValueField](https:/
 
 {% include_relative code-snippet/value-binding/object-binding.razor %}
 
-{% endhighlight %}
-
-![Blazor MultiColumn ComboBox with object values](./images/value-binding/blazor_combobox_object-binding.png) -->
+{% endhighlight %} -->
 
 ## Show or hide clear button
 
@@ -71,6 +70,8 @@ The following example illustrates the use of `string` as the TValue. Therefore,
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLJDEskURJpKyLy?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ![Blazor ComboBox with clear button](./images/value-binding/blazor_combobox_show-hide-clear-button.png)
 
 ## Dynamically change TItem
@@ -109,7 +110,7 @@ First, create a `MultiColumnComboBox.razor` file as a parent component in the `/
 
 Then, render the Generic MultiColumn ComboBox component with the required `TValue` and `TItem` in the respective razor components. 
 
-Here, the MultMultiColumn ComboBox component with TValue as an int nullable type in the `/Index.razor` file.
+Here, the MultiColumn ComboBox component with TValue as an int nullable type in the `/Index.razor` file.
 
 **[Index.razor]**
 

blazor/multicolumn-combobox/placeholder-and-floatlabel.md

@@ -33,4 +33,6 @@ This feature is applicable to both local and remote data scenarios, providing fl
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBpNYCkfVIICLcf?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+
 ![Blazor MultiColumn ComboBox with virtualization](./images/blazor_multicolumn_combobox_remote-data-virtualization.gif)