Showing posts with label MultiSelect. Show all posts
Showing posts with label MultiSelect. Show all posts

Sunday, 31 December 2017

Convert ASP.NET MVC dropdownlist into multi select textbox using Chosen JS plugin

In this article, I am going to explain you how to convert asp.net mvc dropdownlist into multi select textbox using Chosen JS plugin. You can see in below figure how the dropdown will look like after converting into multi select textbox.

Convert ASP.NET MVC dropdownlist into multi select textbox using Chosen JS plugin

Creating ASP.NET MVC Empty Application

Now the next step is to create ASP.NET MVC empty application as shown below.
Go to FileNewProject. A new window will be open as shown below.
Now go to Web and select .NET Framework 4.5 and give project name and click on OK .

Creating asp.net mvc 5 application

Now new window will open as shown below.
Now Select Empty Template, check on MVC checkbox and click on OK.

Selecting asp.net mvc 5 empty template

Now, a new project will be created as shown below.

Asp.net mvc 5 empty folder structure

Adding Models

Go to Models folder and add new class file CountryData.cs. Now replace all code with below code. Here we have one list property CountryList which is type of SelectListItem for holding list of country data. Four string property for holding Id of 4 different dropdowns which we will see in article.

Share:

Saturday, 23 December 2017

Dropdown with Multi Select (Multiple selection) with checkbox using jQuery, Bootstrap and Multiselect JS

In this tutorial, I am going to explain you how to implement multiple selection (MultiSelect) with dropdown (select option in html) using CheckBox with help of jQuery, Bootstrap and MultiSelect JS.

In HTML File

In html file, create a select list (dropdown) with multiple="multiple" and bind with some dummy data as shown below.
Here in script JS files, First file is jQuery file Second, Third is bootstrap JS, CSS files and Fourth, Fifth file is MultiSelect JS and CSS Files.
Make sure all files is loaded when application runs.

Share:

Sunday, 10 December 2017

Grid.MVC with MultiSelect DropDownList with CheckBox auto selected from database in MVC

In this tutorial, I am going to explain you bind how to bind multiple selection (MultiSelect) DropDownList with CheckBox in Grid.MVC in ASP.Net MVC from database using jQuery, Bootstrap and MultiSelect JS. I will be using Visual Studio 2013 and ADO.Net code to get data from SQL-Server Database.

As you can see in below screen-shot, multi-select dropdownlist is auto-selected. Here in Subject column , subject value is concatenated with comma from database, while binding to MVCGrid subject is auto selected in last column as shown below.

Grid.MVC with MultiSelect DropDownList with CheckBox auto selected from database in MVC

Creating Table and Procedure

Use below script to create a Student Table and procedure to fetch data from database.

Share:

Sunday, 22 October 2017

ASP.NET ListBox with Multi Select DropdownList with CheckBoxes Using jQuery

In this tutorial, I am going to explain you how to implement multiple selection (MultiSelect) with ListBox control using CheckBox in ASP.NET with help of jQuery, Bootstrap and MultiSelect JS.

In ASPX File

In aspx file, create a ListBox control with SelectionMode="Multiple" and bind with some dummy ListItem data as shown below.
Here in script JS files, First is jQuery file and Second, Third is bootstrap JS and CSS files and Fourth and Fifth file is MultiSelect JS and CSS Files.
Make sure all files is loaded when application runs.
Here includeSelectAllOption is set to true to include Select All text at first position in Select List.

Share:

Email Subscription

Subscribe to our newsletter to get the latest articles directly into your inbox

Blog Archive

Ads By Chitika