Bind ListViews

by grippstick

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.metro.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div id='container'>
    <ul data-bind="source: itemsDS" data-template="_template"></ul>
    <div id='pager' class="k-pager-wrap">
            </div>
    <br/>
    <button class='k-button' data-bind='click:printData'>display data</button>            
</div>
<script id="_template" type="text/x-kendo-template">
    <li>
        Name:<br/><input data-bind='value:Name'/><input type='radio' name='${data.ID}' value='1'  data-bind='checked:CorrectAnswer'/><br/><br/>
        Extra Data:<br/><input data-bind='value:ExtraData'/><input type='radio' name='${data.ID}' value='2'  data-bind='checked:CorrectAnswer'/>
    </li>
</script>

JavaScript

var viewModel = new kendo.observable({
    itemsDS: [{
            ID: 1,
            Name: 'Item 1',
            ExtraData: 'Extra Stufff 1',
            CorrectAnswer: 1},
        {
            ID: 2,
            Name: 'Item 2',
            ExtraData: 'Extra Stufff 2',
            CorrectAnswer: 2}
    ],
    printData: function() {
        console.log('printing data');
        console.log(viewModel.itemsDS.toJSON());
    }
});

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

$('#pager').kendoPager({
    dataSource: new kendo.data.DataSource({data:viewModel.itemsDS,pageSize:1}),
    autoBind: true,
    previousNext: false,
    info: false
}).data('kendoPager');