Implement DropDown MultiSelect Using Kendo UI MultiSelect In ASP.NET MVC5

Introduction

 

In this article, I am going to explain how to bind the value to a dropdown from the database, how to implement drop-down multi-select, how to group the drop-down values, and how to implement Custom Template using Kendo UI MultiSelect in ASP.Net MVC5. 

 

Prerequisites 

• Basic knowledge of MVC.
• Basic knowledge of jQuery.
• Basic knowledge of Entity Framework.
• Basic knowledge of Kendo UI.
• Basic Knowledge of CSS

Article Flow

• Create a database table with the values
• Create ASP.NET MVC empty Project 
• Configure Entity Framework in ASP.Net MVC Application
• Create Controller and Write logic to load data from database
• Create View with Dropdown controller
• Enable Kendo UI Multi-select features with ASP.Net MVC Application
• Basic Feature Of Kendo UI Multi-Select
• Kendo UI Multi-Select Grouping
• Kendo UI Multi-Select Custom Template 

Create a database table with the values

 

First, we will create a table in SQL Server to populate the drop-down with the data in ASP.NET MVC. I have designed the below table. 

 

 

Execute the below query to create a table with the above design.

CREATE TABLE [dbo].[Employee](
[Id] [int] IDENTITY(1,1) NOT NULL,
[Name] [nvarchar](200) NULL,
[Designation] [nvarchar](200) NULL,
CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
(
   [Id] ASC
)WITH (PAD_INDEX = OFF, STATISTICS_NORECOMPUTE = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS = ON, ALLOW_PAGE_LOCKS = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

And, insert a few dummy records. For that, execute the below query.

SET IDENTITY_INSERT [dbo].[Employee] ON
GO
INSERT [dbo].[Employee] ([Id], [Name], [Designation]) VALUES (1, N'Gnanavel Sekar', N'Software Engineer')
GO
INSERT [dbo].[Employee] ([Id], [Name], [Designation]) VALUES (2, N'Ramar Ammavasi', N'Tech Lead')
GO
INSERT [dbo].[Employee] ([Id], [Name], [Designation]) VALUES (3, N'Ammaiyappan I', N'Software Engineer')
GO
INSERT [dbo].[Employee] ([Id], [Name], [Designation]) VALUES (4, N'Gokul A', N'Sr.Software Engineer')
GO
INSERT [dbo].[Employee] ([Id], [Name], [Designation]) VALUES (5, N'Karthick ', N'Sr.Software Engineer')
GO
INSERT [dbo].[Employee] ([Id], [Name], [Designation]) VALUES (6, N'Robert', N'Application Developer')
GO
INSERT [dbo].[Employee] ([Id], [Name], [Designation]) VALUES (7, N'Vinoth', N'Programmer')
GO
INSERT [dbo].[Employee] ([Id], [Name], [Designation]) VALUES (8, N'Kannan', N'Programmer')
GO
INSERT [dbo].[Employee] ([Id], [Name], [Designation]) VALUES (9, N'Gopal', N'Sr.Software Engineer')
GO
INSERT [dbo].[Employee] ([Id], [Name], [Designation]) VALUES (10, N'Ananad', N'Software Engineer')
GO
INSERT [dbo].[Employee] ([Id], [Name], [Designation]) VALUES (11, N'Manoj', N'Sr.Software Engineer')
GO
INSERT [dbo].[Employee] ([Id], [Name], [Designation]) VALUES (12, N'Subash', N'Programmer')
GO
SET IDENTITY_INSERT [dbo].[Employee] OFF
GO

Once you execute the above query, you will get the employee record as below.

 

 

 

Create ASP.NET MVC empty project

 

To create ASP.NET MVC empty project, follow the below steps one by one. Here, I have used Visual Studio 2013. 

 

Step 1

 

Select New Project -> Visual C# -> Web -> ASP.NET Web Application and enter your application name. Here, I named it "KendoMultiSelect". Now, click OK.

Step 2

 

Select Empty MVC project and click OK to create the project. Once you click OK, the project will be created with the basic architecture of MVC.

 

 

 

Configure Entity Framework in ASP.NET MVC Application

 

In Implement Database First Approach with Entity Framework, I have already discussed how to configure and implement database first approach. In the meantime, choose your created table with Entity Framework.

 

Once we are done with our configuration with SQL table "Employee" from the CSharpCorner database, we will get the below screen as succeeding configuration. 

 

 

Create Controller and write the logic to load the data from database

 

Create an empty Controller and name it as "MultiSelectController". Whenever we create an empty Controller, it is created with empty Index action method. So, write the below logic to load the data from the database using Entity Framework.

// GET: /MultiSelect/
public ActionResult Index() {
    using(CSharpCornerEntities cotext = new CSharpCornerEntities()) {
        var employeeCollection = (from employees in cotext.Employees select employees).ToList();
        if (employeeCollection != null) {
            ViewBag.Employees = employeeCollection.Select(N => new SelectListItem {
                Text = N.Name + " - " + N.Designation, Value = N.Id.ToString()
            });
        }
    }
    return View();
}

In the above code, you can see that we are loading employee table's data and assigning that to the viewBag. Now, right-click on this Index action method to create an empty View.

 

Create View with Dropdown Controller

 

Now, let's create a drop-down Controller in View and assign the viewBag values to it. The multiple parameters allow us to select more than one value from the drop-down.In below code, we checked whether or not the viewBag has the value. If the value is there, just simply assign the viewBag value to the drop-down.

<select id="EmployeesBasic" multiple="multiple" required name="EmployeesBasic">
@if (ViewBag.Employees != null)
{
   foreach (var item in ViewBag.Employees)
   {
      if (item.Text != null)
      {
         <option value="@item.Value">
            @item.Text
         </option>
      }
   }
}
</select>

Enable Kendo UI and Kendo UI Multi-select features with ASP.NET MVC Application

 

 Here, we going to enable the Kendo UI and Multi-Select features with our application by adding the below CSS and JS in our Layout page or View.

<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<link href="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
<script src="http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script>

And, add the script given below to enable the Kendo UI Multi-select plugin to the respective control. 

<script>
    $(document).ready(function() {
        // create MultiSelect from select HTML element
        //1.Basic DropDownMultiSelect
        $('#EmployeesBasic').multiselect({
            includeSelectAllOption: true
        });
    });
</script>

We need to get the selected value from the drop-down list, so add one button in teh View and write the below script to get the selected value from drop-down.

$("#btnGetBasic").click(function() {
    alert($("#EmployeesBasic").val());
});

Run your application.

 

 

 

 

Kendo UI Multi-Select Grouping

   

In the above result, we can see that we are able to select more than one item and can view the selected item value. Now, we will see how to group the employees by departments. For that, we need to refer the below CSS and JS in our View

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>

Now, we will create another drop-down control like the earlier one and will load the data using jQuery AJAX and Kendo transport. Create a button to get the selected value from the drop-down list

<select id="EmployeesGrouping" multiple="multiple" required name="EmployeesGrouping">
@if (ViewBag.Employees != null)
{
foreach (var item in ViewBag.Employees)
{
   if (item.Text != null)
   {
      <option value="@item.Value">
         @item.Text
      </option>
      }
   }
   }
</select> <br /> <input type="button" id="btnGetGrouping" value="Grouping - Click me to Get Selected Employee(s)" /> <br />

Add the below script to enable kendoMultiSelect and load the data from database using kendo transport. In the below code, the dataTextField represents which column value needs to be displayed in the dropdown and the dataValueField represents value for each text and important one is group parameter to enable the grouping operation based on the column value. Here, I have mentioned to group the employees by their designation.

$("#EmployeesGrouping").kendoMultiSelect({
    includeSelectAllOption: true,
    placeholder: "Select Employees...",
    dataTextField: "Name",
    dataValueField: "Id",
    height: 400,
    dataSource: {
        type: "json",
        transport: {
            read: "http://localhost:24597/MultiSelect/DropDownGrouping"
        },
        group: {
            field: "Designation"
        }
    }
});

Write the below logic in Controller to load the data from database.

public JsonResult DropDownGrouping()
{
   CSharpCornerEntities cotext = new CSharpCornerEntities();
   var employeeCollection = (from employees in cotext.Employees select employees).ToList();
   return Json(employeeCollection, JsonRequestBehavior.AllowGet);
}

And, add the below event to get the selected value from drop-down list

$("#btnGetGrouping").click(function () {
   alert($("#EmployeesGrouping").val());
});

Run your application.

 

  

 

Kendo UI Multi-Select Custom Template

 

Here, we will build a custom template to view the employee photo in drop-down list. For that, use the same CSS and JS whatever we used for grouping functionality.

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js"></script>

And, create a drop-down Controller with one button in a View.

<div id="example">
    <div class="demo-section k-content"> <select id="EmployeesCustom" style="width: 100%;"></select>
        <p class="demo-hint"> Click to see the customized appearance. </p>
    </div>
</div> <br /> <input type="button" id="btnGetCustom" value="Custom Template - Click me to Get Selected Employee(s)" />

And, create a template in the script using KendoMultiSelect as below.

$("#EmployeesCustom").kendoMultiSelect({
    dataTextField: "Name",
    dataValueField: "Id",
    headerTemplate: '<div class="dropdown-header k-widget k-header">' + '<span>Photo</span>' + '<span>Employee Info</span>' + '</div>',
    footerTemplate: 'Total #: instance.dataSource.total() # items found',
    itemTemplate: '<span class="k-state-default" style="background-image: url(\'../Content/Employees/#:data.Id#.jpg\')"></span>' + '<span class="k-state-default"><h3>#: data.Name #</h3><p>#: data.Designation #</p></span>',
    tagTemplate: '<span class="selected-value" style="background-image: url(\'../Content/Employees/#:data.Id#.jpg\')"></span><span>#:data.Name#</span>',
    dataSource: {
        transport: {
            read: {
                dataType: "json",
                url: "http://localhost:24597/MultiSelect/DropDownGrouping",
            }
        }
    },
    height: 400
});

Detailed Description 

• $("#EmployeesCustom").kendoMultiSelect({ -> To enable multi-select dropdown.
• dataTextField: "Name", -> Which field needs to be displayed
• dataValueField: "Id", -> Which field needs to be a value fields 
• headerTemplate -> To create a tiltile over the drop-down list, here, we mentioned to create two titles such as photo and employee info 
• footerTemplate-> Will be displayed bottom of the dropdownlist and here, we used the footer template to display the counts of employee
• itemTemplate-> It will the data from database, in kendo template, we should specify our desire column value to display and it should be mentioned like #:data.Name# and we load the data from database using the transport read.

Add the below button click event to get the selected drop-down list value.

$("#btnGetCustom").click(function () {
   alert($("#EmployeesCustom").val());
});

Write the below logic in a Controller to load the data from the database. This action method is called from kendo transport read.

public JsonResult DropDownGrouping() {
    CSharpCornerEntities cotext = new CSharpCornerEntities();
    var employeeCollection = (from employees in cotext.Employees select employees).ToList();
    return Json(employeeCollection, JsonRequestBehavior.AllowGet);
}

Add the below CSS to give good appearance to your drop-down custom template.

<style>
    .dropdown-header {
        border-width: 0 0 1px 0;
        text-transform: uppercase;
    }

    .dropdown-header>span {
        display: inline-block;
        padding: 10px;
    }

    .dropdown-header>span:first-child {
        width: 50px;
    }

    .k-list-container>.k-footer {
        padding: 10px;
    }

    .selected-value {
        display: inline-block;
        vertical-align: middle;
        width: 18px;
        height: 18px;
        background-size: 100%;
        margin-right: 5px;
        border-radius: 50%;
    }

    #EmployeesCustom-list .k-item {
        line-height: 1em;
        min-width: 300px;
    }

    /* Material Theme padding adjustment*/

    .k-material #EmployeesCustom-list .k-item,
    .k-material #custoEmployeesCustommers-list .k-item.k-state-hover,
    .k-materialblack #EmployeesCustom-list .k-item,
    .k-materialblack #EmployeesCustom-list .k-item.k-state-hover {
        padding-left: 5px;
        border-left: 0;
    }

    #EmployeesCustom-list .k-item>span {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        vertical-align: top;
        margin: 20px 10px 10px 5px;
    }

    #EmployeesCustom-list .k-item>span:first-child {
        -moz-box-shadow: inset 0 0 30px rgba(0, 0, 0, .3);
        -webkit-box-shadow: inset 0 0 30px rgba(0, 0, 0, .3);
        box-shadow: inset 0 0 30px rgba(0, 0, 0, .3);
        margin: 10px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background-size: 100%;
        background-repeat: no-repeat;
    }

    #EmployeesCustom-list h3 {
        font-size: 1.2em;
        font-weight: normal;
        margin: 0 0 1px 0;
        padding: 0;
    }

    #EmployeesCustom-list p {
        margin: 0;
        padding: 0;
        font-size: .8em;
    }
</style>

Now, run your application.

 

 

 

Complete View 

@ {
    ViewBag.Title = "Index";
} < title > < /title>
@ * Basic DropDownMultiSelect CSS and JS Start * @ < script src = "http://code.jquery.com/jquery-1.12.4.min.js" > < /script> < link href = "http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css"
rel = "stylesheet"
type = "text/css" / > < script src = "http://cdn.rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js" > < /script> < link href = "http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"
rel = "stylesheet"
type = "text/css" / > < script src = "http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js" > < /script>
@ * Basic DropDownMultiSelect CSS and JS End * @
@ * //Grouping and Custom Template Related CSS and JS Start *@
    < link rel = "stylesheet"
href = "https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common-material.min.css" / > < link rel = "stylesheet"
href = "https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.min.css" / > < link rel = "stylesheet"
href = "https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.material.mobile.min.css" / > < script src = "https://kendo.cdn.telerik.com/2017.3.1026/js/jquery.min.js" > < /script> < script src = "https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.all.min.js" > < /script>
@ * //Grouping Related CSS and JS End *@
    < body > < br / > < div > @ * Basic Template Start * @ < select id = "EmployeesBasic"
multiple = "multiple"
required name = "EmployeesBasic" > @if(ViewBag.Employees != null) {
    foreach(var item in ViewBag.Employees) {
        if (item.Text != null) { < option value = "@item.Value" > @item.Text < /option>
        }
    }
} < /select> < br / > < br / > < input type = "button"
id = "btnGetBasic"
value = "Basic - to Get Selected Employee(s)" / > < br / > @ * Basic Template End * @
@ * Grouping Template Start * @ < select id = "EmployeesGrouping"
multiple = "multiple"
required name = "EmployeesGrouping" > @if(ViewBag.Employees != null) {
    foreach(var item in ViewBag.Employees) {
        if (item.Text != null) { < option value = "@item.Value" > @item.Text < /option>
        }
    }
} < /select> < br / > < input type = "button"
id = "btnGetGrouping"
value = "Grouping - Click me to Get Selected Employee(s)" / > < br / > @ * Grouping Template End * @
@ * Custom Template Start * @ < div id = "example" > < div class = "demo-section k-content" > < select id = "EmployeesCustom"
style = "width: 100%;" > < /select> < p class = "demo-hint" > Click to see the customized appearance. < /p> < /div> < /div> < br / > < input type = "button"
id = "btnGetCustom"
value = "Custom Template - Click me to Get Selected Employee(s)" / > @ * Custom Template End * @ < br / > < script > $(document).ready(function() {
    // create MultiSelect from select HTML element
    //1.Basic DropDownMultiSelect
    $('#EmployeesBasic').multiselect({
        includeSelectAllOption: true
    });
    //2.Grouping Dropdown Multi Select
    $("#EmployeesGrouping").kendoMultiSelect({
        includeSelectAllOption: true,
        placeholder: "Select Employees...",
        dataTextField: "Name",
        dataValueField: "Id",
        height: 400,
        dataSource: {
            type: "json",
            transport: {
                read: "http://localhost:24597/MultiSelect/DropDownGrouping"
            },
            group: {
                field: "Designation"
            }
        }
    });
    //Custom DropDown Template
    $("#EmployeesCustom").kendoMultiSelect({
        dataTextField: "Name",
        dataValueField: "Id",
        headerTemplate: '<div class="dropdown-header k-widget k-header">' + '<span>Photo</span>' + '<span>Employee Info</span>' + '</div>',
        footerTemplate: 'Total #: instance.dataSource.total() # items found',
        itemTemplate: '<span class="k-state-default" style="background-image: url(\'../Content/Employees/#:data.Id#.jpg\')"></span>' + '<span class="k-state-default"><h3>#: data.Name #</h3><p>#: data.Designation #</p></span>',
        tagTemplate: '<span class="selected-value" style="background-image: url(\'../Content/Employees/#:data.Id#.jpg\')"></span><span>#:data.Name#</span>',
        dataSource: {
            transport: {
                read: {
                    dataType: "json",
                    url: "http://localhost:24597/MultiSelect/DropDownGrouping",
                }
            }
        },
        height: 400
    });
    //Basic
    $("#btnGetBasic").click(function() {
        alert($("#EmployeesBasic").val());
    });
    //Grouping
    $("#btnGetGrouping").click(function() {
        alert($("#EmployeesGrouping").val());
    });
    //Custom
    $("#btnGetCustom").click(function() {
        alert($("#EmployeesCustom").val());
    });
}); < /script>
@ * Custom Template Related CSS * @ < style > .dropdown - header {
    border - width: 0 0 1 px 0;
    text - transform: uppercase;
}.dropdown - header > span {
    display: inline - block;
    padding: 10 px;
}.dropdown - header > span: first - child {
    width: 50 px;
}.k - list - container > .k - footer {
    padding: 10 px;
}.selected - value {
    display: inline - block;
    vertical - align: middle;
    width: 18 px;
    height: 18 px;
    background - size: 100 % ;
    margin - right: 5 px;
    border - radius: 50 % ;
}#
EmployeesCustom - list.k - item {
        line - height: 1e m;
        min - width: 300 px;
    }
    /* Material Theme padding adjustment*/
    .k - material# EmployeesCustom - list.k - item, .k - material# custoEmployeesCustommers - list.k - item.k - state - hover, .k - materialblack# EmployeesCustom - list.k - item, .k - materialblack# EmployeesCustom - list.k - item.k - state - hover {
        padding - left: 5 px;
        border - left: 0;
    }#
EmployeesCustom - list.k - item > span {
    -webkit - box - sizing: border - box; - moz - box - sizing: border - box;
    box - sizing: border - box;
    display: inline - block;
    vertical - align: top;
    margin: 20 px 10 px 10 px 5 px;
}#
EmployeesCustom - list.k - item > span: first - child {
    -moz - box - shadow: inset 0 0 30 px rgba(0, 0, 0, .3); - webkit - box - shadow: inset 0 0 30 px rgba(0, 0, 0, .3);
    box - shadow: inset 0 0 30 px rgba(0, 0, 0, .3);
    margin: 10 px;
    width: 50 px;
    height: 50 px;
    border - radius: 50 % ;
    background - size: 100 % ;
    background - repeat: no - repeat;
}#
EmployeesCustom - list h3 {
    font - size: 1.2e m;
    font - weight: normal;
    margin: 0 0 1 px 0;
    padding: 0;
}#
EmployeesCustom - list p {
    margin: 0;
    padding: 0;
    font - size: .8e m;
} < /style> < /div> < /body>

Complete Controller 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using KendoMultiSelect.Models;
namespace KendoMultiSelect.Controllers {
    public class MultiSelectController: Controller {
        //
        // GET: /MultiSelect/
        public ActionResult Index() {
            using(CSharpCornerEntities cotext = new CSharpCornerEntities()) {
                var employeeCollection = (from employees in cotext.Employees select employees).ToList();
                if (employeeCollection != null) {
                    ViewBag.Employees = employeeCollection.Select(N => new SelectListItem {
                        Text = N.Name + " - " + N.Designation, Value = N.Id.ToString()
                    });
                }
            }
            return View();
        }
        public JsonResult DropDownGrouping() {
            CSharpCornerEntities cotext = new CSharpCornerEntities();
            var employeeCollection = (from employees in cotext.Employees select employees).ToList();
            return Json(employeeCollection, JsonRequestBehavior.AllowGet);
        }
    }
}

RouteConfig 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using System.Web.Routing;
namespace KendoMultiSelect {
    public class RouteConfig {
        public static void RegisterRoutes(RouteCollection routes) {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
            routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new {
                controller = "MultiSelect", action = "Index", id = UrlParameter.Optional
            });
        }
    }
}

I hope you got a clear picture of Kendo UI Multi-Select features. I did attach the demonstrated project without package for Entity Framework 6.0 due to the size limit.

 

Summary 

 

In this article, you learned how to work with Kendo UI MultiSelect in ASP.NET MVC application, how to bind the data to it, how to group the drop-down items, how to create a custom template, and how to get the selected data from the drop-down.

 

I hope it's helpful. Your valuable feedback and comments about this article are always welcome.