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

Stretching: data-stretch="true" Query

8 Answers 406 Views
Application
This is a migrated thread and some comments may be shown as answers.
Darren
Top achievements
Rank 1
Darren asked on 14 Feb 2013, 01:19 AM
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">
<div id="gmap3_container"></div>
</div>





8 Answers, 1 is accepted

Sort by
0
Kamen Bundev
Telerik team
answered on 14 Feb 2013, 08:14 AM
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
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: 
  • 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.
So I can destroy these extra elements then reinitialise? How do I find these params.. sorry for sounding like a n00b. :(

Rgds.

Darren
0
Kamen Bundev
Telerik team
answered on 14 Feb 2013, 09:00 AM
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
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
0
Accepted
Kamen Bundev
Telerik team
answered on 15 Feb 2013, 08:33 AM
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
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 :)

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:-
<!-- 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
Petyo
Telerik team
answered on 01 Apr 2015, 02:00 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Application
Asked by
Darren
Top achievements
Rank 1
Answers by
Kamen Bundev
Telerik team
Darren
Top achievements
Rank 1
Nirav
Top achievements
Rank 1
Petyo
Telerik team
Share this question
or