PhoneJS 14.1 with Gridster

by tabalinas

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/knockout/3.1.0/knockout-min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/globalize/0.1.1/globalize.min.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.1.6/css/dx.ios7.default.css">
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/14.1.6/css/dx.common.css">
<script src="http://cdn3.devexpress.com/jslib/14.1.6/js/dx.phonejs.debug.js"></script>
<script src="http://gridster.net/dist/jquery.gridster.js"></script>
<link rel="stylesheet" href="http://gridster.net/dist/jquery.gridster.css">
<link rel="stylesheet" href="http://gridster.net/demos/assets/demo.css">
<div class="gridster">
    <ul></ul>
</div>

JavaScript

DevExpress.devices.current({ platform: "ios", deviceType: "phone" });

gridster = $(".gridster > ul").gridster({
    widget_margins: [5, 5],
    widget_base_dimensions: [100, 55]
}).data('gridster');

var widgets = [
    ["<li><div data-bind=\"dxButton: { text:'Button', clickAction: click }\"></div></li>", 1, 2],
    ['<li>1</li>', 3, 2],
    ['<li>2</li>', 3, 2],
    ['<li>3</li>', 2, 1],
    ['<li>4</li>', 4, 1],
    ['<li>5</li>', 1, 2],
    ['<li>6</li>', 2, 1],
    ['<li>7</li>', 3, 2],
    ['<li>8</li>', 1, 1],
    ['<li>9</li>', 2, 2],
    ['<li>10</li>', 1, 3]
];

$.each(widgets, function(i, widget){
    gridster.add_widget.apply(gridster, widget)
});

var vm = {
    click: function() {
        alert('Hello world!');
    }
};

ko.applyBindings(vm);