New Issue With "Back" Button

2 posts, 1 answers
  1. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 09 Dec 2013 Link to this post

    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>
  2. Answer
    Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 10 Dec 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top