Hi everyone, Welcome to this getting started tutorial about the Blazor ListBox of Syncfusion.
In general the list box component is more similar to the drop down list component.
But what makes a major difference between them is, With ListBox you can view and select multipleitems simultaneously from a list.
Over the next few minuteswe will see about how to work with the Blazor list box of Syncfusion.
Also do this list box you can do multiple item selection, grouping, as well as can drag and drop the items between one or more list boxes.
First I will start with the Blazor application creation process.
For that I need to make sure whether .
NET Core SDK 3.
2 or later versions are installed in my machine and I should have Visual Studio code or Visual Studio 2019 to create a Blazor application.
Now I’m going to create a new server side Blazor app so let me open the VisualStudio 2019 first and create a new project from the dashboard.
From the list of project templates I will choose Blazor App and click Next to proceed further with the project creation.
Here I will name my project as Blazor Example and click the Create button.
Next I will choose this Blazor Server App option and click this Create button finally to complete the project creation.
Now the project has been createdand ready to use.
If you want to know more about the Blazor Server App and how to add Syncfusion components to it then you can listen to the video link that is shown in the above YouTube card.
Now I will tell you the steps to add the Blazor List Box.
To start using this Syncfusion Blazor ListBox, first I need to install this Syncfusion Blazor nuget package into my application.
For that I will open the Nuget Package Manager by right clicking the project and choose the option Manage Nuget Packages.
Here, I have enabled this Include prerelease checkbox, as I’m going to use the beta version of Syncfusion Blazor package.
Then I will search force Syncfusion Blazor in the browse tab and install itinto my project.
Once the installation getscompleted let me navigate to Imports.
razor file and here I will add Syncfusion Blazor Dropdowns namespace to start using the Blazor ListBox in any of the components availableunder the pages folder.
Next, I will open the Startup.
cs file, and here I will add this Syncfusion Blazor namespace.
Then I will register this Syncfusion Blazor service by calling a method AddSyncfusionBlazor within the ConfigureServices method.
Also I should register the valid license key of the essential studio into my application so let me register the trial license key using the Register License method.
The next important thing is I need to define the CSS for ListBox.
Therefore let me navigate to Host.
cshtml file under the pages folder to refer the CSS file from the install this Syncfusion Blazor package.
Now everything is configured so let me proceed to add the Blazor ListBox.
For that I need to open the Index.
razor component and here I will include ListBox component by replacing the default code.
Now I will start to populate the data for the ListBox for that first I need tocreate a code block.
Here I have planned to display a sports name in the list box so let me define a model class GamesData with 2 fields namely Name and ID.
Then I need to create a list Games of type Games Data and assigned an array of objects to it.
To this list box, I need to specify the data source type so let me define a property TItem and set its value as GamesData.
Also, I need to specify the list box value field type, so let me define the property TValue and set its value as string.
Here I have defined the value as string, as the list box value field accepts morethan one value.
Next I will assign this object Games to the DataSource property of the list box.
For this data source theappropriate data source field should be mapped to the fieldsproperty of the list box component therefore I need to define ListBoxFieldSettings tag and map the data source fields Name to Text property and ID to Value property.
Also I have set a few CSS style properties here to better align the div container which holds the list box component.
Now I will run this example.
When you look at the Blazor list box you can see the sports name listed here.
Also you can select multiple items from the list.
Suppose if I want to bind remote data source to Blazor list box then I can bind it using the Data Manager component of Syncfusion which act as a gateway between the list box and data source and users queries tointeract with both the local and remote data source.
So as a first step I will navigate to Imports.
razor file and import the namespace Syncfusion Blazor Data to use the data manager component here.
Then inside the list box code I need to add the Data Manager component and define the properties URL, Adapter and CrossDomain.
In the URL I will be using thealready available remote URL service which will retrieve thelist of data through post action and bind the resultant data to the list box.
Also I have said Web API adapterhere as the URL is assigned with the existing Web API service.
And CrossDomain option is set to true to allow the cross origin domain request.
Since Ihave defined data manager component therefore I willremove the data source property from the list box code.
Here this remote URL contains 4 fields namely EmployeeID, First Name, Designation and Country.
Now to access this remote URLfields I need to create a model class EmployeeData with the fields EmployeeID, FirstName Designation and Country.
Then I also need to map theremote data source fields so let me map FirstName to Text property and EmployeeID to Value property.
Also I need to replace the TItem value as EmployeeData as I’m going to bind this EmployeeData model class to the list box.
So now you can see the listbox which shows employee names over here.
Ok, let me summarize some of the important points now.
We have seen how to add Blazor ListBox Syncfusion to the Blazor application.
Also we have seen how to populate list data and remote data source to the list box.
If you would like to seethe working of this example you can download it from the GitHub link which is shared in the description part below.
You can also grab your chance of getting a free license key to use a complete Blazor products if you fit into a community guidelinesso check the link given in the description part to know ifyou’re eligible for using a community license.
Also if you find this video as useful don’t forget to click the like buttonand subscribe to a channel to watch more videos like this.
Thanks for watching this video.