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..f06b9c8855 --- /dev/null +++ b/blazor/multicolumn-combobox/popup-setting.md @@ -0,0 +1,126 @@ +--- +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 %} + +## 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 %} + +## 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 %} + +## 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 %} + +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 %}