有没有办法控制 Kendo UI 网格中的分组顺序。有一个组我想在所有其他组之前去，但似乎 Kendo UI 网格按字母顺序对组进行排序。我知道在分组名称中添加一个空格是可行的，但这似乎很骇人听闻。
谢谢狮子座
问问题
12336 次
9 回答
8
目前没有办法根据组字段以外的其他内容对分组进行排序。像 Telerik 这样在非剑道网格中对组进行排序是我现在对他们最大的功能要求。所以我们现在被困在使用 hacks 上。
对我有用的一个技巧是将排序字段和显示字段组合成一个新的字符串列，该列将排序字段部分隐藏在隐藏的跨度内。这是在数据源端完成的（对我来说，在 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 也会显示为第一组。这与您提到的空间填充类似。
于 2013-06-07T15:02:39.220 回答
4
Try AddDescending and AddAscending, see examples below
@(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 ...]
)
于 2016-02-25T18:30:14.297 回答
3
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数组，其中包含原始数据源中包含在第nth 组中的元素。
注意：此解决方案仅在您不使用分页时才有效。在应用分组之前页面被分解，所以如果您的数据跨越多个页面，所有的赌注都将被取消。
于 2015-12-09T21:26:05.400 回答
1
下面的代码会将满足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
}
}
},
如果要相互比较组，则应使用aandb然后相应地设置返回值。您需要根据您的要求使用返回值。
注意：返回值应该是 0、1、-1 中的任何一个
于 2020-08-19T16:05:46.273 回答
0
网格不支持分组时的自定义排序方向- 当没有分组时，组的排序方式与列的排序方式相同（使用客户端排序时）。排序方向与 JavaScript 中的默认排序相同。
于 2013-05-05T18:30:55.773 回答
0
您可以在定义数据源后添加查询，这似乎有效
related.query({
sort: { field: "Sort", dir: "asc"},
group: { field: "CategoryName" },
pageSize: 50
});
其中相关的是数据源的名称
于 2015-04-28T17:22:09.843 回答
0
一个老问题，但我也遇到了同样的问题
理论上你可以按照这里的建议：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;
}
}
}
}
}
然而，这对我不起作用。
对我有用的是...
向您的数据源添加一个额外的列，所以现在您有了
- 按名称分组
- 按顺序分组
在你的架构中做
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;
}
}
于 2019-06-21T08:59:47.043 回答
-1
这是一个简单的解决方法。不漂亮但足够简单......
只需在文本前添加空格即可实现理想的排序
[{
'Value': 1,
'Description': 'Description 1',
'Grouping': 'Group 1'
},
{
'Value': 2,
'Description': 'Description 2',
'Grouping': ' Group 2'
},
{
'Value': 3,
'Description': 'Description 3',
'Grouping': 'Group 3'
}]
在上面的示例代码中， 由于前导空格 ， Group 2出现在Group 1之前。
于 2017-04-05T06:15:45.173 回答
-2
拥有数据后，使用列来指定列的顺序，例如
columns: [
{
field: "LastName",
title: "Last Name"
},
{
field: "FirstName",
title: "First Name"
}
]
于 2013-05-03T20:15:24.763 回答