[Solved] How to apply horizontal scroll bar to kendoMobileListView ?

[Nirav]

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

[Petyo]

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

 

 

[Nirav]

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

[Petyo]

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

 

 

[Nirav]

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

[Kiril Nikolov]

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