Question

有没有办法控制Kendo UI网格中的分组顺序。我希望在所有其他组之前有一个小组，但似乎Kendo UI网格按字母顺序对组进行排序。我知道在分组名称中添加一个空格是有效的，但这看起来非常糟糕。

由于利奥

Answer 1

目前无法对群组字段以外的其他内容进行分组。有一种方法可以像Telerik那样对他们的非Kendo网格进行排序，这是我现在最大的功能要求。所以我们暂时不再使用黑客攻击。

对我有用的一个hack是将排序字段和显示字段组合到一个新的字符串列中，该列隐藏了隐藏范围内的排序字段部分。这是在数据源端完成的（对我来说，在SQL中）。然后，即使排序字段是数字，新列也会被排序为字符串，因此在某些情况下您必须适当填充。

例如，如果我的数据是：

[ 
    { 
      'Name': 'Alice', 
      'Rank': 10, 
      'RankName': '<span class="myHiddenClass">10</span>Alice', 
      ... (other fields)
    },  
    { 
      'Name': 'Bob', 
      'Rank': 9, 
      'RankName': '<span class="myHiddenClass">09</span>Bob', 
      ... (other fields)
    },  
    { 
      'Name': 'Eve', 
      'Rank': 11, 
      'RankName': '<span class="myHiddenClass">11</span>Eve', 
      ... (other fields)
    } 
    ... (Multiple Alice / Bob / Eve records)
]

然后我可以按RankName字段而不是Name字段进行分组。它将在组标题中显示“名称”字段，但按“排名”字段排序。在这种情况下，即使Alice按字母顺序排列，Bob也会显示为第一组。这类似于你提到的空间填充。

Answer 2

Kendo的分组按给定字段（例如fooBar）对数组中的所有元素进行排序，然后迭代已排序的元素。简而言之，使用伪代码：

if (element[i].fooBar!= element[i-1].fooBar) { 
    StartNewGroup(element[i]);
} else {
    AddToLastGroup(element[i]);
}

由于需要对排序的数组进行分组，因此更改排序很棘手。我创建了代码来覆盖内部groupBy()函数，这允许我按照我喜欢的方式对分组结果进行排序：

function overrideKendoGroupBy() {
    var origFunc = kendo.data.Query.prototype.groupBy;
    kendo.data.Query.prototype.groupBy = function (descriptor) {
        var q = origFunc.call(this, descriptor);

        var data = SortYourData(q.data, descriptor.dir);

        return new kendo.data.Query(data);
    };
}

在您的网页加载后的某个时刻致电overrideKendoGroupBy()。现在只需实施一个SortYourData()函数，q.data是一组分组，descriptor.dir是"asc"或"desc"。 q.data[n]有一个items数组，其中包含n分组中包含的原始数据源中的元素。

注意：此解决方案仅在您不使用分页时才有效。在应用分组之前，页面会被分解，因此如果您的数据跨越多个页面，则所有投注都会关闭。

Answer 3

尝试 AddDescending 和 AddAscending ，请参阅以下示例

@(Html.Kendo().Chart<T>()
[... other code ...]
.DataSource(ds => ds
    .Read(read => read.Action("action", "controller"))
    .Group(g => g.AddDescending(model=> model.property)) // <-- subtle difference here!
)
[... other code ...]
)

http://www.telerik.com/forums/stacked-chart-legend-order

Answer 4

下面的代码会将满足if条件的组推到网格底部

group: {
    dir: "asc",
    field: "FieldToGroupBy",
    compare: function (a, b) {
        if (b.value == "GROUP_TO_SHOW_LAST") {
            return -1; // this will push the group to bottom
        }
    }
},

如果要相互比较组，则应使用a和b，然后相应地设置返回值。您需要根据自己的需求尝试返回值。

注意：返回值应为0、1，-1中的任何一个

Answer 5

网格支持不分组时的自定义排序方向 - 在没有分组的情况下，组的排序方式与排序（使用客户端排序时）列的方式相同。排序方向与JavaScript中的默认排序方式相同。

Answer 6

您可以在定义数据源后添加查询，这似乎可以正常工作

 related.query({
        sort: { field: "Sort", dir: "asc"},
        group: { field: "CategoryName" },
        pageSize: 50
    });

其中related是数据源的名称

Answer 7

一个老问题，但是我也遇到了同样的问题

理论上，您可以按照以下建议进行操作：https://github.com/telerik/kendo-ui-core/issues/4024

$("#grid").kendoGrid({
    ...
    groupable: {
        sort: {
            dir: "asc",
            compare: function compareByTotal(a, b) {
                if (a.items.length === b.items.length) {
                    return 0;
                } else if (a.items.length > b.items.length) {
                    return 1;
                } else {
                    return -1;
                }
            }
        }
    }
}

但这对我不起作用。

对我有用的是...

在数据源中添加一个额外的列，这样您就可以了

GroupByName
GroupByOrder

在您的架构中

dataSource = {
                data: dataProperties,
                schema: {
                    model: {
                        fields: {
                            groupByName: {
                                type: "string",
                                from: "dataPropertyDefinition.GroupName"
                            },
                            groupOrderBy: {
                                type: "string",
                                from: "dataPropertyDefinition.groupOrderBy"
                            }
                        }
                    }
                },
                group: {
                    field: "groupOrderBy",
                }
            };

因此，现在您可以按groupOrderBy进行订购，可以随意选择，并使用groupHeaderTemplate来显示名称

        const columns: Array<object> = [
            {
                field: "groupOrderBy",
                hidden: true,
                groupHeaderTemplate: function (x: any)
                {
                    return x.items[0].groupByName;
                }
            }

Answer 8

这是一个简单的解决方法。不够漂亮但很简单......

只需在文字前添加空格即可实现理想的排序

   [{ 
      'Value': 1, 
      'Description': 'Description 1', 
      'Grouping': 'Group 1'
    },  
    { 
      'Value': 2, 
      'Description': 'Description 2', 
      'Grouping': ' Group 2'
    },
    { 
      'Value': 3, 
      'Description': 'Description 3', 
      'Grouping': 'Group 3'
    }]

在上面的示例代码中， 第2组 出现在 第1组 之前，因为有前导空格。

Answer 9

使用列可以在获得数据后指定列的顺序，例如

columns: [
{
field: "LastName",
title: "Last Name" 
},
{
field: "FirstName",
title: "First Name"
}
]

控制Kendo UI Grid中的组顺序

9 个答案: