KendoDropdown observable

by Rod Early

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<div class="container">
    <div style="margin: 10px 0 20px 20px">
        <span style="display:inline">Selected data</span>
         <span data-bind="text: data.IsActive">none provided</span>
    </div>
    <select id="theDropdown" data-role="dropdownlist" data-bind="source: lookupData.status, value: data.IsActive" data-text-field="text" data-value-field="value" />
</div>

JavaScript

$(document).ready(function () {
    var viewModel = {};
    viewModel.data = {};
    viewModel.data.IsActive = true;

    viewModel.lookupData = {};
    viewModel.lookupData.status = [{
        value: true,
        text: "Active"
    }, {
        value: false,
        text: "Inactive"
    }];

    kendo.bind($(".container"), kendo.observable(viewModel));
});