Как установить ширину сетки пользовательского интерфейса kendo

Question

У меня возникла проблема с шириной сетки Kendo. Я хочу, чтобы сетка растянулась, чтобы соответствовать содержимому сетки. Эта сетка, над которой я работаю, создается динамически, поэтому время от времени она может иметь всего 2 столбца, а иногда может иметь максимум 5 столбцов. Я не хочу, чтобы сетка расширялась и отображалась целая страница для отображения всего двух столбцов.

Чтобы получить эту работу, я добавил следующее CSS

.k-grid table{ 
    display: inline; 
} 

Проблема заключается в том, что, когда применяется этот стиль, он полностью портит заголовок столбца и выравнивание столбцов. Кто-нибудь знает, как это исправить?

Answer 1

На самом деле это действительно просто. Но я потратил много времени на то, что я не получил правильный источник. Вам просто нужно реализовать следующие вещи.

сделать сетку sortable: false

и использовать этот CSS

#gridId table { 
    width: auto; 
} 

Но при этом вы потеряете возможность прокрутки. Но вы можете обернуть свою сетку кендо в другой контейнер и реализовать свою собственную прокрутку.

Answer 2

Вместо того чтобы пытаться применить некоторые CSS, вы можете использовать некоторые jQuery для выполнения этой задачи. Я делаю что-то подобное с точки зрения высоты. Возможно, что-то вроде этого будет работать для вас (я изменил это, чтобы сделать высоту и ширину).

function resizeGrid(size) { 

    if (size === null || size === undefined) { 
     size = 0.6; 
    } 

    var windowHeight = $(window).height(); 
    var windowWidth = $(window).width(); 
    windowHeight = windowHeight * size; 
    windowWidth = windowWidth * size; 
    $(".k-grid-content").height(windowHeight) 
    $(".k-grid).width(windowWidth); 
} 

так что все это функция делает масштабирование сетки на основе текущего размера окна так, например, если вы хотите, чтобы сетка занять все доступное пространство, т.е. высота макс и шириной вы могли бы назвать resizeGrid(1), если вы хотите его меньше говорят, чтобы взять 50% от размера экрана, тогда вы бы использовали reszieGrid(0.5), если значение не используется, тогда функция просто идет со значением по умолчанию 60% доступной ширины/высоты.

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

, ориентируясь на классы kendo css, он упрощает повторное использование этой функции.

если вам нужна дополнительная информация, дайте мне знать.