Stretching: data-stretch="true" Query

9 posts, 1 answers
  1. Darren
    Darren avatar
    9 posts
    Member since:
    Feb 2013

    Posted 13 Feb 2013 Link to this post

    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>





  2. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 14 Feb 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Darren
    Darren avatar
    9 posts
    Member since:
    Feb 2013

    Posted 14 Feb 2013 Link to this post

    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
  5. Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 14 Feb 2013 Link to this post

    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!
  6. Darren
    Darren avatar
    9 posts
    Member since:
    Feb 2013

    Posted 14 Feb 2013 Link to this post

    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
  7. Answer
    Kamen Bundev
    Admin
    Kamen Bundev avatar
    1532 posts

    Posted 15 Feb 2013 Link to this post

    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!
  8. Darren
    Darren avatar
    9 posts
    Member since:
    Feb 2013

    Posted 15 Feb 2013 Link to this post

    Excellent. Thank you very much for your patience and assistance Karmen.
    The solution above worked a treat :)

  9. Nirav
    Nirav avatar
    10 posts
    Member since:
    Mar 2015

    Posted 30 Mar 2015 Link to this post

    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
  10. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 01 Apr 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready