Basics of what I am doing (Destroying and recreating)
Destroy: $('#gmap3_container').gmap3('destroy').remove();
Create: $('#tabstrip-home').append('<div id="gmap3_container"></div>');
I basically have a map that I want to destroy when the view leaves and append it back when the view is opened.
The Problem:
Now this below works if data-stretch is off, but with it enabled, there are problems appending the object back into the view once it's been initialised. I am wondering if I can apply data-stretch specifically to the style of the gmap3_container somehow?
My view:
<div data-role="view" id="tabstrip-home" data-title="Map" data-init="startMap" data-stretch="true">
Destroy: $('#gmap3_container').gmap3('destroy').remove();
Create: $('#tabstrip-home').append('<div id="gmap3_container"></div>');
I basically have a map that I want to destroy when the view leaves and append it back when the view is opened.
Now this below works if data-stretch is off, but with it enabled, there are problems appending the object back into the view once it's been initialised. I am wondering if I can apply data-stretch specifically to the style of the gmap3_container somehow?
My view:
<div data-role="view" id="tabstrip-home" data-title="Map" data-init="startMap" data-stretch="true">
<div id="gmap3_container"></div>
</div>8 Answers, 1 is accepted
0
Hello Darren,
The issue you face is that the View is generating some elements when it initializes. Use the View properties content and scrollerContent respectively when you have data stretch enabled or not.
All the best,
Kamen Bundev
the Telerik team
The issue you face is that the View is generating some elements when it initializes. Use the View properties content and scrollerContent respectively when you have data stretch enabled or not.
All the best,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Darren
Top achievements
Rank 1
answered on 14 Feb 2013, 08:56 AM
Hi Karmen
Thankyou for your response. So are you saying I need to view:
Rgds.
Darren
Thankyou for your response. So are you saying I need to view:
- header - the view (or the applied mobile layout) header DOM element;
- footer - the view (or the applied mobile layout) footer DOM element;
- content - the view content DOM element;
- scrollerContent - the view mobile scroller container DOM element. Recommended if the mobile View contents need to be manipulated or replaced.
Rgds.
Darren
0
Hello Darren,
No, don't destroy them - content or scrollerContent contain your map - if data-stretch is true, that'll be content. Just use it for appending the map instead of the View element itself as you did before.
Greetings,
Kamen Bundev
the Telerik team
No, don't destroy them - content or scrollerContent contain your map - if data-stretch is true, that'll be content. Just use it for appending the map instead of the View element itself as you did before.
Greetings,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Darren
Top achievements
Rank 1
answered on 15 Feb 2013, 12:04 AM
Thanks Karmen
So to append to the content of a view called 'tabstrip-home' will this work:
$('#tabstrip-home .content').append('<div id="gmap3_container"></div>');
:)
Darren
So to append to the content of a view called 'tabstrip-home' will this work:
$('#tabstrip-home .content').append('<div id="gmap3_container"></div>');
:)
Darren
0
Accepted
Hello Darren,
No, it should either be:
app.view().content.append('<div id="gmap3_container"></div>');
if you target your current View, or:
$('#tabstrip-home').data("kendoMobileView").content.append('<div id="gmap3_container"></div>');
if you target View with/without stretch or
$('#tabstrip-home > .km-content').append('<div id="gmap3_container"></div>');
if you're sure the View is always stretched.
Kind regards,
Kamen Bundev
the Telerik team
No, it should either be:
app.view().content.append('<div id="gmap3_container"></div>');
if you target your current View, or:
$('#tabstrip-home').data("kendoMobileView").content.append('<div id="gmap3_container"></div>');
if you target View with/without stretch or
$('#tabstrip-home > .km-content').append('<div id="gmap3_container"></div>');
if you're sure the View is always stretched.
Kind regards,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Darren
Top achievements
Rank 1
answered on 15 Feb 2013, 11:01 PM
Excellent. Thank you very much for your patience and assistance Karmen.
The solution above worked a treat :)
The solution above worked a treat :)
0
Nirav
Top achievements
Rank 1
answered on 30 Mar 2015, 05:46 PM
Hi All,
I am trying add horizontal scroll bar inside kendomobileListview (with endless scrolling). But i am not able find any solution.
HTML Code:-
Javascript :-
Javascript code for Bind :-
I am able to workaround horizontal scroll bar with data-stretch="true" but it disables the scrolling. I want to implement mobileListView with Endless Scrolling. Please help me regarding this.
Thanks,
Nirav
I am trying add horizontal scroll bar inside kendomobileListview (with endless scrolling). But i am not able find any solution.
HTML Code:-
<!-- start - for lazy loading-->
<
div
class
=
"mobileListViewWrap deskNone"
>
<
div
id
=
"siteVisitationEndlessScroll"
class
=
"mobileListView k-grid gridBrdr mobInfGrid"
>
<
div
id
=
"siteVisitationEndlessScrollView"
data-role
=
"view"
data-title
=
"Company | Date | Reimbursement | Head Offices "
>
<
div
data-role
=
"header"
class
=
"mobileListViewHeader"
>
<
div
data-role
=
"navbar"
>
<
div
class
=
"wdth200px"
><
a
class
=
"k-link"
href
=
"#"
>Company</
a
></
div
>
<
div
class
=
"wdth100px"
><
a
class
=
"k-link"
href
=
"#"
>Visit Date</
a
></
div
>
<
div
class
=
"wdth160px"
><
a
class
=
"k-link"
href
=
"#"
>Reimbursement</
a
></
div
>
<
div
class
=
"wdth160px"
><
a
class
=
"k-link"
href
=
"#"
>Head/Admin Offices</
a
></
div
>
</
div
>
</
div
>
<
ul
id
=
"siteVisitationViewformobile"
class
=
"mobileListViewList"
></
ul
>
<
div
id
=
"noItemsToDisply"
>No items to display</
div
>
</
div
>
</
div
>
</
div
>
<
script
type
=
"text/x-kendo-tmpl"
id
=
"siteVisitationTemplate"
>
<
div
class
=
"fLeft wdth200px"
>#:CompanyName#</
div
>
<
div
class
=
"fLeft wdth100px"
>#:getDateInCurrentTimezone(VisitDate)#</
div
>
<
div
class
=
"fLeft wdth160px"
></
div
>
<
div
class
=
"fLeft wdth160px"
></
div
>
<
br
><
br
>
</
script
>
<!-- end - for lazy loading-->
Javascript :-
var app = new kendo.mobile.Application($("#siteVisitationEndlessScroll"));
Javascript code for Bind :-
$("#siteVisitationViewformobile").kendoMobileListView
({
dataSource: dataSource,
template: $("#siteVisitationTemplate").html(),
endlessScroll: true
});
I am able to workaround horizontal scroll bar with data-stretch="true" but it disables the scrolling. I want to implement mobileListView with Endless Scrolling. Please help me regarding this.
Thanks,
Nirav
0
Hello Nirav,
your post is not related to the rest of the thread. I just replied in your other forum post regarding the same issue.
Regards,
Petyo
Telerik
your post is not related to the rest of the thread. I just replied in your other forum post regarding the same issue.
Regards,
Petyo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!