You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

ASP.NET Core Kendo Grid动态列下如何实现分组与聚合?

ASP.NET Core Kendo Grid动态列下的分组与聚合配置方案

后端(ASP.NET Core服务端)配置方式

如果通过GridBuilder<T>构建动态列,可在列循环定义时直接指定分组与聚合规则,前提是提前准备好列的元数据(标记哪些列需分组、哪些需聚合):

// 示例:基于动态列元数据构建Grid列
foreach (var col in dynamicColumnSettings)
{
    grid.Columns(columns =>
    {
        var column = columns.Bound(col.FieldName).Title(col.DisplayName);
        
        // 开启列分组支持
        if (col.AllowGrouping)
        {
            column.Groupable(true);
        }
        
        // 添加聚合规则(按需配置求和、计数等)
        if (col.Aggregates != null && col.Aggregates.Any())
        {
            column.Aggregate(aggregates =>
            {
                foreach (var agg in col.Aggregates)
                {
                    switch (agg)
                    {
                        case "sum": aggregates.Sum(); break;
                        case "count": aggregates.Count(); break;
                        case "average": aggregates.Average(); break;
                        case "max": aggregates.Max(); break;
                        case "min": aggregates.Min(); break;
                    }
                }
            });
        }
    });
}

前端(客户端)配置方式

若动态列由前端从API获取,需在列定义数组中配置groupable属性,并在Grid的dataSource中声明全局聚合与分组规则:

// 从后端获取的动态列配置
const dynamicColumns = [
    { field: "Category", title: "分类", groupable: true },
    { field: "Price", title: "单价", groupable: true, aggregates: ["sum", "average"] },
    { field: "Stock", title: "库存", aggregates: ["count", "max"] }
];

$("#grid").kendoGrid({
    dataSource: {
        data: gridDataSource,
        // 初始分组配置(可选)
        group: [{ field: "Category" }],
        // 全局聚合规则,需与列配置对应
        aggregate: [
            { field: "Price", aggregate: "sum" },
            { field: "Price", aggregate: "average" },
            { field: "Stock", aggregate: "count" },
            { field: "Stock", aggregate: "max" }
        ]
    },
    columns: dynamicColumns,
    // 必须开启全局分组开关
    groupable: true,
    sortable: true,
    scrollable: true
});

关键注意事项

  • 全局groupable: true是列分组生效的前提,仅配置列的groupable无法启用分组功能。
  • 聚合规则需同时在列定义和dataSource.aggregate中声明,才能在分组脚注/表头正确显示聚合结果。
  • 若使用服务器端操作(分页、分组、聚合),需确保后端ToDataSourceResult()逻辑能解析动态列的聚合参数,可通过自定义DataSourceRequest扩展处理动态列的聚合配置。

内容的提问来源于stack exchange,提问作者user3616392

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.07 05:10:43