点击按钮时将焦点设置到Kendo UI Grid列筛选文本框

要把焦点设置到指定列的筛选文本框，核心是定位到对应列的筛选输入元素，再调用焦点方法。具体实现步骤如下：

• 获取Grid实例：先拿到Kendo Grid的对象，这是操作Grid的基础。
• 定位目标筛选单元格：通过列的field属性找到对应的筛选单元格（比用索引更可靠，避免列顺序变动影响）。
• 找到筛选输入框：在筛选单元格内定位用于输入的文本框元素。
• 设置焦点：调用输入框的focus()方法完成聚焦。

修改后的按钮点击事件代码 #

把按钮点击事件里的注释替换成以下代码：

$("#btn").on("click", (e) => {
  // 获取Grid实例
  const grid = $("#grid").data("kendoGrid");
  // 找到对应field的列索引
  const targetColumnIndex = grid.columns.findIndex(col => col.field === "FirstName");
  // 获取表头的筛选行
  const filterRow = grid.thead.find(".k-filter-row");
  // 获取目标列的筛选单元格
  const filterCell = filterRow.find(`th:eq(${targetColumnIndex})`);
  // 找到单元格内的输入框并设置焦点
  const filterInput = filterCell.find(".k-input");
  if (filterInput.length) {
    filterInput.focus();
  }
});

完整代码示例 #

JavaScript部分

(() => {
  $("#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) => {
    // 获取Grid实例
    const grid = $("#grid").data("kendoGrid");
    // 找到对应field的列索引
    const targetColumnIndex = grid.columns.findIndex(col => col.field === "FirstName");
    // 获取表头的筛选行
    const filterRow = grid.thead.find(".k-filter-row");
    // 获取目标列的筛选单元格
    const filterCell = filterRow.find(`th:eq(${targetColumnIndex})`);
    // 找到单元格内的输入框并设置焦点
    const filterInput = filterCell.find(".k-input");
    if (filterInput.length) {
      filterInput.focus();
    }
  });

})();

HTML部分

<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>

补充说明 #

• 用field查找列索引，即使后续调整列的显示顺序，代码依然能正确定位目标列。
• 检查filterInput.length是为了避免元素不存在时调用focus()报错，比如列被隐藏的情况。

内容的提问来源于stack exchange，提问作者Chris