I am writing this article mainly because I have not found many articles on binding data using a Kendo dropdown list with server-side filtering and searching. In this article, we are using ASP.NET MVC. We can use the same logic to apply for ASP.NET as well.

Step 1

Create a table for Country or other kinds as per your requirement, which holds both text and value to display items in the drop-down list. Here, I’m using some method which returns a country list as a data source.

Step 2

Create one ASP.NET MVC/ASP.NET project. Here, I’m using an ASP.NET MVC Application to demonstrate. I’m creating one controller to display the Kendo drop-down list.

Step 3

To access the predefined functionality from Kendo UI, we need to add the following scripts and CSS in our application. So, just add the below references in your project.
  1. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css" />
  2. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css" />
  3. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css" />
  4. <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
  5. <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"></script>

Step 4

I have created an empty controller and named it as Country.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. namespace Demo.Controllers {
  7. public class CountryController: Controller {
  8. // GET: Crud
  9. public ActionResult Index() {
  10. return View();
  11. }
  12. }
  13. }

Step 5

Now, add a View for this action method and add the below code to it which will render the Kendo dropdown to the input element.

  1. <input id="ddlcountries" style="width: 100%;" />

Step 6

Create one method in the controller which will return a list of countries that should contain a format that has both, text and value.
  1. public class Country
  2. {
  3. public string Code { get; set; }
  4. public string EnglishName {get;set;}
  5. }

In the above code, I have created one class which will hold the properties of country as code and EnglishName which is considered as text and value.

  1. public static List<Country> Countries = new List<Country>
  2. {
  3. new Country {Code = "IN", EnglishName = "India"},
  4. new Country {Code = "AU", EnglishName = "Australia"},
  5. new Country {Code = "SE", EnglishName = "Sweden"},
  6. };

The above method returns the list of countries which we are going to use as our data source.

Step 7

Create one action method which will filter and search the data based on the page size sent from JavaScript and this method will return the filtered result in JSON format.
  1. public JsonResult GetCountries()
  2. {
  3. int pageSize = Convert.ToInt32(Request.Params.Get("pageSize"));
  4. int skip = Convert.ToInt32(Request.Params.Get("skip"));
  5. string search = Request.Params.Get("filter[filters][0][value]");
  6. var countriesList = Countries ;
  7. var total = countriesList.Count();
  8. var data = countriesList.Skip(skip).Take(pageSize).ToList();
  9. if (!string.IsNullOrEmpty(search) && !string.IsNullOrWhiteSpace(search))
  10. {
  11. var result = countriesList.Where(x => x.EnglishName.ToString().ToLower().Contains(search.ToLower())).ToList();
  12. total = result.Count;
  13. return Json(new { total = total, data = result }, JsonRequestBehavior.AllowGet);
  15. }
  16. return Json(new { total = total, data = data }, JsonRequestBehavior.AllowGet);
  17. }

The above method will receive page size, search parameters from the request. We will capture these input parameters and send to the method to receive the output in JSON format.

Step 8

Now, add the below script to load data to Kendo drop-down list.
  1. $("#ddlcountries").kendoDropDownList({
  2. dataTextField: "EnglishName",
  3. dataValueField: "Code",
  4. noDataTemplate: 'No Data!',
  5. filter: "contains",
  6. minLength: 2,
  7. virtual: {
  8. itemHeight: 26,
  9. valueMapper: function (options) {
  10. $.ajax({
  11. url: '/CountriesValueMapper',
  12. type: "GET",
  13. dataType: "jsonp",
  14. data: convertValues(options.value),
  15. success: function (data) {
  16. options.success(data);
  17. }
  18. })
  19. }
  20. },
  21. height: 75,
  22. dataSource: {
  23. transport: {
  24. read: function (options) {
  25. $.ajax({
  26. url: '/GetCountries',
  27. contentType: 'application/json',
  28. dataType: 'json',
  29. type: 'GET',
  30. data: options.data,
  31. success: function (result) {
  32. options.success(result);
  33. }
  34. })
  35. }
  36. },
  37. schema: {
  38. data: 'data',
  39. total: 'total',
  40. fields: [
  41. { field: 'EnglishName', type: 'string' },
  42. { field: 'Code', type: 'string' },
  43. ]
  44. },
  45. pageSize: 11,
  46. Type: "aspnetmvc-ajax",
  47. serverPaging: true,
  48. serverFiltering: true
  49. },
  50. optionLabel: {
  51. EnglishName: "Select",
  52. Code: "0",
  53. },
  54. index: 0
  55. });

Detailed Explanation

Step 9

Create one action method named CountriesValueMapper which will return the selected item index.
  1. public JsonResult CountriesValueMapper(int[] values)
  2. {
  3. var indices = new List<int>();
  4. var countryList = Countries ;
  6. if (values != null && values.Any())
  7. {
  8. var index = 0;
  10. foreach (var item in countryList)
  11. {
  12. if (values.Contains(item.Code))
  13. {
  14. indices.Add(index);
  15. }
  16. index += 1;
  17. }
  18. }
  19. return Json(indices, JsonRequestBehavior.AllowGet);
  20. }

Step 10

In order to pass the input parameter from AJAX call, we need to convert into a specific format in order to pass to server side function. Please add the below function in JavaScript code, which will convert into a specific format.
  1. var data = {};
  3. value = $.isArray(value) ? value : [value];
  5. for (var idx = 0; idx < value.length; idx++) {
  6. data["values[" + idx + "]"] = value[idx];
  7. }
  9. return data;

Step 11

Save and run this. It will render the drop-down list with server-side filtering and searching.