在单击事件上将焦点设置到 Kendo UI Grid 列过滤器文本框

Question

我想知道是否有人知道如何将焦点设置到按钮单击事件上的特定列过滤器文本框，但不确定如何做到这一点，有任何想法或方向吗？

(() => {
  $("#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

为什么不直接使用 CSS 选择器获取引用并设置焦点。

(() => {
  $("#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>