This article explains how to crete a cascading dropdownlist in the Kendo UI using the Web API and Entity Framework with the Database First approach.



My database schema is as in the following figure:



My table structure is as in the following figure:



I am using the Entity Framework with Database First approach, so the Entity Framework builds default model classes and context classes.

Create a data transfer object model class.

Write the following code in the new model class:
  1. public class Country
  2. {
  3. public int CountryId
  4. {
  5. get;
  6. set;
  7. }
  8. public string CountryName
  9. {
  10. get;
  11. set;
  12. }
  13. }
  14. public class State
  15. {
  16. public int StateId
  17. {
  18. get;
  19. set;
  20. }
  21. public int CountryId
  22. {
  23. get;
  24. set;
  25. }
  26. public string StateName
  27. {
  28. get;
  29. set;
  30. }
  31. }
  32. public class City
  33. {
  34. public int StateId
  35. {
  36. get;
  37. set;
  38. }
  39. public int CityId
  40. {
  41. get;
  42. set;
  43. }
  44. public string CityName
  45. {
  46. get;
  47. set;
  48. }
  49. }
Now add one more class to do the conversion and write the following code in the class.
  1. public static List < Country > CountriesToCountry(List < tbl_country > e)
  2. {
  3. List < Country > lstCountry = e.Select(country = > new Country()
  4. {
  5. CountryId = country.Country_ID, CountryName = country.Country_Name
  6. }).ToList();
  7. return lstCountry;
  8. }
  9. public static List < State > FCountrytoState(List < tbl_state > e)
  10. {
  11. List < State > lstState = e.Select(state = > new State()
  12. {
  13. StateId = state.State_ID, StateName = state.State_Name
  14. }).ToList();
  15. return lstState;
  16. }
  17. public static List < City > FStatetoCity(List < tbl_city > e)
  18. {
  19. List < City > lstCity = e.Select(city = > new City()
  20. {
  21. CityId = city.City_ID, CityName = city.City_Name
  22. }).ToList();
  23. return lstCity;
  24. }
Now create a Web API controller class as in the following figure:


Write the following code in the new controller class.
  1. public class CascadingController: ApiController
  2. {
  3. testEntities dbcontext1 = new testEntities();
  4. public IEnumerable < Country > GetCountries()
  5. {
  6. var lstCountries = from r in dbcontext1.tbl_country select r;
  7. List < Country > lst = new List < Country > ();
  8. lst = Converter.CountriesToCountry(lstCountries.ToList());
  9. return lst;
  10. }
  11. [ActionName("GetStates")]
  12. public IEnumerable < State > GetStates(int id)
  13. {
  14. var lstStates = dbcontext1.tbl_state.Where(b = > b.Country_ID == id).ToList();
  15. List < State > list = new List < State > ();
  16. list = Converter.FCountrytoState(lstStates.ToList());
  17. return list;
  18. }
  19. [ActionName("GetCities")]
  20. public IEnumerable < City > GetCities(int id)
  21. {
  22. var lstCities = dbcontext1.tbl_city.Where(b = > b.State_ID == id).ToList();
  23. List < City > list = new List < City > ();
  24. list = Converter.FStatetoCity(lstCities.ToList());
  25. return list;
  26. }
  27. }
To avoid the conflict between GetStates and GetCities methods add the following routing configuration in the WebApiConfig class:
  1. config.Routes.MapHttpRoute(
  3. name: "DefaultApiWithAction",
  4. routeTemplate: "api/{controller}/{action}/{id}",
  5. defaults: new { id = RouteParameter.Optional }
  7. );

Check the API services using the POSTMAN/Fiddler as in the following figures.

Case 1: /api/Cascading/



Case 2: /api/Cascading/GetStates/2



Case 3: /api/Cascading/GetCities/2



Now it's time for creating a design to consume the service.

Create an HTML page, here's the design:

  1. <head>
  2. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.common.min.css" />
  3. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.default.min.css" />
  4. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.min.css" />
  5. <link rel="stylesheet" href="http://cdn.kendostatic.com/2014.3.1316/styles/kendo.dataviz.default.min.css" />
  6. <script src="http://cdn.kendostatic.com/2014.3.1316/js/jquery.min.js"></script>
  7. <script src="http://cdn.kendostatic.com/2014.3.1316/js/kendo.all.min.js"></script>
  8. <title></title>
  9. </head>
  10. <body>
  11. <div id="example">
  12. <div class="demo-section k-header">
  13. <h4>Products</h4>
  14. <input id="products" style="width: 50%" />
  15. <br />
  16. <br />
  17. <input id="State" disabled="disabled" style="width: 50%" />
  18. <br />
  19. <br />
  20. <input id="City" disabled="disabled" style="width: 50%" />
  21. </div>
  22. </div>
  23. </body>
JavaScript

  1. $(document).ready(function() {
  2. $("#State").data("kendoDropDownList")
  4. function onChange(e) {
  5. e.preventDefault();
  6. $("#State").kendoDropDownList({
  7. enable: true,
  8. dataTextField: "StateName",
  9. dataValueField: "StateId",
  10. optionLabel: "Select State",
  11. change: onChangeState,
  12. dataSource: {
  13. transport: {
  14. read: {
  15. dataType: "json",
  16. url: "/api/Cascading/GetStates/" + $("#products").val(),
  17. }
  18. }
  19. }
  20. });
  21. var dropdownlist = $("#State").data("kendoDropDownList")
  22. dropdownlist.enable();
  23. };
  25. function onChangeState(e) {
  26. e.preventDefault();
  27. $("#City").kendoDropDownList({
  28. dataTextField: "CityName",
  29. dataValueField: "CityId",
  30. optionLabel: "Select City",
  31. dataSource: {
  32. transport: {
  33. read: {
  34. dataType: "json",
  35. url: "/api/Cascading/GetCities/" + $("#State").val(),
  36. }
  37. }
  38. }
  39. });
  40. var dropdownlist = $("#City").data("kendoDropDownList")
  41. dropdownlist.enable();
  42. };
  43. $("#products").kendoDropDownList({
  44. dataTextField: "CountryName",
  45. dataValueField: "CountryId",
  46. optionLabel: "Select Country",
  47. change: onChange,
  48. dataSource: {
  49. transport: {
  50. read: {
  51. dataType: "json",
  52. url: "/api/Cascading",
  53. }
  54. }
  55. }
  56. });
  57. });
The result in browser:
References
I hope you have enjoyed this article, Thank you.