Getting Text and Value From Selected Item in Kendo ComboBox using JQuery

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,

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>
</head>
<body>
<div class="container" id="example">
<div class="row">
<div class="col-md-4">
<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,
source: dataSource,
visible: isVisible" style="width: 50%" />
<button id="filter" data-bind="click: GetValue" class="k-button">Filter</button>
</div>
</div>
</div>
</body>
</html>

JavaScript with MVVM Model:

$(document).ready(function()
{
var viewModel = kendo.observable(
{
selectedList: '',
isPrimitive: false,
isVisible: true,
isEnabled: true,
GetValue: function(e)
{
var c = $('#ProductList');
alert("ProductId:" + c.data('kendoComboBox').value())
alert("ProductName:" + c.data('kendoComboBox').text())
},
dataSource: [
{
ProductName: "Parent1",
ProductId: 1
},
{
ProductName: "Parent2",
ProductId: 2
}]
})
kendo.bind($("#example"), viewModel);
})

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