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>
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>
3 Answers, 1 is accepted
0
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
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!
0
Peter
Top achievements
Rank 1
Rank 1
answered on 17 Apr 2014, 01:53 AM
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.
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.
0
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
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!