KendoUI Ticking Grid

KendoUI grid with dynamicly updating data set with an interval

by Dan Mathisen

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/2013.3.1324/js/kendo.all.min.js"></script>
<div class="container">
    <div class="grid"></div>
</div>

CSS

.container {
    max-width: 500px;
}

JavaScript

var canTick = true;

// Don't allow 'tick' (grid.dataSource.read()) while navigating on touch device
document.addEventListener('touchmove', function (e) {
    canTick = false;
}, false);

document.addEventListener('touchend', function (e) {
    canTick = true;
}, false);


function getRandNum() {
    return Math.floor(Math.random() * 100);
}

var data = [
    { name: "name1", desc: "desc 1", price: getRandNum(), quantity: getRandNum() },
    { name: "name2", desc: "desc 2", price: getRandNum(), quantity: getRandNum() },
    { name: "name3", desc: "desc 3", price: getRandNum(), quantity: getRandNum() },
    { name: "name4", desc: "desc 4", price: getRandNum(), quantity: getRandNum() }
];

var grid = $('.grid').kendoGrid({
    dataSource: data,
    columns: [
        { field: 'name', width: 150 },
        { field: 'desc', width: 150 },
        { field: 'price', width: 150 },
        { field: 'quantity', width:150 }
    ],
    dataBinding: function() {
        var scrollerElement = this.element.find("[data-role=scroller]"),
            scroller = scrollerElement.data("kendoMobileScroller");
        if(scroller) {
            scroller.userEvents.cancel();
        }
    }
}).data("kendoGrid");

setInterval(function() {
    if (canTick) {
        grid.dataSource.read()
    }
}, 2000);