Get current view of pane

4 posts, 0 answers
  1. Andrew
    Andrew avatar
    9 posts
    Member since:
    Aug 2013

    Posted 10 Sep 2013 Link to this post

    Hi,

    I am using a splitview with 2 panes, and throughout my mobile app would like to access the name of the view in the pane with ID "right-pane". 

    A simplified structure of my splitview can be seen below:

    <div data-role="splitview">
        <div data-role="pane" id="left-pane" data-layout="side-default" data-transition="slide">
                 
            <div data-role="layout" data-id="side-default" data-show="toggleBackButton">
                <!-- my layout stuff's in here -->       
            </div>
     
            <div data-role="view" id="lp_index" data-title="Smith & Co">
                <!-- view stuff in here -->
            </div>         
     
        </div>
     
        <div data-role="pane" id="right-pane" data-layout="main-default" data-navigate="onNavigate">
            <div data-role="layout" data-id="main-default">
                <!-- layout stuff -->
            </div>
            <div data-role="view" >
                <!-- view stuff here -->
            </div>
        </div>
    </div>
    As you can see, the right-pane has a data-navigate property set to onNavigate, which is hooked up correctly. The contents of that function is as follows:
    <script>
            var app = new kendo.mobile.Application(document.body);
     
            function onNavigate(e) {
                alert($("#right-pane").data("kendoMobilePane").view());
            }
    </script>
    When navigating around I get 2 alert boxes saying: "null" and "[object Object]".

    I've probably been staring at the code too long and need a fresh pair of eyes to point out a silly mistake! 

    Thanks in advance.

  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 11 Sep 2013 Link to this post

    Hi Andrew,

    the pane navigate event is triggered relatively early. In fact, in that moment, the pane view is not yet set. This is the reason why the view object is not available in the event object - only the URL is present there. I would like to suggest that you use the viewShow event instead - you can also obtain a view widget reference, as the API documentation shows

    Regards,
    Petyo
    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
  4. Andrew
    Andrew avatar
    9 posts
    Member since:
    Aug 2013

    Posted 11 Sep 2013 Link to this post

    Hi Petyo,

    Thanks for the timely response. Upon trying data-view-show, I still get the same results with an alert box saying [object, Object].

    My view tag looks like this:

    <div data-role="pane" id="right-pane" data-layout="main-default" data-view-show="onNavigate">
    And the onNavigate function looks like this:

    <script>
            var app = new kendo.mobile.Application(document.body);
     
            function onNavigate(e) {
                alert($("#right-pane").data("kendoMobilePane").view());
            }
        </script>

    Is the code in the function the correct way of accessing the view name? In fact I have just copied the code from the documentation example of view(), and replace console.log with alert - this doesn't seem to work either.

    Thanks,
    Andrew.
  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 13 Sep 2013 Link to this post

    Hi Andrew,

    which one is the view "name" which you refer to? The view method returns the view widget instance - this is why you see [object, Object]. You can log the object using console.log, and inspect the view properties from there. Most probably the view id field is the one you are looking for. 

    Regards,
    Petyo
    Telerik
    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