PhoneJS

HTML

<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/13.2.9/css/dx.ios.default.css">
<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>
<script src="http://cdn3.devexpress.com/jslib/13.2.9/js/dx.phonejs.js"></script>
<link rel="stylesheet" href="http://cdn3.devexpress.com/jslib/13.2.9/css/dx.common.css">
<div class="dx-viewport dx-theme-ios dx-version-major-6 dx-theme-ios-typography">
    <div data-bind="dxButton: { text: 'Refresh', clickAction: reloadData }"></div>
    <span data-bind="visible: loading">Loading ...</span>
    <div data-bind="dxTileView: { listHeight: tileWidgetHeight, itemClickAction: sendProject, baseItemHeight: 200, baseItemWidth: 100, dataSource: quickBooking }">
                <div data-options="dxTemplate : { name:'item' }" class="tile">
                    <h2 data-bind="text: project"></h2>
                    <p data-bind="text: name"></p>
                    <p data-bind="text: costCenter"></p>
                    <p>Jetzt BĂĽchen</p>
                </div>
    </div>
</div>

CSS

.dx-tileview {
    border: 1px solid #ddd;    
}

.dx-tile {
    border-radius: 5px;
    border: 1px solid #ededed;
    padding: 5px;
}

.dx-tile.dx-state-active {
    background: #fcfcfc;
}

JavaScript

// stub service call
var callService = function(method, data, success) {
    var fakeData = [
        { LastNProjects: { Name: 'test project1' }, LastNCostCenters: { Name: 'cost center1' }},
        { LastNProjects: { Name: 'test project2' }, LastNCostCenters: { Name: 'cost center2' }},
        { LastNProjects: { Name: 'test project3' }, LastNCostCenters: { Name: 'cost center3' }},
        { LastNProjects: { Name: 'test project4' }, LastNCostCenters: { Name: 'cost center4' }}
    ];
    
    setTimeout(function() { 
        success(fakeData);
    }, 1500);
};

var quickBookingSource = DevExpress.data.createDataSource({
    load: function (loadOptions) {
        vm.loading(true);
        if (loadOptions.refresh) {
            var deferred = new $.Deferred();
            callService("GetEmployee",
                        {
                            employeeNo: 'id'
                        },
                        function (result) {
                            var mapped = $.map(result, function (data) {
                                return {
                                    name: data.LastNProjects? data.LastNProjects["Name"]:"blah",
                                    project: data.LastNProjects? data.LastNProjects["Address"]:"blah",
                                    costCenter: data.LastNCostCenters? data.LastNCostCenters["Name"]:"blah"
                                }
                            });
                            deferred.resolve(mapped);
                            vm.loading(false);
                        });
            return deferred.promise();
        }
    },
});


var vm = {
    
    loading: ko.observable(false),
    
    reloadData: function() {
        quickBookingSource.load();
    },
    
    tileWidgetHeight: 300,
    
    quickBooking: quickBookingSource,
    
    sendProject: function(args) {
        console.log("send " + args.itemData.name);
    }
};

ko.applyBindings(vm);