重新加载/刷新Kendo Grid：需重建含新列表格而非仅刷新数据

我之前也碰到过一模一样的场景——调整列可见性后需要完全重建Grid，而不是只刷新数据。read()和refresh()之所以没用，是因为它们只负责数据更新/重渲染，不会触碰Grid的列结构配置。要实现你的需求，核心思路是：销毁现有Grid实例，再用新的列配置重新初始化。

具体实现步骤 #

1. 收集用户的列选择：获取复选框的选中状态，传给服务器获取对应的新列配置
2. 销毁现有Grid实例：彻底清除旧的Grid组件，避免残留DOM或配置冲突
3. 重新初始化Grid：使用服务器返回的新列配置，创建全新的Grid实例

代码示例 #

HTML部分

<!-- 列选择复选框组 -->
<label><input type="checkbox" name="columns" value="id" checked> ID</label>
<label><input type="checkbox" name="columns" value="productName" checked> 产品名称</label>
<label><input type="checkbox" name="columns" value="price"> 价格</label>
<label><input type="checkbox" name="columns" value="stock"> 库存</label>

<!-- 触发重建的按钮 -->
<button id="rebuildGridBtn">更新表格列</button>

<!-- Grid容器 -->
<div id="productGrid"></div>

JavaScript部分

// 封装Grid初始化函数，接收动态列配置
function initKendoGrid(columnConfig) {
    $("#productGrid").kendoGrid({
        dataSource: {
            transport: {
                read: {
                    url: "/api/products", // 你的数据接口地址
                    type: "GET"
                }
            },
            pageSize: 15,
            schema: {
                model: {
                    id: "id"
                }
            }
        },
        columns: columnConfig, // 动态传入服务器返回的列配置
        pageable: true,
        sortable: true,
        filterable: true
    });
}

// 页面首次加载时初始化默认Grid
$(document).ready(function() {
    // 先获取默认列配置（也可以直接传默认数组，这里模拟从服务器获取）
    $.get("/api/column-config", { selected: "id,productName" }, function(defaultColumns) {
        initKendoGrid(defaultColumns);
    });
});

// 按钮点击事件：处理Grid重建逻辑
$("#rebuildGridBtn").on("click", function() {
    // 1. 收集当前选中的列值
    const selectedCols = $("input[name='columns']:checked").map(function() {
        return $(this).val();
    }).get();

    // 2. 从服务器获取对应列的完整配置
    $.get("/api/column-config", { selected: selectedCols.join(",") }, function(newColumnConfig) {
        // 3. 销毁现有Grid实例
        const existingGrid = $("#productGrid").data("kendoGrid");
        if (existingGrid) {
            existingGrid.destroy(); // 销毁组件实例
            $("#productGrid").empty(); // 清空容器DOM，避免残留
        }

        // 4. 用新列配置重新初始化Grid
        initKendoGrid(newColumnConfig);
    });
});

关键细节说明 #

• 销毁Grid的必要性：Kendo UI会检测容器内是否已存在Grid实例，如果直接重新初始化会忽略新的列配置，必须先销毁再重建
• 服务器端配合：你的后端接口/api/column-config需要接收选中列的参数，返回标准的Kendo列配置数组，比如：

  [
    { "field": "id", "title": "ID", "width": 80 },
    { "field": "productName", "title": "产品名称", "width": 200 }
  ]
  

• 保留原有功能：如果你的Grid有分页、排序、过滤等扩展功能，要确保在initKendoGrid函数中保留这些配置，避免重建后丢失

这样操作后，每次点击按钮都会彻底重建Grid，列结构会完全按照服务器返回的配置更新，完美解决你的问题~

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