Как установить ширину столбцов группы кендогрид

1

Я работал с KendoGrid, у которого есть два уровня группы, как на изображении:

Изображение 174551

Теперь мне нужно уменьшить ширину столбцов группы.

Я тестирую этот код с помощью jquery:

$(".k-group-col,.k-group-cell").css('width', 10)

... и это работает, но на мгновение. (Возможно, есть функция кендо, которая сбросит эту ширину.)

Пожалуйста помоги. Спасибо!!

Теги:
kendo-ui
kendo-grid

2 ответа

1
Лучший ответ

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

http://docs.telerik.com/kendo-ui/controls/data-management/grid/appearance#columns

Либо оставить хотя бы один столбец без ширины, либо задать большую ширину столбца. Никакой пользовательский CSS не потребуется.

Обновление: столбцы групп уже имеют ширину по умолчанию, которая является достаточно малой.

Поделиться
  • 0
    Спасибо @dimodi, это работает для ширины столбцов группы, но затем я потерял пропорции ширины в других столбцах, потому что теперь ширина соответствует содержимому.
  • 0
    У вас включена или отключена Grid-прокрутка?
Показать ещё 4 комментария
0

Чтобы добавить к этому:

Я создал пример с динамической шириной (поэтому ширины столбцов могут быть отношениями и не должны иметь явной ширины)

http://jsfiddle.net/2cf1w0t8/

Вот определение столбца и событие в dataBound, которое устанавливает ширину "group col".

dataBound: function(e){
            e.sender.element.find(".k-group-col,.k-group-cell").css('width', 2)
        },
        columns: [
            {
                field: "HistoryDate",
                groupHeaderTemplate: function(args){
                    return '<span class="row_'+args.uid+'">' + kendo.toString(args.value, 'dd.MM.yyyy') + '</span>';
                },
                hidden: true,
                filterable: false,
                width: 0
            },
            {
                field: "Titelbezeichnung",
                template: function(items){
                    return items.Titelbezeichnung + '<br>' + (items.Titelbezeichnung2 ? items.Titelbezeichnung2 : '&nbsp;');
                },
                width: 30,
            },
            {
                field: "ISIN",
                filterable: false,
                width: 10,
            },
            {
                field: "Valor",
                filterable: false,
                width: 10,
            },
            {
                field: "Ticker",
                width: 10,
            },
            {
                field: "SecurityCCY",
                attributes:{ align:"center" }, headerAttributes: { 'class': 'k-header-centeralign' },
                filterable: false,
                width: 10,
            },
            {
                field: "RiskCCY",
                attributes:{ align:"center" }, headerAttributes: { 'class': 'k-header-centeralign' },
                filterable: false,
                width: 10,
            },
            {
                field: "Typ",
                filterable: false,
                width: 10,
            },
            {
                field: "LastPrice",
                attributes:{ align:"right" }, headerAttributes: { 'class': 'k-header-rightalign' },
                filterable: false,
                format: '{0:n4}',
                width: 10,
            },
            {
                field: "PriceDate",
                attributes:{ align:"right" }, headerAttributes: { 'class': 'k-header-rightalign' },
                filterable: false,
                format: "{0:dd.MM.yyyy}",
                width: 10,
            },
            {
                field: "Status",
                attributes:{ align:"right" }, headerAttributes: { 'class': 'k-header-rightalign' },
                filterable: false,
                width: 10,
            },
            {
                field: "Percentage",
                attributes:{ align:"right" }, headerAttributes: { 'class': 'k-header-rightalign' }, footerAttributes: { align: 'right' }, groupFooterAttributes: { align: 'right' },
                format: "{0:n2}",
                editor: editNumberDecimals,

                aggregates: ["sum"],
                groupFooterTemplate: '<span class="footerPercentage">#=sum#%</span>',
                filterable: false,
                width: 20,
            },
            //{ command: {name: "destroy", text: ' '}, title: " ", attributes:{ align:"right" }, headerAttributes:{'style':'text-align: right'}, },
        ]
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню