Kendo combobox is one of the widget in Kendo UI , Let we start with implementing the Kendo Combobox just by two step:

Create one HTML page and write the following code in it,
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5. <meta charset="utf-8">
  6. <title>Untitled</title>
  7. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
  8. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
  9. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
  10. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
  11. <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  12. <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
  13. <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
  14. <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
  15. </head>
  17. <body>
  18. <div class="container" id="example">
  19. <div class="row">
  20. <div class="col-md-4">
  21. <input id="ProductList" data-role="combobox" data-placeholder="Type a Product Name" data-text-field="ProductName" data-auto-bind="true" data-value-field="ProductId" data-bind="value: selectedList,
  22. source: dataSource,
  23. visible: isVisible" style="width: 50%" />
  24. <button id="filter" data-bind="click: GetValue" class="k-button">Filter</button>
  25. </div>
  26. </div>
  27. </div>
  28. </body>
  30. </html>
JavaScript with MVVM Model:
  1. $(document).ready(function()
  2. {
  3. var viewModel = kendo.observable(
  4. {
  5. selectedList: '',
  6. isPrimitive: false,
  7. isVisible: true,
  8. isEnabled: true,
  9. GetValue: function(e)
  10. {
  11. var c = $('#ProductList');
  12. alert("ProductId:" + c.data('kendoComboBox').value())
  13. alert("ProductName:" + c.data('kendoComboBox').text())
  14. },
  15. dataSource: [
  16. {
  17. ProductName: "Parent1",
  18. ProductId: 1
  19. },
  20. {
  21. ProductName: "Parent2",
  22. ProductId: 2
  23. }]
  24. })
  25. kendo.bind($("#example"), viewModel);
  26. })
From the Getvalue function in above script we are going to fetch the Selected item value and text from kendo combo box.
Result in Browser:

Figure 1

Figure 2

Figure 3