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

Question

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>

Answer 1

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>