diff --git a/blazor/multicolumn-combobox/custom-value.md b/blazor/multicolumn-combobox/custom-value.md index f9f77b9456..2f017d9b09 100644 --- a/blazor/multicolumn-combobox/custom-value.md +++ b/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) \ No newline at end of file diff --git a/blazor/multicolumn-combobox/data-binding.md b/blazor/multicolumn-combobox/data-binding.md index d9e260a8f4..5837402ab1 100644 --- a/blazor/multicolumn-combobox/data-binding.md +++ b/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 diff --git a/blazor/multicolumn-combobox/filtering.md b/blazor/multicolumn-combobox/filtering.md index 19b7bf2643..54e96e7a79 100644 --- a/blazor/multicolumn-combobox/filtering.md +++ b/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) +{% 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) \ No newline at end of file +{% endhighlight %} --> \ No newline at end of file diff --git a/blazor/multicolumn-combobox/selection.md b/blazor/multicolumn-combobox/selection.md index cfdf1a8573..409ea9e83c 100644 --- a/blazor/multicolumn-combobox/selection.md +++ b/blazor/multicolumn-combobox/selection.md @@ -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) +{% endhighlight %} --> +{% 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" %} + +{% 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]** diff --git a/blazor/multicolumn-combobox/virtualization.md b/blazor/multicolumn-combobox/virtualization.md index c5c0e8d0d6..63f33c170f 100644 --- a/blazor/multicolumn-combobox/virtualization.md +++ b/blazor/multicolumn-combobox/virtualization.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) \ No newline at end of file