jquerykendo-uikendo-grid

Set focus to Kendo UI Grid column filter textbox on click event


I was wondering if anyone knows how to set focus to a specific columns filter textbox on a button click event, and not sure how to do that, any idea's or direction?

(() => {
  $("#grid").empty();
  $("#grid").kendoGrid({
    height: 400,
    scrollable: true,
    pageable: true,
    selectable: "row",
    filterable: {
      mode: "row"
    },
    columns: [{
        field: "CustomerID",
        title: "CustomerID",
        hidden: true
      },
      {
        field: "FirstName",
        title: "Customer First",
        filterable: {
          cell: {
            showOperators: false,
            operator: "contains"
          }
        }
      },
      {
        field: "LastName",
        title: "Customer Last",
        filterable: {
          cell: {
            showOperators: false,
            operator: "contains"
          }
        }
      }
    ],
    dataSource: {
      data: GetData(),
      pageSize: 14,
      schema: {
        model: {
          fields: {
            CustomerID: {
              type: "number"
            },
            FirstName: {
              type: "string"
            },
            LastName: {
              type: "string"
            }
          }
        }
      },
      sort: [{
          field: "FirstName",
          dir: "asc"
        },
        {
          field: "LastName",
          dir: "asc"
        }
      ]
    },
    change: function(e) {
      // Do something
    }
  });

  function GetData() {
    const ret = [{
        CustomerID: 1,
        FirstName: "Abe",
        LastName: "Farmer"
      },
      {
        CustomerID: 1,
        FirstName: "Ben",
        LastName: "Smith"
      },
      {
        CustomerID: 1,
        FirstName: "Collin",
        LastName: "Banks"
      },
      {
        CustomerID: 1,
        FirstName: "Dale",
        LastName: "Taylor"
      }
    ];

    return ret;
  }
  $("#btn").on("click", (e) => {
    // Don't know how to set focus to Customer First filter
  });

})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.2/default/default-ocean-blue.css">

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.3.1114/js/kendo.all.min.js"></script>
<button id="btn">Set Focus to Customer First filter</button>
<div id="grid"></div>


Solution

  • Why not just get the reference using CSS selectors and set the focus.

    (() => {
      $("#grid").empty();
      $("#grid").kendoGrid({
        height: 400,
        scrollable: true,
        pageable: true,
        selectable: "row",
        filterable: {
          mode: "row"
        },
        columns: [{
            field: "CustomerID",
            title: "CustomerID",
            hidden: true
          },
          {
            field: "FirstName",
            title: "Customer First",
            filterable: {
              cell: {
                showOperators: false,
                operator: "contains"
              }
            }
          },
          {
            field: "LastName",
            title: "Customer Last",
            filterable: {
              cell: {
                showOperators: false,
                operator: "contains"
              }
            }
          }
        ],
        dataSource: {
          data: GetData(),
          pageSize: 14,
          schema: {
            model: {
              fields: {
                CustomerID: {
                  type: "number"
                },
                FirstName: {
                  type: "string"
                },
                LastName: {
                  type: "string"
                }
              }
            }
          },
          sort: [{
              field: "FirstName",
              dir: "asc"
            },
            {
              field: "LastName",
              dir: "asc"
            }
          ]
        },
        change: function(e) {
          // Do something
        }
      });
    
      function GetData() {
        const ret = [{
            CustomerID: 1,
            FirstName: "Abe",
            LastName: "Farmer"
          },
          {
            CustomerID: 1,
            FirstName: "Ben",
            LastName: "Smith"
          },
          {
            CustomerID: 1,
            FirstName: "Collin",
            LastName: "Banks"
          },
          {
            CustomerID: 1,
            FirstName: "Dale",
            LastName: "Taylor"
          }
        ];
    
        return ret;
      }
      $("#btn").on("click", (e) => {
        $('[title="Customer First"]').focus();
      });
    
    })();
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.0.2/default/default-ocean-blue.css">
    
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2023.3.1114/js/kendo.all.min.js"></script>
    <button id="btn">Set Focus to Customer First filter</button>
    <div id="grid"></div>