Keyboard autoclose on combobox scroll

8 posts, 0 answers
  1. SwanB
    SwanB avatar
    49 posts
    Member since:
    Oct 2006

    Posted 21 Jul Link to this post

    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

  2. Magdalena
    Admin
    Magdalena avatar
    463 posts

    Posted 25 Jul Link to this post

    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.
  3. SwanB
    SwanB avatar
    49 posts
    Member since:
    Oct 2006

    Posted 25 Jul in reply to Magdalena Link to this post

    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 )

     

  4. Magdalena
    Admin
    Magdalena avatar
    463 posts

    Posted 26 Jul Link to this post

    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.
  5. SwanB
    SwanB avatar
    49 posts
    Member since:
    Oct 2006

    Posted 29 Jul in reply to Magdalena Link to this post

    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 ?

  6. Magdalena
    Admin
    Magdalena avatar
    463 posts

    Posted 01 Aug Link to this post

    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.
  7. SwanB
    SwanB avatar
    49 posts
    Member since:
    Oct 2006

    Posted 09 Aug in reply to Magdalena Link to this post

    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

  8. Magdalena
    Admin
    Magdalena avatar
    463 posts

    Posted 09 Aug Link to this post

    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.
Back to Top