This is a migrated thread and some comments may be shown as answers.

SplitView sample project- displayOrder called only once

5 Answers 128 Views
SplitView
This is a migrated thread and some comments may be shown as answers.
Alexander Kotchkin
Top achievements
Rank 1
Alexander Kotchkin asked on 04 Oct 2012, 09:34 PM
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

5 Answers, 1 is accepted

Sort by
0
Kevin Kembel
Top achievements
Rank 1
answered on 08 Oct 2012, 06:20 PM
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.
0
Petyo
Telerik team
answered on 09 Oct 2012, 05:13 AM
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!
0
Petyo
Telerik team
answered on 09 Oct 2012, 06:27 AM
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!
0
Jason
Top achievements
Rank 1
answered on 28 Feb 2013, 06:51 PM
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>
0
Petyo
Telerik team
answered on 05 Mar 2013, 08:42 AM
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!
Tags
SplitView
Asked by
Alexander Kotchkin
Top achievements
Rank 1
Answers by
Kevin Kembel
Top achievements
Rank 1
Petyo
Telerik team
Jason
Top achievements
Rank 1
Share this question
or