SplitView sample project- displayOrder called only once

6 posts, 0 answers
  1. Alexander Kotchkin
    Alexander Kotchkin avatar
    23 posts
    Member since:
    Sep 2009

    Posted 04 Oct 2012 Link to this post

    I modified the displayOrder function to display orders of currently selected product and it seems like it's called only once for the first selected product. To display orders of a different product I have to refresh the page and start all over again.

    function displayOrder(e) {
            alert(e.view.params.ProductID);


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


            splitViewOrderDetails.read();
        }

    Thanks,
    Alex
  2. Kevin Kembel
    Kevin Kembel avatar
    48 posts
    Member since:
    Mar 2009

    Posted 08 Oct 2012 Link to this post

    http://demos.kendoui.com/mobile/splitview/index.html
    I'm having the same problem in my implementation, and the same problem in the SplitView demo.  The sidebar makes a call to display the "Orders" view, which triggers the "Show" event handler displayOrder(...).

    In the demo, and my implementation, "#orders?ProductID=X" only triggers the "Show" event once.  After that, displayOrder(...) does nothing to change the main-pane.

    I'm assuming that since the demo itself isn't working, that it's a bug and not an implementation problem?

    EDIT: I tried changing my approach, and used the "Pane" object's "Navigate" event, this does get fired every time a product is selected.  The "Navigate" event doesn't appear to pass in the current view object, so the parameters aren't easily accessible.  It does give e.url as a parameter, so I used regex to parse out the "ProductID", and render the main pane.  This works, but is limiting because it changes the scope of the event to the parent pane instead of the view.
  3. Kendo UI is VS 2017 Ready
  4. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 09 Oct 2012 Link to this post

    Hi guys,

    It looks like this is a bug we introduced with the service pack - we will do our best to resolve it in the next internal build. I will post updates in this forum thread once it is ready. 

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 09 Oct 2012 Link to this post

    Hi,

    Can you please try the latest internal build available for download? The problem should be resolved there (the demo itself works fine). 

    I am sorry for the inconvenience caused.

    All the best,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Jason
    Jason avatar
    20 posts
    Member since:
    Nov 2011

    Posted 28 Feb 2013 Link to this post

    I've tried to work around this by using the OnClick event. This works, in that, it calls the method to populate the right pane each time a list item in the left pane is clicked. However, when there are many list items in the left pane and it needs to scroll, there is a bug. It scrolls fine at first, but once clicking on a list item, it will no longer scroll. Any idea of a way to keep the list scrollabe?

    Thanks,
    Jason
     
    <!DOCTYPE html>
    <html>
    <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8">   
          <link rel="stylesheet" type="text/css" href="http://cdn.kendostatic.com/2013.1.226/styles/kendo.mobile.all.min.css">
    </head>
    <body>
      <div data-role="splitview" id="tabletMain">
        <div data-role="pane" id="leftSide" data-layout="leftLayout">
            <div data-role="view" id="tabletForms">
                <div id="tabletMainListScroller" data-role="scroller">
                    <ul id="tabletMainList"></ul>
                </div>
            </div>
                 
            <div data-role="layout" data-id="leftLayout">
                <div data-role="header">
                    <div data-role="navbar">
                        <span id="tabletMainTitle">App Title</span>
                    </div>
                </div>
            </div>
        </div>
        <div data-role="pane" id="rightSide" data-layout="rightLayout">
            <div data-role="view" id="tabletDetail">
                <div data-role="scroller">
                    <ul id="tabletDetailList" data-role="listview" data-style="inset"></ul>
                </div>
            </div>
                 
            <div data-role="layout" data-id="rightLayout">
                <div data-role="header">
                    <div data-role="navbar">
                        <span id="tabletDetailTitle"> </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
    <script type='text/javascript' src="http://cdn.kendostatic.com/2013.1.226/js/kendo.all.min.js"></script>
    <script type='text/javascript'>
     
    var forms = [
            {
                "FormID": 1,
                "FormName": "AAA"
            },
            {
                "FormID": 2,
                "FormName": "BBB"
            },
            {
                "FormID": 3,
                "FormName": "CCC"
            },
            {
                "FormID": 4,
                "FormName": "DDD"
            },
            {
                "FormID": 5,
                "FormName": "EEE"
            },
            {
                "FormID": 6,
                "FormName": "FFF"
            },
            {
                "FormID": 7,
                "FormName": "GGG"
            },
            {
                "FormID": 8,
                "FormName": "HHH"
            },
            {
                "FormID": 9,
                "FormName": "III"
            },
            {
                "FormID": 10,
                "FormName": "JJJ"
            },
            {
                "FormID": 11,
                "FormName": "KKK"
            },
            {
                "FormID": 12,
                "FormName": "LLL"
            },
            {
                "FormID": 13,
                "FormName": "MMM"
            },
            {
                "FormID": 14,
                "FormName": "NNN"
            },
            {
                "FormID": 15,
                "FormName": "OOO"
            },
            {
                "FormID": 16,
                "FormName": "PPP"
            },
            {
                "FormID": 17,
                "FormName": "QQQ"
            },
            {
                "FormID": 18,
                "FormName": "RRR"
            },
            {
                "FormID": 19,
                "FormName": "SSS"
            },
            {
                "FormID": 20,
                "FormName": "TTT"
            },
            {
                "FormID": 21,
                "FormName": "UUU"
            },
            {
                "FormID": 22,
                "FormName": "VVV"
            },
            {
                "FormID": 23,
                "FormName": "WWW"
            },
            {
                "FormID": 24,
                "FormName": "XXX"
            },
            {
                "FormID": 25,
                "FormName": "YYY"
            },
            {
                "FormID": 26,
                "FormName": "ZZZ"
            }
        ];
     
    $(function () {
        var app = new kendo.mobile.Application($(document.body));
     
        $("#tabletMainList").kendoMobileListView({
                template: '<a href="javascript:void(0)" onclick="showDetailView(#:data.FormID#)">#:data.FormName#</a>',
                dataSource: forms
            });
    });
     
    function showDetailView(id) {
        var item = null;
        for (var i=0; i < forms.length; i++) {
            if (forms[i].FormID == id) {
                item = forms[i];
                break;
            }
        }
        if (item != null) {
            $("#tabletDetailTitle").html(item.FormName);
            $("#tabletDetailList").html('<li>'+item.FormName+' - '+item.FormID+'</li>');
        }
    }
     
    </script>
    </body>
    </html>
  7. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 05 Mar 2013 Link to this post

    Hello Jason,

    The href="javascript:void(0)" breaks the mobile application - it tries to navigate to a view with such id. You can see the error in the browser console. Removing the href attribute resolves the problem.

    On a side note, the Kendo UI Q1 2013 beta is tested and ships with jQuery 1.8.2. 

    Greetings,
    Petyo
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready