911019: Need to provide preview sample for Multicolumn ComboBox

Mahadeer360 · Mahadeer360 · commit fc96221ee223 · 2024-09-23T21:43:26.000+05:30
diff --git a/blazor/multicolumn-combobox/column.md b/blazor/multicolumn-combobox/column.md
@@ -19,7 +19,9 @@ The MultiColumn ComboBox supports auto-generating columns, which simplifies the
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rthptYsEgssKVDPs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiColumn ComboBox with Data Binding](./images/blazor-multicolumncombobox-columns.png)" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVpjYVATVHVEqlS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor MultiColumn ComboBox with Text align](./images/column/blazor_multicolumn_combobox_column-text-align.gif)
 
 ## Setting the Template
 
@@ -37,6 +39,8 @@ In the following sample, defines how to use `Template` and `HeaderTemplate`.
 
 {% endhighlight %}
 
+![Blazor MultiColumn ComboBox with Column header](./images/column/blazor_multicolumn_combobox_column-header.gif)
+
 ## Setting Display As CheckBox 
 
 The MultiColumn ComboBox component allows you to render boolean values as checkboxes in columns. This can be achieved by using the [DisplayAsCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_DisplayAsCheckBox)  property. This property is useful when you have a boolean column in your MultiColumn ComboBox and you want to display the values as checkboxes instead of the default text representation of **true** or **false**.
@@ -49,6 +53,10 @@ To enable the rendering of boolean values as checkboxes, you need to set the `Di
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhzXOLgTUyFLZUG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor MultiColumn ComboBox with Check Box](./images/column/blazor_multicolumn_combobox_column-checkbox.gif)
+
 ## Setting custom attributes
 
 You can customize the appearance of the column headers in MultiColumn ComboBox using the [CustomAttributes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.MultiColumnComboboxColumn.html#Syncfusion_Blazor_MultiColumnComboBox_MultiColumnComboboxColumn_CustomAttributes) property.
@@ -67,6 +75,8 @@ The following example demonstrates how to customize the appearance of the Multic
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLqCMNiLfcCJPPZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLpZOLApKBUYqMm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor MultiColumn ComboBox with custom attributes](./images/column/blazor_multicolumn_combobox_column-custom-attributes.gif)
 
 
diff --git a/blazor/multicolumn-combobox/custom-value.md b/blazor/multicolumn-combobox/custom-value.md
@@ -49,6 +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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrzNaLUIDqNTtMS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor MultiColumn ComboBox with custom value](./images/blazor-multicolumn-custom-value.gif)
diff --git a/blazor/multicolumn-combobox/data-binding.md b/blazor/multicolumn-combobox/data-binding.md
@@ -23,9 +23,9 @@ 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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBftYVqKvgHmaAA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-![Blazor ComboBox with local data binding](./images/data-binding/blazor_combobox_local-binding.png)
+![Blazor MultiColumn ComboBox with local data binding](./images/data-binding/blazor_combobox_local-binding.png)
 
 ## Index value binding
 
@@ -67,7 +67,7 @@ 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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVpNOrAUlzhIfCJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Expando object binding
 
@@ -79,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.gif)
+![Blazor MultiColumn ComboBox with Expando object binding](./images/data-binding/blazor_combobox_expando-object-binding.gif)
 
 ### Dynamic object binding
 
@@ -91,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.gif)
+![Blazor MultiColumn ComboBox with Dynamic object binding](./images/data-binding/blazor_combobox_dynamic-data-binding.gif)
 
 ### ValueTuple data binding
 
@@ -103,7 +103,7 @@ 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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLzNkLgKvoKORyE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Binding remote data 
 
@@ -125,7 +125,7 @@ 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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVTXahAKvxlOgaH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### OnActionFailure event
 
@@ -137,7 +137,7 @@ 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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLpZkrKqPQmofLv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### OData v4 services
 
@@ -149,9 +149,9 @@ 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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVJZkBKUbFJULBC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-![Blazor ComboBox with OData v4 Adaptor](./images/data-binding/blazor_combobox_odata-v4-services.png)
+![Blazor MultiColumn ComboBox with OData v4 Adaptor](./images/data-binding/blazor_combobox_odata-v4-services.png)
 
 ### Web API adaptor
 
@@ -163,9 +163,9 @@ 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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhTDaLKUlkAUjhM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-![Blazor ComboBox with Web API Adaptor](./images/data-binding/blazor_combobox_web-api-adaptor.png)
+![Blazor MultiColumn ComboBox with Web API Adaptor](./images/data-binding/blazor_combobox_web-api-adaptor.png)
 
 ### Offline mode
 
@@ -179,7 +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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLTjuLqKOjLPMlY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ### Entity Framework
 
diff --git a/blazor/multicolumn-combobox/filtering.md b/blazor/multicolumn-combobox/filtering.md
@@ -21,7 +21,7 @@ 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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLpXkVggODahmWg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor MultiColumn ComboBox with local data filtering](./images/filtering/blazor_combobox_local-data.png)
 
@@ -37,7 +37,7 @@ 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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/htVTXYrAgksxfrMK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Filter type
 
@@ -57,7 +57,7 @@ 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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLpjaVqKYrUJqyJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor MultiColumn ComboBox with Filter Type](./images/filtering/blazor_combobox_filter-type.png)
 
@@ -135,4 +135,4 @@ In the following example, the isTyped flag is used to track whether the filterin
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBzZYVjLimaBuKY?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrzNEhqqOUhpwzY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
diff --git a/blazor/multicolumn-combobox/grouping.md b/blazor/multicolumn-combobox/grouping.md
@@ -19,5 +19,6 @@ In the following sample, the product names are grouped according to their catego
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrAsLhwUmUFCjYX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLftOhUpZaoRSjs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
+![Blazor MultiColumn ComboBox with Grouping](./images/grouping/blazor_multicolumn_combobox_grouping.gif)
diff --git a/blazor/multicolumn-combobox/paging.md b/blazor/multicolumn-combobox/paging.md
@@ -29,7 +29,9 @@ The following example demonstrates how to change the page size of a MultiColumn
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVTtshJAItZMYUX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVzXkBAfiXjxboe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor MultiColumn ComboBox with Page size](./images/paging/blazor_multicolumn_combobox_page_size.gif)
 
 ### Change the page count
 
@@ -45,4 +47,6 @@ The following example demonstrates how to change the page count of a Grid using
 
 {% endhighlight %}
 
-{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpNsrfUyIpaGxQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrTtOrqpWjngqOp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor MultiColumn ComboBox with Page count](./images/paging/blazor_multicolumn_combobox_page_count.gif)
diff --git a/blazor/multicolumn-combobox/placeholder-and-floatlabel.md b/blazor/multicolumn-combobox/placeholder-and-floatlabel.md
@@ -19,7 +19,7 @@ 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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVTNaLAqYKlJFoq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor ComboBox with placeholder](./images/placeholder-and-floatlabel/blazor_combobox_placeholder.png)
 
@@ -43,7 +43,7 @@ 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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBfDurAqkybkRoR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor ComboBox with mandatory indicator placeholder](./images/placeholder-and-floatlabel/blazor_combobox_placeholder-with-mandatory.png) 
 
@@ -67,7 +67,7 @@ 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" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrzXarAUYxRzqxe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Blazor ComboBox with float label](./images/placeholder-and-floatlabel/blazor_combobox_floatlabel.gif)
 
diff --git a/blazor/multicolumn-combobox/popup-setting.md b/blazor/multicolumn-combobox/popup-setting.md
@@ -21,6 +21,10 @@ In the following sample, the `PopupWidth` is set as `600px`.
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVpjuVgTiMSUiaN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor MultiColumn ComboBox with Popup Width](./images/popup-setting/blazor_multicolumn_combobox_popup_width.gif)
+
 ## Change the popup height
 
 Customize the height of the popup using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupHeight) property.
@@ -33,6 +37,10 @@ In the following sample, the `PopupHeight` is set as `500px`.
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBpDYVqfsBWhhbe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor MultiColumn ComboBox with Popup Height](./images/popup-setting/blazor_multicolumn_combobox_popup_height.gif)
+
 ## Change the popup z-index
 
 Customize the [z-index](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ZIndex) value of the component popup element.
@@ -49,6 +57,8 @@ You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/
 
 {% endhighlight %}
 
+![Blazor MultiColumn ComboBox with Show popup on initial loading](./images/popup-setting/blazor_multicolumn_combobox_show-popup-on-initial-loading.gif)
+
 ## Preventing opening and closing
 
 Prevent the popup open and close in the event argument like [PopupOpeningEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.PopupOpeningEventArgs.html#Syncfusion_Blazor_MultiColumnComboBox_PopupOpeningEventArgs_Cancel) and [PopupClosingEventArgs.cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.PopupClosingEventArgs.html#Syncfusion_Blazor_MultiColumnComboBox_PopupClosingEventArgs_Cancel) as `true`. It is achieved by the [PopupOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupOpening) and [PopupClosing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupClosing) events. 
@@ -59,6 +69,10 @@ Prevent the popup open and close in the event argument like [PopupOpeningEventAr
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rthpZaLATiBxZOUT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor MultiColumn ComboBox with Preventing opening and closing](./images/popup-setting/blazor_multicolumn_combobox_preventing_opening_closing.gif)
+
 The following events are used to trigger when opening and closing popup.
 
 ### PopupOpening event
@@ -71,6 +85,10 @@ The [PopupOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Multi
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVTjaLqTCKWriug?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor MultiColumn ComboBox with PopupOpening event](./images/popup-setting/blazor_multicolumn_combobox_popupopening_event.gif)
+
 ### PopupOpened event
 
 The [PopupOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupOpened) event triggers when the popup opens.
@@ -85,6 +103,10 @@ The [PopupClosing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Multi
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrztOrApMUzEyWp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor MultiColumn ComboBox with Popup Closing event](./images/popup-setting/blazor_multicolumn_combobox_popupclosing_event.gif)
+
 ### PopupClosed event
 
 The [PopupClosed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupClosed) event triggers after the popup has been closed.
@@ -95,6 +117,10 @@ The [PopupClosed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiC
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVTZaBATiKbyovf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor MultiColumn ComboBox with PopupClosed event](./images/popup-setting/blazor_multicolumn_combobox_popupclosed_event.gif)
+
 ## Popup height based on available space
 
 You can achieve this by binding the `resize` event in window and update the height of the popup based on the window height.
@@ -105,6 +131,10 @@ You can achieve this by binding the `resize` event in window and update the heig
 
 {% endhighlight %}
 
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVpDEhUJMTfqTjg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
+![Blazor MultiColumn ComboBox with Popup resize](./images/popup-setting/blazor_multicolumn_combobox_popup_resize.gif)
+
 {% tabs %}
 {% highlight razor tabtitle="Layout.razor" %}
 
diff --git a/blazor/multicolumn-combobox/selection.md b/blazor/multicolumn-combobox/selection.md
diff --git a/blazor/multicolumn-combobox/value-binding.md b/blazor/multicolumn-combobox/value-binding.md
diff --git a/blazor/multicolumn-combobox/virtualization.md b/blazor/multicolumn-combobox/virtualization.md
