Can I use Drawer with only a PanelBar to drive it (no draws)

4 posts, 0 answers
  1. Peter
    Peter avatar
    44 posts
    Member since:
    Jan 2014

    Posted 14 Apr 2014 Link to this post

    I'm just wondering with I'm on the right track with using the mobile Drawer.

    I don't need what all the examples use - individual "draw" items in a "listview".
    I have a PanelBar - already working from the non-mobile part of the site.

    This is what I want:
    I want the PanelBar to show.
    Then, when an item in the PanelBar is clicked, to navigate to a full-page view of the URL that the PanelBar's datasource has for that item.
    Then be able to slide back to the PanelBar - to repeat this process.

    In the non-mobile site, I have a Splitter with the PanelBar on the left and URL showing area, on the right.
    And I set the iframe src in the right-panel to the URL of the clicked PanelBar's datasource. And it works fine.

    I was hoping (see below) I could do a similar thing, and somehow tell the "Drawer" to navigate to the iframe (or div) I've just filled with the clicked PanelBar item's URL.
    Is this feasible within the way Drawer works, or is this so far from the way it's meant to work that I'd be better of hacking a "Draw" of my own?

    <body>
    <div id="app-drawer" data-role="view" data-layout="drawer-layout" data-title="@Model.name">
    <div id="header" data-role="header">
    <div id="app-icon"><img src="@Model.image" width="32" height="32" /></div>
    <div id="header-text">@Model.name</div>
    </div>
    <div id="app-user-panel">

    </div>
    <div id="view-container" data-role="view">
    <iframe id="view-frame"></iframe>
    </div>
    </div>

    <script>
    $(document).ready(function() {
    var model = @Html.Raw(Model.ToJson());
    var panel = new MyWorkingAppPanel('app-user-panel');
    panel.init(model);

    I toyed with this concept but couldn't work out what was required to get it working
    // var drawer = $("#app-drawer").kendoMobileDrawer({
    // container: "#view-container"
    // });
    //
    // $("#app-drawer").data("kendoMobileDrawer").show();
    // $(".k-link").click(function() {
    // $("#app-user-panel").hide();
    // $("#view-container").show();
    // });

    var app = new kendo.mobile.Application(document.body, {
    skin: "flat",
    hideAddressBar: true,
    });
    </script>
    </body>
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 16 Apr 2014 Link to this post

    Hi Peter,

    you don't need an iFrame for that purpose - the panelbar items should call the mobile application navigate method when clicked. The drawer hides automatically when the mobile application navigates to a new view.

    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. Peter
    Peter avatar
    44 posts
    Member since:
    Jan 2014

    Posted 16 Apr 2014 in reply to Petyo Link to this post

    Thanks for that.
    I realize my main problem above was with layout, actually. I hadn't properly defined the Drawer.
    I still needed to use an iFrame because the page I'm loading requires it.
    But thanks for that advice calling navigate, it's still useful.
  5. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 18 Apr 2014 Link to this post

    Hello Peter,

    while an iframe may be a convenient way to display content, you should keep in mind that it has a lot of limitations and downright weird behaviors and restrictions in iOS. For instance, the ifame will always stretch to display all of its contents, ignoring the size setting. The iframe itself cannot be scrolled, too. 

    My advice would be to experiment a bit with that approach while testing on an iOS device. the behavior I describe is not related to or caused by Kendo UI Mobile - you should be able to reproduce it in a very simple scenario (a simple document with an iframe would do). 

    You can find more info about the issues I refer to in the following stackoverflow thread.

    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