JSFiddle - React, Tailwind, and code Playground

by siliconsoul

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.mobile.all.min.css">
 <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" data-layout="main-default" id="main-pane">
        <div data-role="view"...

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",
        pageSize: 5,
        serverFiltering: true,
        transport: {
            read: {
                url: "http://demos.kendoui.com/service/Northwind.svc/Order_Details?$expand=Order"
            }
        }
    });
$("#product-details").kendoGrid({
    dataSource: splitViewOrderDetails,
    columns: ["Quantity","UnitPrice"],
    pageable: true
    
});


    var app = new kendo.mobile.Application(document.body);
    function displayOrder(e) {
        debugger;
        splitViewOrderDetails.filter({
            field: "ProductID",
            operator: "eq",
            value: parseInt(e.view.params.ProductID)
        });       
    }

    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");
        }
    }