Skip to content

Commit 4ab9822

Browse files
PrinceOliverPrinceOliver
authored
Merge pull request #4859 from syncfusion-content/BLAZ-910110-multicolumnG1
910110: Update the getting-started-with-web-app.
2 parents ad6c5a6 + 690e722 commit 4ab9822

File tree

6 files changed

+398
-0
lines changed

6 files changed

+398
-0
lines changed

‎blazor-toc.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3388,6 +3388,16 @@
33883388
</li>
33893389
</ul>
33903390
</li>
3391+
<li>Multicolumn ComboBox
3392+
<ul>
3393+
<li>Getting Started
3394+
<ul>
3395+
<li> <a href="/blazor/multicolumn-combobox/getting-started-with-web-app">Blazor Web App</a></li>
3396+
<li> <a href="/blazor/multicolumn-combobox/getting-started">Blazor Server and WASM App</a></li>
3397+
</ul>
3398+
</li>
3399+
</ul>
3400+
</li>
33913401
<li>MultiSelect Dropdown
33923402
<ul>
33933403
<li>Getting Started

‎blazor/multicolumn-combobox/getting-started-with-web-app.md‎

Lines changed: 186 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,186 @@
1+
---
2+
layout: post
3+
title: Getting Started with Syncfusion Blazor MultiColumn ComboBox in WebApp
4+
description: Checkout and learn here all about the documentation for getting started with Blazor MultiColumn ComboBox component in Blazor Web App.
5+
platform: Blazor
6+
component: MultiColumn ComboBox
7+
documentation: ug
8+
---
9+
10+
# Getting Started with Blazor MultiColumn ComboBox Component in Web App
11+
12+
This section briefly explains about how to include [Blazor MultiColumn ComboBox](https://www.syncfusion.com/blazor-components/blazor-multicolumn-combobox) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/).
13+
14+
## Prerequisites
15+
16+
* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements)
17+
18+
## Create a new Blazor Web App
19+
20+
You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0) or the [Syncfusion Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio).
21+
22+
You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows) while creating a Blazor Web Application.
23+
24+
## Install Syncfusion Blazor MultiColumnComboBox and Themes NuGet in the Blazor Web App
25+
26+
To add **Blazor MultiColumn ComboBox** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.MultiColumnComboBox](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/).
27+
28+
If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion Blazor components NuGet packages within the client project.
29+
30+
Alternatively, you can utilize the following package manager command to achieve the same.
31+
32+
{% tabs %}
33+
{% highlight C# tabtitle="Package Manager" %}
34+
35+
Install-Package Syncfusion.Blazor.MultiColumnComboBox -Version {{ site.releaseversion }}
36+
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
37+
38+
{% endhighlight %}
39+
{% endtabs %}
40+
41+
N> Syncfusion Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details.
42+
43+
## Register Syncfusion Blazor Service
44+
45+
Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.MultiColumnComboBox` namespace.
46+
47+
```cshtml
48+
49+
@using Syncfusion.Blazor
50+
@using Syncfusion.Blazor.MultiColumnComboBox
51+
```
52+
53+
Now, register the Syncfusion Blazor Service in the **~/Program.cs** file of your Blazor Web App. For a app with `WebAssembly` or `Auto (Server and WebAssembly)` interactive render mode, register the Syncfusion Blazor service in both **~/Program.cs** files of your web app.
54+
```cshtml
55+
56+
....
57+
using Syncfusion.Blazor;
58+
....
59+
builder.Services.AddSyncfusionBlazor();
60+
....
61+
62+
```
63+
64+
## Add stylesheet and script resources
65+
66+
The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `<head>` section and the script reference at the end of the `<body>` in the **~/Components/App.razor** file as shown below:
67+
68+
```html
69+
<head>
70+
....
71+
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
72+
</head>
73+
....
74+
<body>
75+
....
76+
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
77+
</body>
78+
```
79+
80+
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application.
81+
82+
## Add Syncfusion Blazor MultiColumn ComboBox component
83+
84+
Add the Syncfusion Blazor MultiColumn ComboBox component in `.razor` file inside the `Pages` folder. If an interactivity location as `Per page/component` in the web app, define a render mode at top of the component, as follows:
85+
86+
{% tabs %}
87+
{% highlight razor %}
88+
89+
@* desired render mode define here *@
90+
@rendermode InteractiveAuto
91+
92+
{% endhighlight %}
93+
{% endtabs %}
94+
95+
{% tabs %}
96+
{% highlight razor %}
97+
98+
<SfMultiColumnComboBox TItem="string" TValue="string" Placeholder="Select a game"></SfMultiColumnComboBox>
99+
100+
{% endhighlight %}
101+
{% endtabs %}
102+
103+
* Press <kbd>Ctrl</kbd>+<kbd>F5</kbd> (Windows) or <kbd>⌘</kbd>+<kbd>F5</kbd> (macOS) to launch the application. This will render the Syncfusion Blazor MultiColumn ComboBox component in your default web browser.
104+
105+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBpNiBuBWhiNjHa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiColumn ComboBox Component](./images/blazor-multicolumncombobox-component.png)" %}
106+
107+
## Binding Data Source and Mapping Fields
108+
109+
After initialization, populate the MultiColumn ComboBox with data using the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfDropDownBase-1.html#Syncfusion_Blazor_DropDowns_SfDropDownBase_1_DataSource) property. In this case, the MultiColumn ComboBox binds its DataSource to the Products list, which contains multiple product columns. Both the [ValueField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html) and [TextField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html) properties are set to the Name property of the Product class, ensuring that product names are displayed in the dropdown. The [@bind-Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html) is used to bind the selected value, with an initial value of "Smart phone" pre-selected in this example.
110+
111+
{% tabs %}
112+
{% highlight razor %}
113+
114+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
115+
116+
@code {
117+
public class Product
118+
{
119+
public string Name { get; set; }
120+
public decimal Price { get; set; }
121+
public string Availability { get; set; }
122+
public string Category { get; set; }
123+
public double Rating { get; set; }
124+
}
125+
private List<Product> Products = new List<Product>();
126+
private string Value { get; set; } = "Smartphone";
127+
protected override Task OnInitializedAsync()
128+
{
129+
Products = new List<Product>
130+
{
131+
new Product { Name = "Laptop", Price = 999.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.5 },
132+
new Product { Name = "Smartphone", Price = 599.99m, Availability = "Out of Stock", Category = "Electronics", Rating = 4.3 },
133+
new Product { Name = "Tablet", Price = 299.99m, Availability = "In Stock", Category = "Electronics", Rating = 4.2 },
134+
new Product { Name = "Headphones", Price = 49.99m, Availability = "In Stock", Category = "Accessories", Rating = 4.0 }
135+
};
136+
return base.OnInitializedAsync();
137+
}
138+
}
139+
140+
{% endhighlight %}
141+
{% endtabs %}
142+
143+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBpjsLOhCBHPRgS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiColumn ComboBox with Data Binding](./images/blazor-multicolumncombobox-binding-data.png)" %}
144+
145+
## Configuring the Columns
146+
147+
The MultiColumn ComboBox supports auto-generating columns, which simplifies the process by automatically creating columns based on the data source. Additionally, you can customize the column header text to reflect specific data, adjust the column [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html) for optimal display, and set the [TextAlign](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html) (left, center, or right) to enhance readability.
148+
149+
{% tabs %}
150+
{% highlight razor %}
151+
152+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupWidth="600px" ValueField="Name" TextField="Name" Placeholder="Select any product">
153+
<MultiColumnComboboxColumns>
154+
<MultiColumnComboboxColumn Field="Name" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
155+
<MultiColumnComboboxColumn Field="Price" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
156+
<MultiColumnComboboxColumn Field="Availability" Width="200px" TextAlign="Syncfusion.Blazor.Grids.TextAlign.Center"></MultiColumnComboboxColumn>
157+
</MultiColumnComboboxColumns>
158+
</SfMultiColumnComboBox>
159+
160+
{% endhighlight %}
161+
{% endtabs %}
162+
163+
{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBpjsLOhCBHPRgS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiColumn ComboBox with Data Binding](./images/blazor-multicolumncombobox-binding-data.png)" %}
164+
165+
## Configuring the popup list
166+
167+
By default, the width of the popup list automatically adjusts to match the width of the MultiColumn ComboBox input element, and the height is set to `350px`. Both the height and width of the popup list can be customized using the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html) and [PopupWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.MultiColumnComboBox.SfMultiColumnComboBox-2.html) properties, respectively.
168+
169+
{% tabs %}
170+
{% highlight razor %}
171+
172+
<SfMultiColumnComboBox @bind-Value="@Value" DataSource="@Products" PopupHeight="350px" PopupWidth="400px" ValueField="Name" TextField="Name" Placeholder="Select any product"></SfMultiColumnComboBox>
173+
174+
{% endhighlight %}
175+
{% endtabs %}
176+
177+
{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBpXirahMIhXWui?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)" %}
178+
179+
N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ComboBox).
180+
181+
## See also
182+
183+
1. [Getting Started with Syncfusion Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli)
184+
2. [Getting Started with Syncfusion Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio)
185+
3. [Getting Started with Syncfusion Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli)
186+

0 commit comments

Comments
 (0)