splitview

kendoui mobile demo splitview

by jwstott

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<!DOCTYPE html>
<html>
<head>
    <title></title>


</head>
<body>
    <div data-role="splitview">
    <div data-role="pane" data-layout="side-default" data-transition="slide">
        <div data-role="view" data-title="Categories" id="side-root">
            <ul data-role="listview" data-style="inset" data-source="splitViewCategories" data-template="categoriesTemplate">
            </ul>
        </div>

        <script id="categoriesTemplate" type="text/x-kendo-template">
            <a href="\#side-inbox?CategoryID=#: CategoryID#">#: CategoryName #</a>
        </script>

        <div data-role="view" id="side-inbox" data-title="Products" data-show="filterProducts">
            <ul data-role="listview" data-auto-bind="false" data-source="splitViewProducts" data-template="productsTemplate">

            </ul>
        </div>

        <script id="productsTemplate" type="text/x-kendo-template">
            <a href="\#orders?ProductID=#: ProductID #" data-target="main-pane">
                <span class="date">$#: UnitPrice#</span>
                <h3>#: ProductName #</h3>
                <span class="excerpt">#: QuantityPerUnit #</span>
            </a>
        </script>

        <div data-role="layout" data-id="side-default" data-show="toggleBackButton">
            <div data-role="header">
                <div data-role="navbar">
                    <a id="back-button" class="nav-button" data-align="left" data-role="backbutton">Back</a>
                    <span data-role="view-title"></span>
                </div>
            </div>
        </div>
    </div>

    <div data-role="pane"...

CSS

#side-inbox .date {
       float: right;
       color: rgba(200,200,200,.8);
       font-size: .7em;
       font-weight: normal;
    }

    #side-inbox .excerpt {
       clear: both;
       font-size: .7em;
       font-weight: normal;
    }
    
    #side-inbox .km-content h3 {
       margin-left: 0;
    }
    #main-pane .km-content{
        padding: 30px;
    }
    
    #main-pane dl {
        float: left;
        margin: 0;
        padding: 0 0 20px 0;
    }
    
    #main-pane dl:after {
        visibility: hidden;
        display: block;
        font-size: 0;
        content: " ";
        clear: both;
        height: 0;
    }
    
    #main-pane dt, #main-pane dd {
        display: block;
        float: left;
        margin: 0;
        padding: 0;
    }
    
    #main-pane dt {
        clear: left;
        text-align: right;
        padding: 0 10px;
    }

JavaScript

var categoryID = null;

var splitViewCategories = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Categories"
    }
});

var splitViewProducts = new kendo.data.DataSource({
    type: "odata",
    serverFiltering: true,

    transport: {
        read: {
            url: "http://demos.kendoui.com/service/Northwind.svc/Products"
        }
    }
});


var splitViewOrderDetails = new kendo.data.DataSource({
    type: "odata",
    serverFiltering: true,
    transport: {
        read: {
            url: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order"
        }
    },

    change: function() {
        var template = kendo.template($("#ordersTemplate").text());
        $("#product-details").html(kendo.render(template, this.data()));
    }
});

function displayOrder(e) {
    splitViewOrderDetails.filter({
        field: "ProductID",
        operator: "eq",
        value: parseInt(e.view.params.ProductID)
    });

    splitViewOrderDetails.read();
}

function filterProducts(e) {
    splitViewProducts.filter({
        field: "CategoryID",
        operator: "eq",
        value: parseInt(e.view.params.CategoryID)
    });

    splitViewProducts.read();
}

function toggleBackButton(e) {
    if (e.view.id === "#side-root") {
        e.view.element.find("[data-role=backbutton]").css("visibility", "").attr("data-target", "_top");
    } else {
        e.view.element.find("[data-role=backbutton]").css("visibility", "visible").removeAttr("data-target");
    }
}


var app = new kendo.mobile.Application(document.body);