Kendo UI

jQuery + Kendo UI + MockJax

by burkeholland

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<script src="https://raw.github.com/appendto/jquery-mockjax/master/jquery.mockjax.js"></script>
<div id="container">
    Current ID: <input data-bind="value: id" /><button data-bind="click: refresh">Go</button>
    <div data-role="listview" data-template="template" data-bind="source: dataSource"></div>
</div>

<script type="text/x-kendo-tmpl" id="template">
    <h1>#= name #</h1>
</script>

CSS

#container {
    width: 90%;
    padding: 20px;
}

JavaScript

// MOCK database responses cause i have no real data here on the interwebs
$.mockjax({
    url: 'customers/1',
    responseText: {
        data: [{
            name: 'Brandon Satrom',
            id: 1}]
    }
});

$.mockjax({
    url: 'customers/2',
    responseText: {
        data: [{
            name: 'Burke Holland',
            id: 2}]
    }
});

$.mockjax({
    url: 'customers/3',
    responseText: {
        data: [{
            name: 'Nancy Davolio',
            id: 3}]
    }
});
// END MOCKING

(function($) {

    // Create the view model        
    viewModel = kendo.observable({

        id: 1,

        // create a data source which is bound to the listview        
        dataSource: new kendo.data.DataSource({
            transport: {
                read: {
                    // set the URL to a function so it will re-evaluate the 
                    // value of id every time the datasource is read from            
                    url: function() {
                        return 'customers/' + viewModel.get("id");
                    }
                }
            },
            schema: {
                data: "data"
            }
        }),

        // refresh the dataSource when the go button is clicked            
        refresh: function() {
            
            this.get("dataSource").read();
        }

    });

    kendo.bind($("#container"), viewModel);

})(jQuery);