KendoUI/MVVM/DropDown

by JayData

HTML

<script src="http://cdn.kendostatic.com/2012.3.1315/js/kendo.all.min.js"></script>
<script src="http://include.jaydata.org/datajs-1.0.3.js"></script>
<script src="http://include.jaydata.org/jaydata.js"></script>
<script src="http://include.jaydata.org/jaydatamodules/kendo.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1315/styles/kendo.default.min.css">
<div id="wrapper">
        <div id="NESTForm">

            <select data-role="dropdownlist" data-value-field="UserID" data-text-field="Name"
                data-bind="source: userSource">
            </select>
        </div>
 </div>

CSS

body {
    font-family: Calibri;
}

JavaScript

var userDB;
        $(document).ready(function () {


            $data.Entity.extend("Users",
            {
                UserID: { type: "int", key: true, required: true },
                Name: { type: "string", required: true }

            });


            $data.EntityContext.extend("EXAMPLEDB", {
                Users: { type: $data.EntitySet, elementType: Users }
            });

            
            userDB = new EXAMPLEDB({
                name: "webSql", databaseName: "EXMPLEDB",
                dbCreation: $data.storageProviders.DbCreationType.DropTableIfChange
            });
            
            var viewModel = kendo.observable({
                userSource: userDB.Users.asKendoDataSource() 
            });
            
            // apply the bindings
            kendo.bind(document.body.children, viewModel);
            
            userDB.onReady(function() {
                 userDB.Users.toArray(function(items) {
                    if (items.length === 0) {
                        userDB.Users.addMany([{UserID:1, Name: 'Jane'},{UserID:2, Name: 'John'}]);
                        userDB.saveChanges().then(function(){ 
                            viewModel.userSource.fetch();
                        });
                    }
                });
            })
        });