Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

New Issue With "Back" Button

1 Answer 122 Views
SplitView
This is a migrated thread and some comments may be shown as answers.
Kevin Kembel
Top achievements
Rank 1
Kevin Kembel asked on 09 Dec 2013, 07:04 PM
I know there's a previous thread with a couple "Back" button issues reported, but it's older and not sure it's related to this issue.  So new thread.

If I use a parameter to filter a list, when I go "Back" to that list, the parameter is undefined.  My app has two layouts, the phone layout doesn't have a splitview and the tablet layout does.  This undefined parameter problem only happens on the tablet splitview layout, and the "Back" button behaves fine if it's not in the splitview.

I took the sample products from the demo, and moved all 3 views into the same pane so you can see what I mean.  This standalone page illustrates the issue.  If you pick a category, then pick a product, it will show you the product details.  Hit "Back" and you will get a perpetual "loading..." because the "CategoryID" parameter is undefined when you go "Back".

This example doesn't contain any of my own code, just moved the views to the main pane.
<!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="layout" data-id="side-default" data-show="toggleBackButton">
            <div data-role="header">
                <div data-role="navbar">
                    <span data-role="view-title"></span>
                </div>
            </div>
        </div>
        <div data-role="view" data-title="Empty Pane">
            Empty Pane
        </div>
    </div>
 
    <div data-role="pane" data-layout="main-default" id="main-pane">
        <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#" data-target="main-pane">#: CategoryName #</a>
        </script>
 
        <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="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 type="text/x-kendo-template" id="ordersTemplate">
            <dl>
                <dt>Discount</dt>
                <dd>#: Discount #</dd>
                <dt>Quantity</dt>
                <dd>#: Quantity #</dd>
                <dt>UnitPrice</dt>
                <dd>#: UnitPrice #</dd>
            </dl>
        </script>
 
        <div data-role="view" data-title="Orders" id="orders" data-show="displayOrder">
            <div id="product-details">
            </div>
        </div>
 
        <div data-role="layout" data-id="main-default">
            <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>
                    <a data-role="button" href="#index" data-align="right" data-target="_top">Index</a>
                </div>
            </div>
        </div>
    </div>
</div>
 
<script>
    var categoryID = null;
 
    var splitViewCategories = new kendo.data.DataSource({
        type: "odata",
        transport: {
        }
    });
 
    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-inbox") {
            e.view.element.find("[data-role=backbutton]").css("visibility", "");
        } else {
            e.view.element.find("[data-role=backbutton]").css("visibility", "visible");
        }
    }
</script>
 
<style scoped>
    #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;
    }
</style>
 
 
<script>
    var app = new kendo.mobile.Application(document.body);
</script>
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Accepted
Kiril Nikolov
Telerik team
answered on 10 Dec 2013, 01:22 PM
Hello Kevin,

The problem comes from the fact that the filterProducts() method uses the event argument in order to get the CategoryID that was clicked. When you navigated from Orders to Product views, this event argument is different and does not contain the CategoryID (e.view keeps reference to the Orders view and not the Categories view). 

A simple check if there is a CategoryID in the event argument and if there is not - use the old one, will do the trick. Please check the edited example:

http://jsbin.com/Oxalime/2/edit

Regards,
Kiril Nikolov
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
SplitView
Asked by
Kevin Kembel
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Share this question
or