如何调整Kendo Grid筛选弹窗位置并实现全列动态适配？

云上老周

2026-8-3

Kendo Grid 筛选弹窗对齐列的实现方案

要让Kendo Grid的筛选弹窗对齐列而非默认的筛选图标，可通过以下步骤实现：

实现步骤

绑定筛选菜单打开事件
利用Grid的filterMenuOpen事件，在弹窗触发时介入定位逻辑：

$("#grid").kendoGrid({
  // 你的Grid配置项
  filterMenuOpen: function(e) {
    tweakFilterPopupPos(e);
  }
});

编写自定义定位函数
获取当前列的表头位置，直接覆盖弹窗的默认定位：

function tweakFilterPopupPos(e) {
  // 定位当前列的表头
  const colHeader = e.sender.thead.find(`th[data-field="${e.field}"]`);
  const popup = e.container.parent();
  
  // 计算表头的位置与尺寸
  const headerPos = colHeader.offset();
  const headerHeight = colHeader.outerHeight();
  const headerWidth = colHeader.outerWidth();
  
  // 调整弹窗到列下方，对齐列左侧
  popup.css({
    left: `${headerPos.left}px`,
    top: `${headerPos.top + headerHeight}px`,
    width: `${headerWidth}px` // 可选：让弹窗宽度匹配列宽
  });
  
  // 移除Kendo默认的定位类，避免冲突
  popup.removeClass("k-filter-menu-container");
}

适配窗口 resize 场景
当窗口大小变化时，重新调整已打开的弹窗位置：

$(window).on("resize", () => {
  $(".k-filter-menu-container").each(function() {
    const popup = $(this);
    const field = popup.find(".k-filter-menu").data("field");
    const colHeader = $("#grid").find(`th[data-field="${field}"]`);
    const headerPos = colHeader.offset();
    
    popup.css({
      left: `${headerPos.left}px`,
      top: `${headerPos.top + colHeader.outerHeight()}px`
    });
  });
});