How to apply horizontal scroll bar to kendoMobileListView ?

7 posts, 0 answers
  1. 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
  2. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 01 Apr 2015 Link to this post

    Hello,

    I am not sure that I understand your requirements completely. At any case, the endless scrolling is not known to work with horizontal scrolling (on the same scroller). Is there any chance for you to show us the UI you are trying to implement? Thank you in advance. 

    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. Nirav
    Nirav avatar
    10 posts
    Member since:
    Mar 2015

    Posted 01 Apr 2015 in reply to Petyo Link to this post

    Hi Petyo,

    Thanks for the reply. Basically i am looking endless scrolling in vertically only its working fine. My problem is i have 7 columns to display so in the device window its not covering for that we require horizontal scroll to view other columns.

    But horizontal scroll is not coming, I can see only 2 columns other columns i am not able to move. 

    Thanks,
    Nirav
  5. Nirav
    Nirav avatar
    10 posts
    Member since:
    Mar 2015

    Posted 02 Apr 2015 Link to this post

    Hi Petyo,

    Thanks for the reply. Some understanding went wrong.  I am able to implement vertical endless scrolling with kendomobile list view.

    My issue is i have 5-6 columns in my list view. So in the list i can only see 2 columns other columns are not able to see. So i am trying to add horizontal scroll bar in list view to see other columns, But horizontal scroll-bar is not displaying. 

    After searching in kendo forum i come to know that, we can implement horizontal scroll bar with "data-stretch=true". but after including data-stretch="true" its stopping endless scrolling for listview in Mobile Devices.

    So how to implement horizontal scroll bar in mobile list view. So user can see all columns with data.

    Thanks,
    Nirav
     
    Thanks,
    Nirav

  6. Petyo
    Admin
    Petyo avatar
    2438 posts

    Posted 06 Apr 2015 Link to this post

    Hi,

    the data-stretch=true setting does something else (in fact, it completely stops the scrolling). In case you have multiple columns in the listview, I may suggest that you use the Grid widget instead - it also features virtual scrolling support.  

    Regards,
    Petyo
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Nirav
    Nirav avatar
    10 posts
    Member since:
    Mar 2015

    Posted 07 Apr 2015 in reply to Petyo Link to this post

    Hi Petyo,

    I tried virtual scrolling with kendo Grid. Client is complaining about scrolling effect is not smooth. So can you please help me how can i solve this issue with kendo grid.

    Thanks,

    Nirav

  8. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2564 posts

    Posted 09 Apr 2015 Link to this post

    Hello Nirav,

    I can see that you have raised the same question in another thread. So I will go ahead and close this ticket and continue our conversation in the other thread.

    Regards,
    Kiril Nikolov
    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