Есть ли способ контролировать порядок группировки в сетке пользовательского интерфейса Kendo. Есть группа, которую я хотел бы пройти перед всеми другими группами, но, похоже, сетка Kendo UI сортирует группы по алфавиту. Я знаю, что добавление пробела в имя группировки работает, но это кажется очень хакерским.
Спасибо Лео
В настоящее время нет способа сортировать группировку над чем-то другим, кроме поля группы. Имея способ сортировать группы, такие как Telerik, в своих сетях, отличных от Kendo, является моим самым большим запросом для них. Итак, мы застряли с помощью хаков.
Один хак, который работает для меня, - это объединение поля сортировки и поля отображения в новый столбец строк, который скрывает часть поля сортировки внутри скрытого диапазона. Это делается на стороне источника данных (для меня, в 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. Он отобразит поле Name в заголовке группы, но будет отсортировано по полю Rank. В этом случае Боб появится в качестве первой группы, хотя Алиса была первой в алфавитном порядке. Это работает так же, как вы сказали.
Группировка 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 -й группе.
Примечание. Это решение работает только в том случае, если вы не используете пейджинг. Страницы разбиты до применения группировки, поэтому все ставки отключены, если ваши данные занимают несколько страниц.
Попробуйте 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 ...]
)
Пользовательское направление сортировки при группировке не поддерживается Grid - группы сортируются так же, как сортировка столбца (при использовании сортировки клиентов) при отсутствии группировки. Направление сортировки аналогично сортировке по умолчанию в JavaScript.
Вы можете добавить запрос после того, как вы определили источник данных, и это, похоже, работает
related.query({
sort: { field: "Sort", dir: "asc"},
group: { field: "CategoryName" },
pageSize: 50
});
Где указано имя источника данных
Старый вопрос, но у меня была такая же проблема
Теоретически вы можете следовать советам здесь: 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;
}
}
Вот простой способ для этого. Не очень, но достаточно просто...
Просто добавьте пробелы перед текстом для достижения желаемой сортировки
[{
'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"
}
]