Introduction

Telerik has announced a most awaited widget called Kendo List Box for jQuery, ASP.NET MVC and ASP.NET Core from their recent release (Telerik R2 2017). In this article, I am going to discuss about how to implement Kendo list box control for jQuery with remote data binding.

Remote Data Source for Kendo UI List Box

I am going to use the API response given below to construct my remote datasource for Kendo List Box which was created in my previous article.

API - http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList

Type - GET.

Testing the APIs, using POSTMAN.



Create a new HTML page. In my case, I named it KendoListBox.cshtml

KendoListBox.cshtml

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Kendo List Box</title>
  7. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css" />
  8. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.rtl.min.css" />
  9. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.silver.min.css" />
  10. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.mobile.all.min.css" />
  12. <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
  13. <script src="http://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
  14. </head>
  15. <body>
  16. <h3> Kendo ListBox</h3>
  17. <div id="example" role="application">
  18. <div class="demo-section k-content">
  19. <div>
  20. <label for="listBox" id="technology">Technologies</label>
  21. <br />
  22. <select id="listBox" title="Technologie"></select>
  23. </div>
  24. </div>
  26. <script>
  27. $(document).ready(function () {
  28. var dataSource = new kendo.data.DataSource({
  30. transport: {
  31. read: {
  32. url: "http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList",
  33. dataType: "json"
  34. },
  35. }
  37. });
  38. $("#listBox").kendoListBox({
  39. dataSource: dataSource,
  40. dataTextField:"text",
  41. dataValueField:"value",
  42. autoBind:false,
  43. });
  44. dataSource.read(); // "read()" will fire the "change" event of the dataSource and the widget will be bound
  46. });
  47. </script>
  48. <style>
  49. .demo-section label {
  50. margin-bottom: 5px;
  51. font-weight: bold;
  52. display: inline-block;
  53. }
  54. #employees {
  55. width: 270px;
  56. }
  57. #example .demo-section {
  58. max-width: none;
  59. width: 515px;
  60. }
  62. #example .k-listbox {
  63. width: 236px;
  64. height: 310px;
  65. }
  67. #example .k-listbox:first-of-type {
  68. width: 270px;
  69. margin-right: 1px;
  70. }
  71. </style>
  73. </body>
  74. </html>

From the code given above, it is obvious that we have constructed a datasource for the Kendo ListBox using our API, http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList

dataTextField is the field of the data item that provides the text content for the list item.

dataValueField is the field of the dataitem that provides the value of the widget.

Result

Implement the toolbar in Kendo ListBox

The toolbar provides lot of tools to navigate the list item from one ListBox to another.

KendoListBox.html

  1. <!DOCTYPE html>
  2. <hBml>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Kendo List Box</title>
  7. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css" />
  8. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.rtl.min.css" />
  9. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.silver.min.css" />
  10. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.mobile.all.min.css" />
  12. <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
  13. <script src="http://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
  14. </head>
  15. <body>
  16. <h3> Kendo ListBox</h3>
  17. <div id="example" role="application">
  18. <div class="demo-section k-content">
  19. <div>
  20. <label for="listBox" id="technology">Technologies</label>
  21. <label for="targetListBox" id="knownTech" style="margin-left:184px">Known Technology </label>
  22. <br />
  23. <select id="listBox" title="Technologie"></select>
  24. <select id="targetListBox" title="Known Technology "></select>
  25. </div>
  26. </div>
  28. <script>
  29. $(document).ready(function () {
  30. var dataSource = new kendo.data.DataSource({
  32. transport: {
  33. read: {
  34. url: "http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList",
  35. dataType: "json"
  36. },
  37. }
  39. });
  40. $("#listBox").kendoListBox({
  41. dataSource: dataSource,
  42. connectWith: "targetListBox",
  43. dataTextField:"text",
  44. dataValueField:"value",
  45. autoBind:false,
  46. toolbar: {
  47. tools: ["moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom", "remove"]
  48. },
  50. });
  51. dataSource.read(); // "read()" will fire the "change" event of the dataSource and the widget will be bound
  53. $("#targetListBox").kendoListBox();
  54. });
  55. </script>
  56. <style>
  57. .demo-section label {
  58. margin-bottom: 5px;
  59. font-weight: bold;
  60. display: inline-block;
  61. }
  62. #employees {
  63. width: 270px;
  64. }
  65. #example .demo-section {
  66. max-width: none;
  67. width: 515px;
  68. }
  70. #example .k-listbox {
  71. width: 236px;
  72. height: 310px;
  73. }
  75. #example .k-listbox:first-of-type {
  76. width: 270px;
  77. margin-right: 1px;
  78. }
  79. </style>
  81. </body>
  82. </html>

From the above code, you can notice that I have created a new List box called targetListBox which the target List box

Toolbar property is used to get the tools provided for Kendo listBox.

The connectWith property should consist of target list box id information. In my case, it is targetListBox.
Result

Multi Select

We can make the List box as multiselect by making the selectable property as multiple.

KendoListBox.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>Kendo List Box</title>
  7. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css" />
  8. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.rtl.min.css" />
  9. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.silver.min.css" />
  10. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.2.504/styles/kendo.mobile.all.min.css" />
  12. <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
  13. <script src="http://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
  14. </head>
  15. <body>
  16. <h3> Kendo ListBox</h3>
  17. <div id="example" role="application">
  18. <div class="demo-section k-content">
  19. <div>
  20. <label for="listBox" id="technology">Technologies</label>
  21. <label for="targetListBox" id="knownTech" style="margin-left:184px">Known Technology </label>
  22. <br />
  23. <select id="listBox" title="Technologie"></select>
  24. <select id="targetListBox" title="Known Technology "></select>
  25. </div>
  26. </div>
  28. <script>
  29. $(document).ready(function () {
  30. var dataSource = new kendo.data.DataSource({
  32. transport: {
  33. read: {
  34. url: "http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList",
  35. dataType: "json"
  36. },
  37. }
  39. });
  40. $("#listBox").kendoListBox({
  41. dataSource: dataSource,
  42. connectWith: "targetListBox",
  43. dataTextField:"text",
  44. dataValueField:"value",
  45. selectable: "multiple",
  46. autoBind:false,
  47. toolbar: {
  48. tools: ["moveUp", "moveDown", "transferTo", "transferFrom", "transferAllTo", "transferAllFrom", "remove"]
  49. },
  51. });
  52. dataSource.read(); // "read()" will fire the "change" event of the dataSource and the widget will be bound
  54. $("#targetListBox").kendoListBox();
  55. });
  56. </script>
  57. <style>
  58. .demo-section label {
  59. margin-bottom: 5px;
  60. font-weight: bold;
  61. display: inline-block;
  62. }
  63. #employees {
  64. width: 270px;
  65. }
  66. #example .demo-section {
  67. max-width: none;
  68. width: 515px;
  69. }
  71. #example .k-listbox {
  72. width: 236px;
  73. height: 310px;
  74. }
  76. #example .k-listbox:first-of-type {
  77. width: 270px;
  78. margin-right: 1px;
  79. }
  80. </style>
  82. </body>
  83. </html>

I hope, you have enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome.