JQuery

Remote Data Binding Of Kendo List Box control

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>  
  6.   
  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" />  
  11.   
  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>  
  25.   
  26.     <script>  
  27.      $(document).ready(function () {  
  28. var dataSource = new kendo.data.DataSource({  
  29.    
  30.     transport: {  
  31.         read: {  
  32.             url: "http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList",  
  33.             dataType: "json" 
  34.         },  
  35.         }  
  36.                      
  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  
  45.   
  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.     }  
  61.  
  62.     #example .k-listbox {  
  63.         width: 236px;  
  64.         height: 310px;  
  65.     }  
  66.  
  67.         #example .k-listbox:first-of-type {  
  68.             width: 270px;  
  69.             margin-right: 1px;  
  70.         }  
  71. </style>  
  72.   
  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>  
  6.   
  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" />  
  11.   
  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>  
  27.   
  28.     <script>  
  29.      $(document).ready(function () {  
  30. var dataSource = new kendo.data.DataSource({  
  31.    
  32.     transport: {  
  33.         read: {  
  34.             url: "http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList",  
  35.             dataType: "json"   
  36.         },  
  37.         }  
  38.                      
  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.                },  
  49.   
  50.  });  
  51. dataSource.read(); // "read()" will fire the "change" event of the dataSource and the widget will be bound  
  52.   
  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.     }  
  69.  
  70.     #example .k-listbox {  
  71.         width: 236px;  
  72.         height: 310px;  
  73.     }  
  74.  
  75.         #example .k-listbox:first-of-type {  
  76.             width: 270px;  
  77.             margin-right: 1px;  
  78.         }  
  79. </style>  
  80.   
  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>  
  6.   
  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" />  
  11.   
  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>  
  27.   
  28.     <script>  
  29.      $(document).ready(function () {  
  30. var dataSource = new kendo.data.DataSource({  
  31.    
  32.     transport: {  
  33.         read: {  
  34.             url: "http://github-ci-staging.azurewebsites.net/api/Technologies/TechnologiesList",  
  35.             dataType: "json"   
  36.         },  
  37.         }  
  38.                      
  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.                },  
  50.   
  51.  });  
  52. dataSource.read(); // "read()" will fire the "change" event of the dataSource and the widget will be bound  
  53.   
  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.     }  
  70.  
  71.     #example .k-listbox {  
  72.         width: 236px;  
  73.         height: 310px;  
  74.     }  
  75.  
  76.         #example .k-listbox:first-of-type {  
  77.             width: 270px;  
  78.             margin-right: 1px;  
  79.         }  
  80. </style>  
  81.   
  82. </body>  
  83. </html>   
 
I hope, you have enjoyed this article. Your valuable feedback, questions or comments about this article are always welcome.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs