在剑道UI网格中控制组顺序

目前没有办法对组的字段以外的内容进行排序。像Telerik那样在他们的非剑道网格中对组进行排序是我现在对他们最大的功能要求。所以我们现在只能用黑客了。

对我来说有效的一种方法是将排序字段和显示字段组合成一个新的字符串列，该列将排序字段部分隐藏在一个隐藏的span中。这是在数据源端完成的(对我来说，在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字段进行分组。它将在组标题中显示名称字段，但按秩字段排序。在这种情况下，Bob将作为第一组出现，即使Alice按字母顺序是第一组。这与前面提到的空格填充类似。

尝试 add降序和 add升序，参见下面的示例

@(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

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第11组中。

注意:此解决方案仅在不使用分页时有效。在应用分组之前，将对页面进行分解，因此如果您的数据跨越多个页面，则一切都将失效。

下面的代码将把满足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

当分组为而不是Grid支持的时，自定义排序方向-当没有分组时，组的排序方式与列的排序方式相同(当使用客户端排序时)。排序方向与JavaScript中的默认排序方向相同。

您可以在定义数据源后添加查询，这似乎行得通

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

其中related为数据源的名称

一个老问题，但我刚刚有同样的问题

理论上你可以遵循这里的建议: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

在schema中执行

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;
                }
            }

这里有一个简单的解决方法。不漂亮，但足够简单……

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

   [{ 
      '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组之前，因为有一个前导空格。

使用列指定列的顺序，一旦你有了你的数据，如

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