如何在Kendo UI ASP.NET Core Grid搜索框旁添加刷新按钮

方案一：动态插入按钮（保留原有搜索配置） #

这种方式不需要修改原有的Search()配置，仅通过JS动态添加按钮并绑定逻辑：

1. 修改Grid事件配置
   在Grid的Events中新增Init事件，用来初始化按钮：

   .Events(events => events.DataBound("onDataBound").Init("onGridInit"))
   

2. 编写初始化按钮的JS函数
   在页面中添加以下代码，实现按钮插入与清空逻辑：

   function onGridInit() {
       const grid = this;
       const searchContainer = grid.element.find(".k-grid-search");
       // 避免重复创建按钮
       if (searchContainer.find(".search-reset-btn").length === 0) {
           // 创建带刷新图标的按钮
           const resetBtn = $('<button class="k-button k-button-icon search-reset-btn" title="清空搜索"><span class="k-icon k-i-refresh"></span></button>');
           searchContainer.append(resetBtn);
           
           // 绑定清空事件
           resetBtn.on("click", function() {
               const searchInput = searchContainer.find("input");
               searchInput.val("");
               // 重置Grid过滤条件并重新加载数据
               grid.dataSource.filter({});
               grid.dataSource.read();
           });
       }
   }
   

3. 可选样式调整
   如果按钮与搜索框排版不对，添加CSS对齐：

   .search-reset-btn {
       margin-left: 8px;
       height: 2.3em; /* 匹配Kendo默认搜索框高度 */
   }
   

方案二：自定义工具栏模板（完全自定义布局） #

如果需要更灵活的布局，可以直接替换原有搜索栏模板，手动实现搜索与清空逻辑：

1. 修改Grid工具栏配置
   替换原有的t.Search()为自定义模板：

   .ToolBar(t =>
   {
       t.Excel();
       t.Pdf();
       // 自定义搜索栏模板
       t.Template(@<text>
           <div class="k-grid-search">
               <input type="text" class="k-input k-input-solid k-input-md k-rounded-md" placeholder="搜索..." />
               <button class="k-button k-button-icon search-reset-btn" title="清空搜索"><span class="k-icon k-i-refresh"></span></button>
           </div>
       </text>);
   })
   

2. 编写搜索与清空的JS逻辑
   手动绑定输入框的搜索事件和按钮的清空事件：

   function onGridInit() {
       const grid = this;
       const searchInput = grid.element.find(".k-grid-search input");
       const resetBtn = grid.element.find(".search-reset-btn");
       
       // 搜索输入框的实时过滤逻辑
       searchInput.on("input", function() {
           const value = $(this).val().trim();
           if (value) {
               // 匹配原有Search配置的字段与规则
               grid.dataSource.filter({
                   logic: "or",
                   filters: [
                       { field: "Field4", operator: "contains", value: value },
                       { field: "Field5", operator: "contains", value: value },
                       { field: "Field1", operator: "contains", value: value },
                       { field: "Field2", operator: "contains", value: value },
                       { field: "Field3", operator: "contains", value: value }
                   ]
               });
           } else {
               grid.dataSource.filter({});
           }
       });
       
       // 清空按钮逻辑
       resetBtn.on("click", function() {
           searchInput.val("");
           grid.dataSource.filter({});
           grid.dataSource.read();
       });
   }
   

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