如何在Kendo MVC Grid中合并两个模板列？

当然可以实现！你只需要把Edit和Delete两个操作按钮放到同一个模板列里，就能将原本分开的两列合并成一列，既节省表格空间，布局也更紧凑。

修改后的完整代码： #

@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns => {
        columns.Bound(c => c.Name).Title(GlobalResources.Name).Width(30);
        columns.Bound(c => c.Description).Title(GlobalResources.Description).Width(80);
        // 将两个按钮合并到同一个模板列中
        columns.Template(@<text>
            <a href="Edit/@item.ID" class="btn btn-primary btn-xs" style="margin-right: 5px;">
                <span class="fa fa-edit"></span>
            </a>
            <a href="#" class="btn btn-danger btn-xs" onclick="deleteRecord(this, @item.ID);">
                <span class="fa fa-remove"></span>
            </a>
        </text>).Width(10).Title(GlobalResources.Actions); // 可设置统一的列标题，比如"操作"
    })
)

关键修改说明： #

• 移除了原本分开的两个columns.Template调用，把两个按钮标签放到同一个模板列的<text>块中
• 给Edit按钮添加了style="margin-right: 5px;"，让两个按钮之间保持合适间距，避免拥挤
• 调整了列的Width为10（你可以根据实际显示效果微调数值），同时给这列设置了统一的标题（对应你的全局资源）

这样修改后，表格里就只会显示一列包含两个操作按钮的“操作列”，完美实现你要的合并效果~

内容的提问来源于stack exchange，提问作者Rohullah Rajaee Rad