无法修改Kendo Grid列数字格式为两位小数（0:0.00）求助

核心原因 #

最常见的问题是数据源中AVG_AP字段为字符串类型，Kendo Grid的format配置仅对数值类型数据生效，字符串无法被自动格式化。

可行解决方案 #

1. 修正数据源字段类型 #

在数据源的schema中显式指定AVG_AP为数字类型，确保Grid能识别并应用格式化规则：

$("#grid").kendoGrid({
    dataSource: {
        data: settingModel.ds_grid_dataSource.data,
        schema: {
            model: {
                fields: {
                    AVG_AP: { type: "number" }
                }
            }
        },
        // 保留原有数据源的其他配置（如分页、排序等）
        pageSize: settingModel.ds_grid_dataSource.pageSize
    },
    // 原有Grid配置...
    resizable: "true",
    editable: "inline",
    scrollable: "true",
    sortable: "true",
    filterable: "true",
    pageable: "true",
    height: "500px",
    columns: [
        { field: 'NRP', title: 'NRP', width: 80 },
        { field: 'NAMA', title: 'Name', width: 100 },
        { field: 'NAMA_PEKERJAAN', title: 'Pekerjaan', width: 100 },
        { field: 'AVG_AP', title: 'Nilai', format: '{0:0.00}', width: 50 },
        { title: 'Pilih', template: $('#tmp_check').html(), width: 30 },
    ]
}).data("kendoGrid");

2. 使用列模板强制格式化 #

如果无法修改数据源类型，直接通过template解析字符串并格式化：

{ 
    field: 'AVG_AP', 
    title: 'Nilai', 
    template: '#= kendo.toString(parseFloat(AVG_AP), "0.00") #', 
    width: 50 
}

3. 利用dataBound事件批量处理 #

若上述方法不适用，可在Grid渲染完成后遍历单元格格式化：

$("#grid").kendoGrid({
    // 原有Grid配置...
    resizable: "true",
    editable: "inline",
    scrollable: "true",
    sortable: "true",
    filterable: "true",
    pageable: "true",
    height: "500px",
    dataBound: function() {
        const grid = this;
        grid.tbody.find("tr").each(function() {
            const dataItem = grid.dataItem(this);
            const avgValue = parseFloat(dataItem.AVG_AP);
            $(this).find("td[data-field='AVG_AP']").text(kendo.toString(avgValue, "0.00"));
        });
    },
    columns: [
        { field: 'NRP', title: 'NRP', width: 80 },
        { field: 'NAMA', title: 'Name', width: 100 },
        { field: 'NAMA_PEKERJAAN', title: 'Pekerjaan', width: 100 },
        { field: 'AVG_AP', title: 'Nilai', width: 50 },
        { title: 'Pilih', template: $('#tmp_check').html(), width: 30 },
    ]
}).data("kendoGrid");

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