Grid MVVM
HTML
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.metro.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id='container'>
<div id='grd' data-role='grid' data-bind='source: dataSource' data-pageable='true'/>
</div>
JavaScript
var people = [];
people.push({
ID: 1,
FirstName: 'fn1',
LastName: 'ln1',
Email: 'ln1',
Extra: 'ex1'
});
people.push({
ID: 2,
FirstName: 'fn2',
LastName: 'ln2',
Email: 'em2',
Extra: 'ex2'
});
var viewModel = new kendo.observable({
dataSource: function() {
return new kendo.data.DataSource({
data: people,
pageSize: 5 ,
schema: {
model: {
id: "ID"
}
}
})
}
});
kendo.bind($('#container'), viewModel);