jube-fork/Jube.App/wwwroot/kendo/examples/splitview/index.html

<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" data-use-native-scrolling="true">
            <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#" data-icon="mostviewed">#: CategoryName #</a>
        </script>

        <div data-role="view" id="side-inbox" data-title="Products" data-show="filterProducts" data-use-native-scrolling="true">
            <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">
                <img src="content/web/foods/#=ProductID#.jpg" alt="#=ProductName# image" class="km-thumbnail"/>
                <h4 class="product-name">#: ProductName #</h4>
                <p>#: QuantityPerUnit #</p>
            </a>
        </script>

        <div data-role="layout" data-id="side-default" data-show="toggleBackButton">
            <div 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>
            </div>
        </div>
    </div>

    <div data-role="pane" data-layout="main-default" id="main-pane">
        <div data-role="view" data-title="Orders" data-use-native-scrolling="true">
            No product selected
        </div>

        <script type="text/x-kendo-template" id="ordersTemplate">
            <tr>
                <td>#: Discount #</td>
                <td>#: Quantity #</td>
                <td>#: UnitPrice #</dt>
            </tr>
        </script>

        <div data-role="view" data-title="Orders" id="orders" data-show="displayOrder" data-use-native-scrolling="true">
            <table class="products">
                <thead>
                 <tr>
                   <th>Discount</th>
                   <th>Quantity</th>
                   <th>Unit Price</th>
                 </tr>
                </thead>
                <tbody id="product-details">
                 
                </tbody>
            </table>
        </div>

        <div data-role="layout" data-id="main-default">
            <div data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                    <a data-align="right" data-role="button" class="nav-button" data-icon="home" href="#/" data-target="_top"></a>
                    <a data-align="right" data-icon="source-code" data-click="goToSourceCode" data-role="button" title="Show this demo source code"></a>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    var categoryID = null;

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

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

        transport: {
            read: {
                url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
            }
        }
    });


    var splitViewOrderDetails = new kendo.data.DataSource({
        type: "odata",
        serverFiltering: true,
        transport: {
            read: {
                url: "https://demos.telerik.com/kendo-ui/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", "hidden");
        } else {
            e.view.element.find("[data-role=backbutton]").css("visibility", "visible");
        }
    }
</script>

<style>
    #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;
    }

    #main-pane .km-content{
    	padding: 30px;
      border-left: 1px solid #d7d8d9;
    }
    .products {
       width: 100%;
       border-collapse: collapse;
    }
    
    .products th,
    .products td {
       text-align: left;
       border-bottom: 1px solid #d7d8d9;
       padding: 1em 0;
    }
    .km-badge {
       top: 3em;
       right: 5em;
    }
    h4.product-name {
       margin: 0;
    }
</style>