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

Keyboard Navigation when Enter = perform search using params

3 Answers 511 Views
Date/Time Pickers
This is a migrated thread and some comments may be shown as answers.
Ed
Top achievements
Rank 1
Ed asked on 02 Oct 2014, 05:48 AM
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

3 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 02 Oct 2014, 12:11 PM
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!
 
0
Ed
Top achievements
Rank 1
answered on 04 Oct 2014, 05:00 PM
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
0
Accepted
Georgi Krustev
Telerik team
answered on 06 Oct 2014, 10:38 AM
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!
 
Tags
Date/Time Pickers
Asked by
Ed
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Ed
Top achievements
Rank 1
Share this question
or