k-grid-контент не прокручивается по вертикали, если содержимое переполняется

Question

У меня проблема с сеткой пользовательского интерфейса Kendo.

Я увеличил списки в сетке, но с начальной загрузкой «k-grid-content» не показывает полосу прокрутки, а контент больше, чем отображается в настоящее время.

Как видно ниже, для прокручиваемого значения установлено значение true.

create: function (container) { 
     this.container = container; 
     $(container).kendoGrid({ 
      selectable: 'multiple', 
      pageable: { refresh: true, buttonCount: 5, input: true }, 
      scrollable: true, 
      navigatable: true, 
      filterable: false, 
      editable: true, 
      resizable: true, 
      columns: articleCategoryTab.grid.columns, 
      dataBound: articleCategoryTab.events.onGridDataBound 
     }); 
    }, 

Я попытался написать несколько Javascript в dataBind случае, чтобы придать ему фиксированную высоту, основанную на некотором расчете от browser_height, но это не сработало.

Как я могу это решить?

Answer 1

Я установил его, поставив следующее в случае dataBind события сетки пользовательского интерфейса Kendo.

dataBind: function (ds) { 
     this.get().setDataSource(ds); 

     //make k-grid-content scrollable on initial load 
     var BROWSER_HEIGHT = $(window).height(); 
     var diff = $('.container').height() + 
     $('#articleManagementTabs').height() + 
     $('#categoryArticleNavbar').height() + 
     $('#categoryArticlePager').height() + 
     $('#previewPaneWrapper').height(); 
     var difference = BROWSER_HEIGHT - diff - 10; 

     var gridElement = $("#categoryArticleGrid"); 
     var dataArea = gridElement.find(".k-grid-content"); 
     dataArea.height(difference); 
     dataArea.css('overflow-y', 'scroll'); 

    }, 

Answer 2

Хотя вы предоставили ответ на свой вопрос, я думал, что я бы обеспечить решение, которое я придумал для изменения размера сетки на лету.

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

function initializeGrid(options) 
{ 
    if(options === null || options === undefined) 
    { 
     options = { 
      size: 0.55, 
      gridContentCss: ".k-grid-content", 
      gridLockedContentCss: ".k-grid-content-locked", 
      gridsToResize:[] 
     }; 
    } 


    var windowHeight = $(window).height() * options.size; 

    if(options.gridsToResize !== null && options.gridsToResize.length > 0) 
    { 
     options.gridsToResize.forEach(function (item) { 
      var gridContent = $('#' + item + ' > ' + options.gridContentCss); 


      var lockedContent = $('#' + item + ' > ' + options.gridLockedContentCss); 


      // console.log(gridContent, lockedContent); 

      gridContent.height(windowHeight); 

      if (lockedContent !== null && lockedContent !== undefined) { 
       lockedContent.height(windowHeight); 

      } 
     }); 
    } 
    else 
    { 
     var gridContent = $(options.gridContentCss); 
     var lockedContent = $(options.gridLockedContentCss); 

     gridContent.height(windowHeight); 

     if (lockedContent !== null && lockedContent !== undefined) { 
      lockedContent.height(windowHeight); 

     } 
    } 



} 

Так что это называется на начальном document готового события, как так:

$(document).ready(function() { 
      initializeGrid(null); 
}); 

вот демо его в действии: http://dojo.telerik.com/ALAnu

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

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

Это, очевидно, может быть изменено для ваших нужд, если вам нужно, чтобы он учитывал другие elements на экране.