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.

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.

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.

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.

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

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.

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.

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.