Kendo UI Base

by ifandelse

HTML

<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="https://rawgithub.com/jashkenas/underscore/master/underscore-min.js"></script>
<script src="https://rawgithub.com/postaljs/postal.js/master/lib/postal.min.js"></script>
<script src="https://rawgithub.com/moment/moment/2.2.1/min/moment.min.js"></script>
<div id="grid" class="wires"></div>

CSS

.wires {
    font-family: "Droid Sans", DroidSansWeb, "Segoe UI", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
    font-size: .75em;
}

JavaScript

var wires = kendo.observable({
    data: []
});

var selected;

postal.addWireTap(function (d, e) {
    var env = _.omit(e, "data");
    env._data = e.data;
    wires.data.push(env);
});

$("#grid").kendoGrid({
    height: 400,
    dataSource: {
        data: wires.data ,
        pageSize: 10 
    },
    filterable: {
        extra: true
    },
    selectable : "row",
    groupable: true,
    sortable: true,
    pageable: {
        refresh: true,
        pageSizes: true
    },
    scrollable: true,
    columns: [{
        field: "channel",
        width: 90,
        title: "Channel"
    }, {
        field: "topic",
        width: 90,
        title: "Topic"
    }, {
        width: 100,
        field: "timeStamp",
        title: "Time Stamp",
        template: "#= moment(timeStamp).format('YYYY-MM-DD HH:mm:ss.SSS') #"
    }]
});

var grid = window.grid = $("#grid").data("kendoGrid");
grid.bind("dataBound", function(e) {
    var uid, sel;
    if(!selected) { return; }
    sel = selected.toArray();
    while(sel.length) {
        uid = sel.shift().getAttribute("data-uid");
        grid.select("tr[data-uid='" + uid + "']");
    }
});
grid.bind("change", function(e) {
    selected = this.select();
});

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

var channels = [ "customer", "ordering", "cart" ];
var topics = [ "item.selected", "order.processed", "navigation.cancelled" ];

function sendFakeMsg() {
    var ch = channels[getRandomInt(0,2)];
    var topic = topics[getRandomInt(0,2)];
    postal.publish({
        channel: ch,
        topic: topic,
        data: "hai"
    });
}

var idx = 0;

function genMsgs() {
    setTimeout(function() {
        sendFakeMsg();
        if(idx <= 300) {
            idx += 1;
            genMsgs();
        } 
    }, getRandomInt(50, 2000));
}

genMsgs();