Ширина столбца сетки кендо + прокручиваемый

Я пытаюсь привязать к прокручиваемой сетке кендо из JavaScript и несколько проблем с шириной столбца. Эта скрипка демонстрирует проблему (код в конце вопроса). Я указываю заголовки в html и добавляю ширину к одному из заголовков. Затем javascript устанавливает источник данных (в рабочем коде это делается с помощью вызова ajax).

Я хочу избежать необходимости устанавливать свойство columns.width в JavaScript, потому что

  • У меня есть много сеток, которые, поскольку мои модели просмотра тщательно сконструированы, способны автоматически определять необходимые столбцы. В нашем приложении более 100 гирлянд, и указание списка столбцов для всех них было бы громоздким.
  • В любом случае, это неправильно, это информация о стиле.

Я понимаю, что функциональность связана с созданием кендо двух сеток, одной для заголовков и одной для прокручиваемого контента. Тем не менее, другие контрольные библиотеки, которые я использовал в прошлом, которые делают подобные вещи, всегда копировали информацию о стилях между двумя сетками, чтобы облегчить декларативное моделирование при одновременной синхронизации двух таблиц - я просто не уверен, что такое "кендо" путь для этого есть.

HTML из скрипки

<table>
    <thead>
        <th class="p20" data-field="status">Status</th>
        <th data-field="description">Description</th>
    </thead>
</table>

Javascript

$('table').kendoGrid({
    dataSource: [
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' },
        { status: 'On', description: 'a longer description' }
    ],
    scrollable: true
});

CSS

.k-grid-content {
    height: 100px;
}
.p20 {
    width: 20%;
}
Источник

2 ответа

Решение

Вот довольно прямая сетка с горизонтальной полосой прокрутки (игнорируйте виртуализацию) http://demos.kendoui.com/web/grid/virtualization-remote-data.html. У вас есть ширина вашей сетки или ее родитель и ширина для каждого столбца с их суммой по фактической ширине сетки, тогда вы получите полосу прокрутки:

{ field: "OrderID", title: "Order ID", width: 60 },

Уже отвечайте вчера в своем другом посте: строки столбца не синхронизированы в сетке кендо

Или же

http://jsfiddle.net/vojtiik/2ApvC/3/

Заметьте, я использую немного более новую версию kendo и jQuery, чем вы.

Источник

Другой вариант заключается в использовании <colgroup/> а также <col/> элементы со свойствами стиля / класса.

Источник
Другие вопросы по тегам