From b5e6d999002f35c69ec50d967974a72beb3fc515 Mon Sep 17 00:00:00 2001 From: MalleshRavichandran Date: Fri, 20 Sep 2024 17:25:26 +0530 Subject: [PATCH 1/2] 910110: Update the popup setting section in Multi column documentation. --- blazor-toc.html | 1 + .../popup-setting/popup-height.razor | 28 ++++ .../popup-setting/popup-resize.razor | 26 ++++ .../popup-setting/popup-width.razor | 28 ++++ .../popup-setting/popupclosed-event.razor | 30 ++++ .../popup-setting/popupclosing-event.razor | 29 ++++ .../popup-setting/popupopening-event.razor | 29 ++++ .../preventing-opening-closing.razor | 37 +++++ .../show-popup-on-initial-loading.razor | 35 +++++ .../getting-started-with-web-app.md | 2 +- .../multicolumn-combobox/getting-started.md | 2 +- blazor/multicolumn-combobox/popup-setting.md | 136 ++++++++++++++++++ 12 files changed, 381 insertions(+), 2 deletions(-) create mode 100644 blazor/multicolumn-combobox/code-snippet/popup-setting/popup-height.razor create mode 100644 blazor/multicolumn-combobox/code-snippet/popup-setting/popup-resize.razor create mode 100644 blazor/multicolumn-combobox/code-snippet/popup-setting/popup-width.razor create mode 100644 blazor/multicolumn-combobox/code-snippet/popup-setting/popupclosed-event.razor create mode 100644 blazor/multicolumn-combobox/code-snippet/popup-setting/popupclosing-event.razor create mode 100644 blazor/multicolumn-combobox/code-snippet/popup-setting/popupopening-event.razor create mode 100644 blazor/multicolumn-combobox/code-snippet/popup-setting/preventing-opening-closing.razor create mode 100644 blazor/multicolumn-combobox/code-snippet/popup-setting/show-popup-on-initial-loading.razor create mode 100644 blazor/multicolumn-combobox/popup-setting.md diff --git a/blazor-toc.html b/blazor-toc.html index 6d9d16c414..056c62772a 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -3408,6 +3408,7 @@
  • Blazor Server and WASM App
    • +
  • Popup Setting
  • Sorting
  • Virtualization
    • diff --git a/blazor/multicolumn-combobox/code-snippet/popup-setting/popup-height.razor b/blazor/multicolumn-combobox/code-snippet/popup-setting/popup-height.razor new file mode 100644 index 0000000000..cf7a269003 --- /dev/null +++ b/blazor/multicolumn-combobox/code-snippet/popup-setting/popup-height.razor @@ -0,0 +1,28 @@ +@using Syncfusion.Blazor.MultiColumnComboBox + + +@code { + public class Product + { + public string Name { get; set; } + public decimal Price { get; set; } + public string Availability { get; set; } + public string Category { get; set; } + public double Rating { get; set; } + } + private List Products = new List(); + private string Value { get; set; } = "Smartphone"; + protected override Task OnInitializedAsync() + { + Products = new List + { + new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 }, + new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 }, + new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 }, + new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }, + new Product { Name = "Smartwatch", Price = 199.99m, Availability = "Limited Stock", Category = "Wearables", Rating = 4.4 }, + new Product { Name = "Monitor", Price = 129.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 } + }; + return base.OnInitializedAsync(); + } +} \ No newline at end of file diff --git a/blazor/multicolumn-combobox/code-snippet/popup-setting/popup-resize.razor b/blazor/multicolumn-combobox/code-snippet/popup-setting/popup-resize.razor new file mode 100644 index 0000000000..6e059b7a19 --- /dev/null +++ b/blazor/multicolumn-combobox/code-snippet/popup-setting/popup-resize.razor @@ -0,0 +1,26 @@ +@using Syncfusion.Blazor.MultiColumnComboBox +@inject IJSRuntime JsRuntime + +@code { + public class Product + { + public string Name { get; set; } + public decimal Price { get; set; } + public string Availability { get; set; } + public string Category { get; set; } + public double Rating { get; set; } + } + private List Products = new List(); + private string Value { get; set; } = "Smartphone"; + protected override Task OnInitializedAsync() + { + Products = new List + { + new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 }, + new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 }, + new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 }, + new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 } + }; + return base.OnInitializedAsync(); + } +} \ No newline at end of file diff --git a/blazor/multicolumn-combobox/code-snippet/popup-setting/popup-width.razor b/blazor/multicolumn-combobox/code-snippet/popup-setting/popup-width.razor new file mode 100644 index 0000000000..cffbc5c4a8 --- /dev/null +++ b/blazor/multicolumn-combobox/code-snippet/popup-setting/popup-width.razor @@ -0,0 +1,28 @@ +@using Syncfusion.Blazor.MultiColumnComboBox + + +@code { + public class Product + { + public string Name { get; set; } + public decimal Price { get; set; } + public string Availability { get; set; } + public string Category { get; set; } + public double Rating { get; set; } + } + private List Products = new List(); + private string Value { get; set; } = "Smartphone"; + protected override Task OnInitializedAsync() + { + Products = new List + { + new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 }, + new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 }, + new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 }, + new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }, + new Product { Name = "Smartwatch", Price = 199.99m, Availability = "Limited Stock", Category = "Wearables", Rating = 4.4 }, + new Product { Name = "Monitor", Price = 129.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.6 } + }; + return base.OnInitializedAsync(); + } +} \ No newline at end of file diff --git a/blazor/multicolumn-combobox/code-snippet/popup-setting/popupclosed-event.razor b/blazor/multicolumn-combobox/code-snippet/popup-setting/popupclosed-event.razor new file mode 100644 index 0000000000..b72499387a --- /dev/null +++ b/blazor/multicolumn-combobox/code-snippet/popup-setting/popupclosed-event.razor @@ -0,0 +1,30 @@ +@using Syncfusion.Blazor.MultiColumnComboBox + + +@code { + public class Product + { + public string Name { get; set; } + public decimal Price { get; set; } + public string Availability { get; set; } + public string Category { get; set; } + public double Rating { get; set; } + } + private List Products = new List(); + private string Value { get; set; } = "Smartphone"; + protected override Task OnInitializedAsync() + { + Products = new List + { + new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 }, + new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 }, + new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 }, + new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 } + }; + return base.OnInitializedAsync(); + } + private void ClosedHandler(object e) + { + // Here, you can customize your code. + } +} \ No newline at end of file diff --git a/blazor/multicolumn-combobox/code-snippet/popup-setting/popupclosing-event.razor b/blazor/multicolumn-combobox/code-snippet/popup-setting/popupclosing-event.razor new file mode 100644 index 0000000000..d257d36fda --- /dev/null +++ b/blazor/multicolumn-combobox/code-snippet/popup-setting/popupclosing-event.razor @@ -0,0 +1,29 @@ +@using Syncfusion.Blazor.MultiColumnComboBox + +@code { + public class Product + { + public string Name { get; set; } + public decimal Price { get; set; } + public string Availability { get; set; } + public string Category { get; set; } + public double Rating { get; set; } + } + private List Products = new List(); + private string Value { get; set; } = "Smartphone"; + protected override Task OnInitializedAsync() + { + Products = new List + { + new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 }, + new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 }, + new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 }, + new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 } + }; + return base.OnInitializedAsync(); + } + private void HandlePopupClose(PopupClosingEventArgs args) + { + // Here, you can customize your code. + } +} \ No newline at end of file diff --git a/blazor/multicolumn-combobox/code-snippet/popup-setting/popupopening-event.razor b/blazor/multicolumn-combobox/code-snippet/popup-setting/popupopening-event.razor new file mode 100644 index 0000000000..acb5e47d57 --- /dev/null +++ b/blazor/multicolumn-combobox/code-snippet/popup-setting/popupopening-event.razor @@ -0,0 +1,29 @@ +@using Syncfusion.Blazor.MultiColumnComboBox + +@code { + public class Product + { + public string Name { get; set; } + public decimal Price { get; set; } + public string Availability { get; set; } + public string Category { get; set; } + public double Rating { get; set; } + } + private List Products = new List(); + private string Value { get; set; } = "Smartphone"; + protected override Task OnInitializedAsync() + { + Products = new List + { + new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 }, + new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 }, + new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 }, + new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 } + }; + return base.OnInitializedAsync(); + } + private void HandlePopupOpen(PopupOpeningEventArgs args) + { + // Here, you can customize your code. + } +} \ No newline at end of file diff --git a/blazor/multicolumn-combobox/code-snippet/popup-setting/preventing-opening-closing.razor b/blazor/multicolumn-combobox/code-snippet/popup-setting/preventing-opening-closing.razor new file mode 100644 index 0000000000..1007c8d179 --- /dev/null +++ b/blazor/multicolumn-combobox/code-snippet/popup-setting/preventing-opening-closing.razor @@ -0,0 +1,37 @@ +@using Syncfusion.Blazor.MultiColumnComboBox + + + + + +@code { + public class Product + { + public string Name { get; set; } + public decimal Price { get; set; } + public string Availability { get; set; } + public string Category { get; set; } + public double Rating { get; set; } + } + private List Products = new List(); + private string Value { get; set; } = "Smartphone"; + protected override Task OnInitializedAsync() + { + Products = new List + { + new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 }, + new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 }, + new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 }, + new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 } + }; + return base.OnInitializedAsync(); + } + private void HandlePopupClose(PopupClosingEventArgs args) + { + args.Cancel = true; + } + private void HandlePopupOpen(PopupOpeningEventArgs args) + { + args.Cancel = true; + } +} \ No newline at end of file diff --git a/blazor/multicolumn-combobox/code-snippet/popup-setting/show-popup-on-initial-loading.razor b/blazor/multicolumn-combobox/code-snippet/popup-setting/show-popup-on-initial-loading.razor new file mode 100644 index 0000000000..5703058138 --- /dev/null +++ b/blazor/multicolumn-combobox/code-snippet/popup-setting/show-popup-on-initial-loading.razor @@ -0,0 +1,35 @@ +@using Syncfusion.Blazor.MultiColumnComboBox +@using Syncfusion.Blazor.Data + + + +@code { + + SfMultiColumnComboBox multicolumnObj { get; set; } + public class Product + { + public string Name { get; set; } + public decimal Price { get; set; } + public string Availability { get; set; } + public string Category { get; set; } + public double Rating { get; set; } + } + private List Products = new List(); + private string Value { get; set; } = "Smartphone"; + protected override Task OnInitializedAsync() + { + Products = new List + { + new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 }, + new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 }, + new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 }, + new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 } + + }; + return base.OnInitializedAsync(); + } + private void CreatedHandler(object e) + { + multicolumnObj.ShowPopupAsync(); + } +} \ No newline at end of file diff --git a/blazor/multicolumn-combobox/getting-started-with-web-app.md b/blazor/multicolumn-combobox/getting-started-with-web-app.md index 0ef0563652..78d5e6040a 100644 --- a/blazor/multicolumn-combobox/getting-started-with-web-app.md +++ b/blazor/multicolumn-combobox/getting-started-with-web-app.md @@ -176,7 +176,7 @@ By default, the width of the popup list automatically adjusts to match the width {% previewsample "https://blazorplayground.syncfusion.com/embed/VXhJjECYAMdTnsmm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Popup Height and Width in Blazor MultiColumn ComboBox](./images/blazor-multicolumncombobox-popup-customization.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ComboBox). +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MultiColumnComboBox). ## See also diff --git a/blazor/multicolumn-combobox/getting-started.md b/blazor/multicolumn-combobox/getting-started.md index cea0aafeda..5d1247e6c5 100644 --- a/blazor/multicolumn-combobox/getting-started.md +++ b/blazor/multicolumn-combobox/getting-started.md @@ -11,7 +11,7 @@ documentation: ug This section briefly explains about how to include [Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) component in your Blazor Server App and Blazor WebAssembly App using Visual Studio. -To get started quickly with Blazor MultiColumn ComboBox component, you can check out this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ComboBox) sample. +To get started quickly with Blazor MultiColumn ComboBox component, you can check out this video or [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MultiColumnComboBox) sample. ## Prerequisites diff --git a/blazor/multicolumn-combobox/popup-setting.md b/blazor/multicolumn-combobox/popup-setting.md new file mode 100644 index 0000000000..c41d86e342 --- /dev/null +++ b/blazor/multicolumn-combobox/popup-setting.md @@ -0,0 +1,136 @@ +--- +layout: post +title: Popup Setting in Syncfusion Blazor MultiColumn ComboBox +description: Checkout and learn here all about Popup Setting in Syncfusion Blazor MultiColumn ComboBox component and much more. +platform: Blazor +control: MultiColumn ComboBox +documentation: ug +--- + +# Popup Setting in MultiColumn ComboBox + +## Change the popup width + +Customize the width of the popup using the [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupWidth) property. If popup width unspecified, it sets based on the width of the MultiColumn ComboBox component. + +In the following sample, the `PopupWidth` is set as `600px`. + +{% highlight cshtml %} + +{% include_relative code-snippet/popup-setting/popup-width.razor %} + +{% endhighlight %} + +![Blazor MultiColumn ComboBox with customizing popup width](./images/popup-setting/blazor_MultiColumn_ComboBox_popup-width.png) + +## 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. + +In the following sample, the `PopupHeight` is set as `500px`. + +{% highlight cshtml %} + +{% include_relative code-snippet/popup-setting/popup-height.razor %} + +{% endhighlight %} + +![Blazor ComboBox with customizing popup height](./images/popup-setting/blazor_MultiColumnComboBox_popup-height.png) + +## 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. + +Defaults to `1000` + +## Show popup on initial loading + +You can achieve this by using [ShowPopupAsync()](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_ShowPopupAsync) in the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.ComboBoxEvents-2.html#Syncfusion_Blazor_DropDowns_ComboBoxEvents_2_Created) Event. + +{% highlight Razor %} + +{% include_relative code-snippet/popup-setting/show-popup-on-initial-loading.razor %} + +{% endhighlight %} + +![Blazor MultiColumn ComboBox with Show popup on initial loading](./images/popup-setting/blazor_MultiColumnComboBox_popup-initial-loading.png) + +## 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. + +{% highlight Razor %} + +{% include_relative code-snippet/popup-setting/preventing-opening-closing.razor %} + +{% endhighlight %} + +![Blazor MultiColumn ComboBox with Preventing opening and closing](./images/popup-setting/blazor_ComboBox_preventing-opening-closing.png) + +The following events are used to trigger when opening and closing popup. + +### PopupOpening event + +The [PopupOpening](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupOpening) event triggers when the popup is opened. If you cancel this event, the popup remains closed. + +{% highlight Razor %} + +{% include_relative code-snippet/popup-setting/popupopening-event.razor %} + +{% endhighlight %} + +### 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. + +### PopupClosing event + +The [PopupClosing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html#Syncfusion_Blazor_MultiColumnComboBox_SfMultiColumnComboBox_2_PopupClosing) event triggers before the popup is closed. If you cancel this event, the popup will remain open. + +{% highlight Razor %} + +{% include_relative code-snippet/popup-setting/popupclosing-event.razor %} + +{% endhighlight %} + +### 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. + +{% highlight Razor %} + +{% include_relative code-snippet/popup-setting/popupclosed-event.razor %} + +{% endhighlight %} + +## 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. + +{% highlight Razor %} + +{% include_relative code-snippet/popup-setting/popup-resize.razor %} + +{% endhighlight %} + +{% tabs %} +{% highlight razor tabtitle="Layout.razor" %} + + + +{% endhighlight %} +{% endtabs %} + +![Popup height based on available space in Blazor MultiColumn ComboBox](./images/popup-setting/blazor_combobox_popup_resize.gif) \ No newline at end of file From 9db13829f9ad1bd785c22f9c6a447ca778d63384 Mon Sep 17 00:00:00 2001 From: MalleshRavichandran <111411628+MalleshRavichandran@users.noreply.github.com> Date: Fri, 20 Sep 2024 17:45:18 +0530 Subject: [PATCH 2/2] 910110: Update the popup setting section in Multi column documentation. --- blazor/multicolumn-combobox/popup-setting.md | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/blazor/multicolumn-combobox/popup-setting.md b/blazor/multicolumn-combobox/popup-setting.md index c41d86e342..f06b9c8855 100644 --- a/blazor/multicolumn-combobox/popup-setting.md +++ b/blazor/multicolumn-combobox/popup-setting.md @@ -21,8 +21,6 @@ In the following sample, the `PopupWidth` is set as `600px`. {% endhighlight %} -![Blazor MultiColumn ComboBox with customizing popup width](./images/popup-setting/blazor_MultiColumn_ComboBox_popup-width.png) - ## 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. @@ -35,8 +33,6 @@ In the following sample, the `PopupHeight` is set as `500px`. {% endhighlight %} -![Blazor ComboBox with customizing popup height](./images/popup-setting/blazor_MultiColumnComboBox_popup-height.png) - ## 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. @@ -53,8 +49,6 @@ 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_MultiColumnComboBox_popup-initial-loading.png) - ## 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. @@ -65,8 +59,6 @@ Prevent the popup open and close in the event argument like [PopupOpeningEventAr {% endhighlight %} -![Blazor MultiColumn ComboBox with Preventing opening and closing](./images/popup-setting/blazor_ComboBox_preventing-opening-closing.png) - The following events are used to trigger when opening and closing popup. ### PopupOpening event @@ -132,5 +124,3 @@ You can achieve this by binding the `resize` event in window and update the heig {% endhighlight %} {% endtabs %} - -![Popup height based on available space in Blazor MultiColumn ComboBox](./images/popup-setting/blazor_combobox_popup_resize.gif) \ No newline at end of file