Hi,

 We're developing an phonegap app with Kendo and we're facing some issues with mobile listview. I have a simple declarative listview on a view like this:

When I turn endless scrolling on, buttons on the template start to behave weird. Clicking on a button results in a blank row and a row clicked is overlaping the first row. Some buttons seem not to work.

 I've prepared an example here: http://jsbin.com/xixapuwizo/1/edit?html,js,output (it was based on an example from Kendo UI api regarding endless scrolling)

 If I try to click on buttons from second row or below, they overlap the first row (change) or seem not to work (remove).

I've also tried with one of the latest releases (2015.3.1111) and the result is similar.

 We're in the middle of developing an app and this is a blocker for us.

 

 Regards,

Andrzej

Hi,

I am new to Kendo Framework and I am using it for a Mobile application.

I have a javascript function which gets called when one of the <Li> gets clicked, the javascipt function is provided through <ul> data-click attibute. some thing like
<ul data-role="listview" data-style="inset" data-type="group" data-click="listViewClick">
The problem is, when this function listViewClick() gets called with a parameter e (event), I am unable to get the Target ( the <li> that was clicked). I tried to print e.target, e.target.id but no luck.
I need help on how to get the id of the element that was clicked.

TIA,
Manju

Posting here in case this helps anyone else:

I had a case where I needed to bind a simply JSON object to a listView. The issue was that the listView when using grouping sorts on the group field, so if you have:

And chose to do this:
Then the resulting list will be oddly sorted:

0-11, 10-30, 8-20

The trick here is to sort by one field but use another in the headerTemplate:

And then use a function as the headerTemplate to use another field completely:

This allows you to create your own sort by creating a specific "order" field without having to use it as the group title.

I have just updated the project to the most recent MVC UI mobile version (the working version was from february 2015) and the use native scroll does not work anymore.

There is no way to scroll the listview on a windows phone 8.1.

 Any clue you might have changed to prevent the listview to work correctly?

 Thanx

Hello,

 I would like to hide/show a filter input for a mobile list view dynamically (in JS). I have succeeded it using  $("#myMobileListView").getKendoMobileListView()._filter._clearFilter();

and hiding/showing the element with ".km-filter-form" class. Is there any bettter way using public methods?

Thanks,

I'm using angular and ui-router with the extras so that I can use sticky state for maintaining listview scroll position on returning from the detail page in my mobile spa app.

My list is a kendo mobile listview. I'm implementing crud and would like to reflect the changes made in the listview when returning.
I wired up the onReactivate callback available in the ui-router sticky states and inject the service that has the flag to tell it whether crud operations have been done and to reload the list. This all works and I can successfully determine if I need to reload the screen.

So, I try to use the kendo.mobile.ui.ListView refresh method. I use angular.element("#idoflistview").data("kendoMobileListView").refresh(). It does find it and does refresh it, but all of the items are set to have a style="transform: translate3d(0px, 0px, 0px);", so they are all overlapping each other.

I have tracked it down to the fact that it only happens when I have loadMore true on the listview. If I turn this off, then it works fine.
So, in the code example below, if I set k-load-more="false" it works. I tried it with endless-scroll too and both have the same effect. 

Here is the abstract view:

    <div ui-view="activityinquirylist"  ng-show="$state.includes('activityinquiry.list')"></div>
    <div ui-view="activityinquirydetails" ng-show="$state.includes('activityinquiry.details')"></div>
    <div ui-view="activityinquirycrud" ng-show="$state.includes('activityinquiry.crud')"></div>

Here is how I'm declaring my listview:

    <div id="activityListScroller" kendo-mobile-scroller="activityListScroller" k-pull-to-refresh="true" k-pull="vm.pullToRefresh" k-pull-offset="200" class="scroller-header-footer">
        <ul id="activityListView" kendo-mobile-list-view="activityListView" k-data-source="vm.activityInquiryService.activityInqiuryDataSource" k-template="vm.activityTemplate" k-on-click="vm.listClicked(kendoEvent)" k-auto-bind="false" k-load-more="true"></ul>
    </div>

The css for the scroller:
   .scroller-header-footer {
   /*      position: fixed !important; */
       position:absolute;
       top: 55px;
       right: 0;
       bottom: 55px;
       left: 0;
   }
   
Here is the code for the state:

   .state('activityinquiry', {
       //sticky: true,
       abstract: true,
       url: '/activityinquiry',
       templateUrl: 'app/views/cm/activityinquiry.html'
   })
   .state('activityinquiry.list', {
       url: '/activityinquirylist',
       views: {
           'activityinquirylist@activityinquiry': angularAMD.route({
               templateUrl: 'app/views/cm/activityinquirylist.html',
               controller: 'activityinquirylistController',
               controllerUrl: 'controllers/cm/activityinquirylistController',
               controllerAs: "vm"
           })
       },

       sticky: true,
       deepStateRedirect: false,
       onReactivate: function ($rootScope, activityInquiryService) {
           console.log("reactivating");
           if (activityInquiryService.model.reloadList && activityInquiryService.model.reloadList == true) {
               activityInquiryService.model.reloadList = false;
              // $rootScope.$broadcast("reloadList");
               var item = angular.element("#activityListView").data("kendoMobileListView");
               if (item) {
                     item.refresh();
               }
           }
       }
   })

Can the mobile listview scroll in place? without scrolling the view.

 

My specific example has a list view inside of the view footer.

Hi,

I have added a <span> with "button" as the data-role in a list item which is a <a> with href to another view.
When the listview is grouped, the button works.
But when the list is not grouped, the button does not work!

Please suggest what should I do to make it works.

Thanks!

Hi,

All the examples that show off the endless scroll are with serverPaging setted to true. When I try to set it to a local data source, the listview has many UI issues.

I modified an example to demonstrate the issues I am facing. Just by modifying the data-endless-scroll from true to false and the listview loads correctly. No where in the documentation does it mention anything about it having to be a server side paging, it only requries the pageSize attribute on the data source.

http://dojo.telerik.com/eFiMu/4

Thanks

I'm recreating the form here

https://demos.telerik.com/kendo-ui/m/index#mobile-forms/types

 

I want the 'number' field to be prefixed with a '£' symbol. I know I could use numerictextbox but that means it doesn't bring up the numeric keyboard on mobile devices, so I need to stick with an input type=number.

 

I need the field to look like this, sorry for the crude drawing

 

 

 

 ​