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

Keyboard autoclose on combobox scroll

7 Answers 243 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
SwanB
Top achievements
Rank 1
SwanB asked on 21 Jul 2017, 10:48 AM

How to close keyboard on combobox scroll and re-reaise the keyboard on clicking in the combobox again ?

We want to close / Collapse keyboard on scrolling of combo box(to avoid overlap on small device screen), and then if click on text combobox then raise the keyboard ( of android ).

Currently keyboard is overlapping the combobox list so we need to hide the keyboard

7 Answers, 1 is accepted

Sort by
0
Magdalena
Telerik team
answered on 25 Jul 2017, 08:35 AM
Hi,

to achieve the described behavior you can blur the ComboBox input when scroll started. You can achieve if by the following JavaScript:

aspx:
<telerik:RadComboBox runat="server" OnClientDropDownOpened="dropDownOpened" AllowCustomText="true" >

JavaScript:
function dropDownOpened() {
    $(".rcbScroll").scroll(function () {
        $(".rcbInput").blur();
        $(".rcbScroll").off("scroll");
    })
}

You can improve behavior of the solution for cases when there is selected some below item, so the .rcbScroll is scrolled by opening the popup. For the purpose you can add a scroll counter index.


Regards,
Magdalena
Progress Telerik
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
SwanB
Top achievements
Rank 1
answered on 25 Jul 2017, 12:56 PM

Thank you for getting back to me.

We are using a Kendo kombobox for Appbuilder/Cordova(not ASP.NET).

We need to dropdown or close android virtual keyboard on scrolling of combobox values,  and re-rising the virtual keyboard on click of combobox.

Due to the small screen size, the keyboard is currently overlapping the combobox list so we need to hide the keyboard.

Any suggestion illustrated in in jsfiddle / Kendo dojo is welcome.

( PS. Improved behavior of the solution, for cases when there is selected some item below is absolutely interesting, but second in priority )

 

0
Magdalena
Telerik team
answered on 26 Jul 2017, 08:56 AM
Hi,

The previous solution works for RadComboBox widget, so we would like to apologize for the mistake. We are afraid that the described behavior is not supported, but you can add a custom JavaScript logic to achieve the behavior.

We have created this Dojo sample where we added a scroll event when popup is opened. There we blur the combobox input, so touch device keyboard will be hidden. After refocusing the input, the keyboard will be shown again.

Regards,
Magdalena
Progress Telerik
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
SwanB
Top achievements
Rank 1
answered on 29 Jul 2017, 10:12 AM

Hi,

Thank you ,
the Dojo sample is perfectly hiding device keyboard and reraising virtual keyboard on click of combobox.

Now however, when we use that keyboard scroll code then paging-/load data on scroll stops working, (in the scrolling combobox).

(If we remove that keyboard down on scroll code then paging is working properly again. After adding code for keyboard down we get the other data, but scrolling is consistently set only in first page)

How can tht be fixed ?

0
Magdalena
Telerik team
answered on 01 Aug 2017, 08:21 AM
Hello,

The provided workaround works properly only when combobox virtualization is disabled. Actually this is a limitation of the solution as the virtualization functionality works properly only when combobox input is focused.

Regards,
Magdalena
Progress Telerik
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
SwanB
Top achievements
Rank 1
answered on 09 Aug 2017, 12:55 PM

Hi,

If I understand you correctly, does this mean that the control implementation of device keyboard in the Kendo control suite does not not work if the virtualized dataloading functionality of a control is enabled ?

We assumed that the Kendo controls were designed for use on mobile devices(also) so we would be very happy for suggestions or alternatives for how to implement this rather regular behaviour(virtualized dataloading functionality and keyboard control of the device keyboard) on mobile devices.

Best regards,
SwanB

0
Magdalena
Telerik team
answered on 09 Aug 2017, 02:27 PM
Hello SwanB,

Actually keeping the combobox input focused after dropdown scrolling is expected behavior. If the input is focused, the keyboard is shown. Hiding keyboard by scrolling combobox popup is a custom scenario.

Regards,
Magdalena
Progress Telerik
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.
Tags
ComboBox
Asked by
SwanB
Top achievements
Rank 1
Answers by
Magdalena
Telerik team
SwanB
Top achievements
Rank 1
Share this question
or