Kendo Grid - Auto Width & Scrollable

Question

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

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

Любые идеи?

Спасибо всем.

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

Answer 1

Росс прав ... если ширина сетки слишком мала, столбцам автоучета присваивается оставшаяся ширина после выделения фиксированных столбцов. Это часто будет равным нулю, а затем вы застряли.

Мое обходное решение (HACK !!!) для этого - установить минимальную ширину на сетке, которая представляет собой сумму фиксированной ширины плюс дополнительную сумму, которая может быть поделена поровну между столбцами автоволны. Затем я вызываю функцию customMinWidth(), которая фиксирует ширину таблицы и элементов заголовка Grid на основе минимальной ширины, так что столбцы autowidth получают некоторое пространство, выделенное для них.

Это хакеры, но это предотвращает исчезновение столбцов.

Установка мин-ширина:

<style> 
/* Force initial min-width to fit all the columns so that the Title column 
    (which is set to take up the remaining space) will not disappear when remaining space is 0 on initial screen load. 
    Grid.ensureMinWidth() javascript will deal with it at runtime. 
*/ 
#grid .k-grid-header-wrap > table, /* header table */ 
#grid .k-grid-content table, /* data table, no virtual scrolling */ 
#grid .k-virtual-scrollable-wrap table /* data table, with virtual scrolling */ { 
    min-width: 600px; /* Width of fixed columns plus enough space so that autowidth columns don't disappear, i.e. min column width of auto columns */ 
} 
</style> 

Вспомогательная функция:

<script> 
/* Ensures that a grid will that has too many columns to fit in the viewport will not shrink dynamic width 
    columns to 0 if there is no space left and then makes sure that the column resizing continues to function 
    without weird jumping around/misalignment with the cursor that the out-of-the-box solution creates. 
    NOTE: 
    1. MUST be used in conjunction with the grid tables being given an initial min-width at design-time. 
    2. Due to the way Kendo binds the Grid's resizable with ajax data, this must be called on every dataBound 
     rather than just during Grid initialization. */ 
kendo.ui.Grid.prototype.ensureMinWidth = function() { 
    if (this.resizable) { 
     this.resizable.bind("resize", function (e) { 
      var minTableWidth, 
       th = $(e.currentTarget).data("th"), 
       grid = th.closest(".k-grid").getKendoGrid(); 

      if (e.x.delta > 0) { 
       minTableWidth = grid.tbody.closest("table").width(); 
      } 
      else { 
       minTableWidth = grid.tbody.closest("table").width() + e.x.delta; 
      } 
      if (grid.options.scrollable) { 
       grid.thead.closest("table").css({ "min-width": minTableWidth }); 
      } 
      grid.tbody.closest("table").css({ "min-width": minTableWidth }); 
     }); 
    } 
} 
</script> 

И тогда вы просто вызовите ensureMinWidth() в случае DataBound сетке в.

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

Пример: http://dojo.telerik.com/@Stephen/IlUYun