KendoUI Автоматическая сортировка столбцов

Question

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

У меня есть 4 колонки:

 col1  col2 col3 col4 
------------------------------------------ 
| very long text | ... | ... | ... | 
|  ...  | ... | ... | ... | 
------------------------------------------ 

Значения в первом столбце, очень долго, так что я использую стиль: white-space: nowrap; text-overflow: ellipsis; текст остается в одной строке. Я хочу col2 быть 105-170px, col3 40-190px и col4 75-150px. Мне нравится держать его как можно меньше, чтобы избежать появления огромных белых пространств.

Я знаю, что что-то вроде этого может быть достигнуто установкой scrollable: true, но мне не нужна полоса прокрутки, и мне действительно не нравится, как она сидит там без пользы.

Answer 1

После игры с различными параметрами и часами поиска я решил использовать немного менее элегантное решение, но я достиг того, что искал. Если кто-то сталкивается с подобной проблемой, вот что я сделал:

• При загрузке DOM ($(document).ready(...) или $(...) в JQuery), я вызываю код для удаления правой padding-right из .k-grid-header и удалить overflow-y из .k-grid-content.

Код я использовал:

// jQuery code 
$(".k-grid-header").css("padding-right","0"); 
$(".k-grid-content").css("overflow-y","initial"); 

// JS (without jQuery) equivalent 
var gridHeaders = document.querySelectorAll(".k-grid-header"); 
for (var i = 0, element; element = gridHeaders[i++];) 
    element.paddingRight = "0"; 

var gridContent = document.querySelectorAll(".k-grid-content"); 
for (var i = 0, element; element = gridContent [i++];) 
    element.overflowY = "initial";