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

scrolling problem with kendoDropDownList on iOS app

5 Answers 407 Views
DropDownList
This is a migrated thread and some comments may be shown as answers.
Gary
Top achievements
Rank 1
Gary asked on 23 Jan 2017, 03:03 AM

Hi,

I'm having trouble troubleshooting an issue specific to iOS platforms (app, not mobile web) regarding dropdownlists. It scrolls perfectly fine on Android and Windows devices along with any device in the simulator. However, on iOS devices (iPhone 6s and iPad tested), the scrolling doesn't work. At times, constantly moving my finger up and down on the list will shift it slightly (as in, less than 1/2 a row's distance), but never consistently nor reliably responsive in matching my finger's movement as it would on android devices.

I have made sure that kendo.mobile.scroller.min.js and kendo.touch.min.js are included (defined in kendo.all.min.js). I have also tried finding if there are scrollers inside the DropDownList ( $("#leaveType").data("kendoDropDownList").list.data("kendoMobileScroller") returns "undefined" ) interfering with the functionality and came up with nothing.

Screenshot that shows how the area is rendered, is attached. Clicking on the top blue select button shows the dropdownlist.

Below is the relevant code, which itself is inside a kendo view navigated to via a dashboard.

$("#leaveType").kendoDropDownList({
                    dataSource: pageModel.get('leaveTypeDS'),
                    dataTextField: "Description",
                    dataValueField: "Leave_Code",
                    optionLabel: "--Select--",
                    optionLabelTemplate: '<span class="leaveType-option" onclick="debugger;">--Select--</span>',
                    valueTemplate: '<span class="leaveType-value">#:data.Description#</span>',
                    template: '<span class="applyLeave-dropdownList">#:data.Description#</span>',
                    valuePrimitive: true
                });

applied to the following:

<input id="leaveType" data-bind="value: mainInfo.leaveType"  />

 

Any help and/or insight is greatly appreciated. Thanks!

5 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 25 Jan 2017, 08:05 AM
Hello Gary,

I made an example based on the provided code and the DropDown was scrolled as expected on iOS devices.

Please check if the custom templates are not interfering with the scroll behavior.

If the issue still occurs after the templates are removed, please provide the following:

1) Fully runnable example reproducing the issue.
2) The models and the iOS version of the devices used for testing.

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Gary
Top achievements
Rank 1
answered on 27 Jan 2017, 08:35 AM

H Stefan,

I tried removing the templates as you suggested and the scroll still isn't working. Overflow:scroll in general doesn't appear to be working. I had an area where I applied a CSS "overflow-y: scroll" and again it worked on our test android phone, but not on the iOS devices. I also double checked the iOS cordova preferences (config.xml) and made sure overscroll scrolling wasn't disabled.

Regarding the runnable example, it would be hard to provide because of the server-side calls made to set the datamodel and its connection to data sources. If it helps, I tested with a locally created datasource based on http://demos.telerik.com/kendo-ui/dropdownlist/index just to make sure it wasn't a problem rooted in the datasource. That DropDownList wasn't scrollable either on iOS devices. The code is below.

var listTestData = [
                        { text: "Black", value: "1" },
                        { text: "Orange", value: "2" },
                        { text: "Grey", value: "3" },
                        { text: "Blue", value: "4" },
                        { text: "Magenta", value: "5" },
                        { text: "Green", value: "6" },
                        { text: "Yellow", value: "7" },
                        { text: "Cyan", value: "8" },
                        { text: "Purple", value: "9" },
                        { text: "Red", value: "10" },
                        { text: "Teal", value: "11" },
                        { text: "Aqua", value: "12" }
                    ];
                $('#leaveType').kendoDropDownList({
                    dataSource: listTestData,
                    dataTextField: "text",
                    dataValueField: "value",
                    index: 0,
                    animation: false,
                    valuePrimitive: true
                });

 

I'm also including the code for the containing view, in case that's relevant. The code is below.

<div data-role="view" id="ApplyLvView" data-layout="drawer-layout" data-zoom="false"
         data-title="Leave" data-reload="true"
         data-use-native-scrolling="false" data-scroller='{"elastic": false}'
         style="height: 100% !important; overflow: scroll !important; overflow-x: hidden !important;"
         data-transition="none">

As a workaround, I ended up replacing the DropDownList with a mobile ListView contained within a div with data-role="scroller", to which I then I wrapped in a div where I applied a slideIn fx to simulate the same functionality as the DropDownList. I had to apply similar scroller wrapping around all objects relying on "overflow:scroll" CSS as well. That seems to work so far.

Here is the requested device info:

iPhone 6s:

  • Model: MKR42LL/A
  • Version: 10.2 (14C92)

iPad Air 2:

  • Model: MH182ZP/A
  • Version: 10.0.2 (14A456)
0
Stefan
Telerik team
answered on 31 Jan 2017, 08:28 AM
Hello Gary,

I'm glad to hear that you manage to find a workaround in this scenario.

As the issue seems to be related to the iOS scrolling over which the Kendo UI team has no control.

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Aren
Top achievements
Rank 1
answered on 21 Nov 2018, 02:39 PM

Hello Stefan,

We're dealing with this issue as we speak.  As this behavior does not impact any of the other dropdown components we've tested, I have to believe that it is a flaw with the Kendo dropdown.  It, nor any of the components that incorporate it (grid, multiselect, etc) work on the iOS platform.

Is there a fix coming, or should we be pushing for a refund?

Thanks,

-Demarcus

0
Ivan Danchev
Telerik team
answered on 23 Nov 2018, 12:27 PM
Hello Demarcus,

Here's a dojo example I tested the DropDownList scrolling in. It works identically on Android and iOS. Could you please modify it accordingly so that it demonstrates the issue you are experiencing and link it back for further review?

Regards,
Ivan Danchev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
DropDownList
Asked by
Gary
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Gary
Top achievements
Rank 1
Aren
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or