Tab Navigation for Filter Menu Date Pickers

Environment

Product

Progress® Kendo UI® DatePicker for jQuery

Progress® Kendo UI® Grid for jQuery

Description

This sample demonstrates how to achieve keyboard navigation with Tab press for Date Picker widgets located inside the Filter Menu of the Grid.

Solution

    <div id="example">
      <div id="grid"></div>
      <script>
        $(document).ready(function() {
          $("#grid").kendoGrid({
            dataSource: {
              type: "odata",
              transport: {
                read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
              },
              schema: {
                model: {
                  fields: {
                    OrderID: { type: "number" },
                    Freight: { type: "number" },
                    ShipName: { type: "string" },
                    OrderDate: { type: "date" },
                    ShipCity: { type: "string" }
                  }
                }
              },
              pageSize: 20,
              serverPaging: true,
              serverFiltering: true,
            },
            height: 550,
            filterMenuInit: gridFilterInit,
            filterable: true,
            pageable: true,
            columns:
            [{
              field: "OrderID",
              width: 225,
              filterable: {
                cell: {
                  showOperators: false
                }
              }
            },{
              field: "OrderDate",
              width: 255,
              title: "Order Date",
              format: "{0:MM/dd/yyyy}"
            },
             {
               field: "ShipName",
               width: 500,
               title: "Ship Name",
               filterable: {
                 cell: {
                   operator: "contains",
                   suggestionOperator: "contains"
                 }
               }
             },{
               field: "Freight",
               width: 255,
               filterable: {
                 cell: {
                   operator: "gte"
                 }
               }
             }]
          });
        });

        function gridFilterInit(e){
          $(e.container).find("input[data-role='datepicker']").each(function(i,e){
            var pickerEl = $(this);
            pickerEl.attr("tabindex",(i+1)*2);
            pickerEl.next("span[role='button']").attr("tabindex",(i+1)*2+1).on("keypress",function(e){
              if(e.key == "Enter"){
                pickerEl.data().kendoDatePicker.open();
              }
            });
          });
        }
      </script>
    </div>