Управление групповым заказом в сетке пользовательского интерфейса Kendo

Ответ 1

В настоящее время нет способа сортировать группировку над чем-то другим, кроме поля группы. Имея способ сортировать группы, такие как 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. В этом случае Боб появится в качестве первой группы, хотя Алиса была первой в алфавитном порядке. Это работает так же, как вы сказали.

Ответ 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 -й группе.

Примечание. Это решение работает только в том случае, если вы не используете пейджинг. Страницы разбиты до применения группировки, поэтому все ставки отключены, если ваши данные занимают несколько страниц.

Ответ 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

Ответ 4

Пользовательское направление сортировки при группировке не поддерживается Grid - группы сортируются так же, как сортировка столбца (при использовании сортировки клиентов) при отсутствии группировки. Направление сортировки аналогично сортировке по умолчанию в JavaScript.

Ответ 5

Вы можете добавить запрос после того, как вы определили источник данных, и это, похоже, работает

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

Где указано имя источника данных

Ответ 6

Старый вопрос, но у меня была такая же проблема

Теоретически вы можете следовать советам здесь: 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;
                }
            }

Ответ 7

Вот простой способ для этого. Не очень, но достаточно просто...

Просто добавьте пробелы перед текстом для достижения желаемой сортировки

   [{ 
      '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 из-за ведущего места.

Ответ 8

Используйте столбцы, чтобы указать порядок столбцов, когда у вас есть данные, например

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