Keyboard Navigation when Enter = perform search using params

4 posts, 1 answers
  1. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 02 Oct 2014 Link to this post

    I am using a DatePicker in a search form and when the user clicks enter (when in any textbox), I perform the search.  The issue is: I need to allow the user (sighted or not) to use the keyboard to select a date using the DatePicker.  How can I still allow the Enter key when the calendar is open, which will only select the date and also have the Enter key perform the search when the calendar is not open?

    Thanks,
    --Ed
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 02 Oct 2014 Link to this post

    Hi Ed,

    By default, DatePicker widget will not post the form if the popup element (calendar) is opened. After the popup is closed, widget will allow default input behavior on ENTER, which is form post in this case. Here is a simple Dojo demo that demonstrates this default behavior. Let me know if I am missing something.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Ed
    Ed avatar
    168 posts
    Member since:
    Sep 2013

    Posted 04 Oct 2014 in reply to Georgi Krustev Link to this post

    Hi Georgi,
    My date picker is actually not within a "form" element.  I manually added a jQuery event handler for all :text elements on my page on keydown and check for keycode 13, in which case, I trigger a click of the button.

    $('#categorize-search-criteria :text').each(function () {
        $(this).on('keydown', function (e) {
            if (e.keyCode === 13) {
                $('#searchCategories').trigger('click');
                return false;
            }
            return true;
        });
    });

    The problem is that the date picker is clearly a :text element and the button gets "clicked" when I click enter when the datepicker popup is open or closed.  How can I detect when the date picker popup is open so I can ignore the keyCode 13 in that instance?  Is there a way via the kendo api or do I need to roll my own?

    Thanks,
    --Ed
  5. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 06 Oct 2014 Link to this post

    Hello Ed,

    In that case, when a custom JavaScript code is used to perform form submit/search click, then you will need to check manually when the popup is opened or not:
    $('#categorize-search-criteria :text').each(function () {
        var element = $(this);
        var widget = element.data("kendoDatePicker");
     
        element.on('keydown', function (e) {
            if (widget && widget.dateView.popup.visible()) {
                return true;
            }
      
            if (e.keyCode === 13) {
                $('#searchCategories').trigger('click');
                return false;
            }
            return true;
        });
    });
    This is what widget does internally.

    Best regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready