Kendo UI Mobile base

by marhaba

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="v1" data-role="view" data-layout="mobile-view" data-model="viewModel" data-title="Groups" data-transition="slide">
    <header data-role="header">
        <!--replaced navbar to not have a back button-->
        <div data-role="navbar" style="height: 44px;">
            <a id="refreshButton" class="nav-button" data-align="right" data-bind="click:refreshRoutes" data-role="button">Refresh</a>
            <span data-role="view-title"></span>
        </div>
    </header>
    <ul id="lv1" data-bind="source:groupSource, click: selectGroup" data-role="listview" data-auto-bind="false" data-style="inset" data-template="t1"></ul>
</div>
<script id="t1" type="text/x-kendo-template">
    <a>${Name}</a>
</script>

<div data-role="view" id="v2" data-layout="mobile-view" data-model="viewModel" data-title="People" data-transition="slide">
    <label id="t">Title</label><label id="n">Name</label>
    <ul id="lv2" data-bind="source:peopleSource" data-role="listview" data-style="inset" data-template="t2"></ul>
</div>
<script id="t2" type="text/x-kendo-template">
    <label style="float:left">${Person.Job.Title}</label>
    <label style="float:right">${Person.PersonalInfo.Name}</label>
</script>

<!--default mobile settings-->
<div data-role="layout" data-id="mobile-view">
    <header data-role="header">
        <div data-role="navbar">
            <a class="nav-button" data-align="left" data-role="backbutton">Back</a>
            <span data-role="view-title"></span>
        </div>
    </header>
</div>

CSS

#t {
    float:left;
    margin-top:35px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#n {
    float:right;
    margin-top:35px;
    -webkit-transform: rotate(-270deg);
    -moz-transform: rotate(-270deg);
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}

JavaScript

var app;

$(document).ready(function() {
    //Start the mobile application
    app = new kendo.mobile.Application($(document.body), {});
});

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/echo/json/",
            dataType: "json",
            type: "POST",
            data: {
                json: JSON.stringify([{
                    "Name": "Pirates",
                    "People": [{
                        "Person": {
                            "PersonalInfo": {
                                "Name": "Jack Sparrow",
                            },
                            "Job": {
                                "Title": "Captain",
                            }
                        }},
                    {
                        "Person": {
                            "PersonalInfo": {
                                "Name": "Jack the Monkey",
                            },
                            "Job": {
                                "Title": "Immortal Monkey",
                            }
                        }}]},
                {
                    "Name": "Citizens",
                    "People": [{
                        "Person": {
                            "PersonalInfo": {
                                "Name": "William Turner",
                            },
                            "Job": {
                                "Title": "Blacksmith",
                            }
                        }},
                    {
                        "Person": {
                            "PersonalInfo": {
                                "Name": "Elizabeth Swann",
                            },
                            "Job": {
                                "Title": "Lady",
                            }
                        }}]}])
            }
        }
    }
});

var viewModel = kendo.observable({
    groupSource: dataSource,
    selectGroup: function(e) {
      ...