Kendo - 网格 - 聚合页脚列对齐答案

【问题标题】：Kendo - Grid - Aggregate Footer Column AlignmentKendo - 网格 - 聚合页脚列对齐
【发布时间】：2012-11-15 21:18:05
【问题描述】：

我有一个 Kendo Grid，它有一个页脚模板来显示聚合数据。聚合数据最初与其列对齐（就像它应该的那样）。但是，如果我隐藏一列并且列具有不同的宽度，则聚合数据会与其列不对齐。这是小提琴：http://jsfiddle.net/uQG2J/1/

代码如下：

var grid = $("#grid").kendoGrid({
dataSource: {
    data: [
        {"foo": 10, "bar": 10, "moo":5},
        {"foo": 20, "bar": 30, "moo":8},
    ],   
    aggregate: [
       {field: "moo", aggregate: "sum"}
    ]
},
columns: [
    {
        field: "foo",
        width: 20
    },
    {
        field: "bar",
        width: 80            
    },       
    {
        field: "moo",
        footerTemplate: "Sum: #=sum# ",
        width: 40           
    }

]   
}).data("kendoGrid");

grid.hideColumn("foo");
grid.refresh();

隐藏另一列后如何将聚合数据与其列对齐？

【问题讨论】：

标签： grid alignment aggregate show-hide kendo-ui

【解决方案1】：

为避免这种情况，请以百分比为单位设置列的宽度。

例如

var grid = $("#grid").kendoGrid({
    dataSource: {
        data: [
            {"foo": 10, "bar": 10, "moo":5},
            {"foo": 20, "bar": 30, "moo":8},
        ],    
        aggregate: [
           {field: "moo", aggregate: "sum"}
        ]
    },
    columns: [
        {
            field: "foo",
            width: "20%"
        },
        {
            field: "bar",
            width: "20%"
        },        
        {
            field: "moo",
            footerTemplate: "Sum: #=sum# ",
            width: "60%"
        }

    ]   
}).data("kendoGrid");

//grid.hideColumn("foo");
grid.refresh();

这是更新后的jsfiddle。

【讨论】：