Introduction

Kendo multi select is one of the widgets from Kendo UI package. This article explains how to implement the Kendo multi select control in our HTML page using ASP.NET WEB API . To explain it, I have created a RESTful GET Service using ASP.NET WEB API, which is used to load the DataSource of Kendo panel bar.

Prerequisites

Basic knowledge of ASP.NET Web API, jQuery, and Kendo UI.

Content

  1. Creating an ASP.NET WEB API Application.
  2. Creating a Controller.
  3. Testing the REST API.
  4. Remote data binding in Kendo multi select control

Creating an ASP.NET Web API Application

Create a Web API Application, using an installed Web template in Visual Studio, as shown below. In my case, I named the Application “TechnologyList”.


Figure 1

Figure 2

Creating a Model

In the Solution Explorer, right click the Models folder, select Add, followed by Class and name it as “TechnologyList.cs”.
TechnologyList.cs
  1. public class TechnologyList
  2. {
  3. public TechnologyList(int Value,string Text)
  4. {
  6. this.Value = Value;
  7. this.Text = Text;
  8. }
  9. public int Value { get; set; }
  10. public string Text { get; set; }
  11. }
Creating a Controller

Right click on the Controller folder and add a new Web API 2- Empty controller, as shown in the figure 3. In my case, I named it as TechnologiesController.


Figure 3

TechnologiesController.cs
  1. [RoutePrefix("api/Technology")]
  2. public class TechnologiesController : ApiController
  3. {
  4. [HttpGet]
  5. [AllowAnonymous]
  6. [Route("TechnologiesList")]
  7. public HttpResponseMessage GetTechnology()
  8. {
  9. try
  10. {
  11. List<TechnologyList> _TechList = new List<TechnologyList>();
  12. _TechList.Add( new TechnologyList( 1, "ASP.NET"));
  13. _TechList.Add(new TechnologyList(2, "ADO.NET"));
  14. _TechList.Add(new TechnologyList(3,"SilverLight"));
  15. _TechList.Add(new TechnologyList(4, "C#"));
  16. _TechList.Add(new TechnologyList(5, "SQL Server"));
  18. return Request.CreateResponse(HttpStatusCode.OK, _TechList, Configuration.Formatters.JsonFormatter);
  21. }
  22. catch(Exception ex)
  23. {
  24. return Request.CreateResponse(HttpStatusCode.OK, ex.Message, Configuration.Formatters.JsonFormatter);
  25. }
  26. }
  29. }

The Technologies Controller Action GetTechnolgy will return a list of technologies.

Testing the REST API

Test API, using the POSTMAN/Fiddler, as shown in figure 4.

  • API End Point /api/Technology/TechnologiesList.
  • Type GET.

Figure 4

Remote Data Binding in Kendo multi select control

Create a new HTML page in our Application. In my case, I named it as kendoMultiSelect.html

kendoMultiSelect.html

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Kendo Multi Select</title>
  5. <meta charset="utf-8" />
  6. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css">
  7. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css">
  8. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.default.min.css">
  9. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css">
  11. <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
  12. <script src="http://kendo.cdn.telerik.com/2017.1.118/js/angular.min.js"></script>
  13. <script src="http://kendo.cdn.telerik.com/2017.1.118/js/jszip.min.js"></script>
  14. <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>
  15. </head>
  16. <body>
  17. <h3> Kendo Multi Select</h3>
  18. <div class="demo-section k-content">
  19. <select id="technologies" data-placeholder="Select Technology..."></select>
  20. </div>
  21. <script>
  22. $(document).ready(function () {
  23. var dataSource = new kendo.data.DataSource({
  24. transport: {
  25. read: {
  26. url: "/api/Technology/TechnologiesList",
  27. dataType: "json"
  28. }
  29. },
  30. });
  31. $("#technologies").kendoMultiSelect({
  32. dataTextField: "Text",
  33. dataValueField: "Value",
  34. dataSource: dataSource
  35. });
  36. });
  38. </script>
  39. </body>
  40. </html>
Result in the Browser is given below.


Figure 5


Figure 6


Figure 7
Reference
  • http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect
I hope, you have enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome.