コンテンツがオーバーフローした場合、kグリッドのコンテンツが垂直にスクロールしない

Question

剣道UIグリッドに問題があります。

グリッド内のリスティングを増加させましたが、最初の読み込みでは、 '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 
     }); 
    }, 

私はそれをbrowser_heightからいくつかの計算に基づいて一定の高さを与えるために、dataBindイベントでいくつかのJavascriptを書くしようとしたが、これは動作しませんでした。

どうすればこの問題を解決できますか？

Answer 1

剣道UIグリッドのdataBindイベントに以下を挿入して修正しました。あなたがあなた自身の質問への答えを提供してきたが、

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 readyイベントに呼ばれる：ここ

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

は、動作中のそれのデモです：http://dojo.telerik.com/ALAnu

これは単に機能はグリッドの両方のロックとアンロック部分についてサイズ、グリッドコンテンツCSS指標を定義し、グリッドの配列がリサイズするハッシュなしをIDSオプションオブジェクトを受け入れるinitializeGridと呼ばれる使用します。オブジェクトが存在しない場合、関数はこのオブジェクトのそれ自身のバージョンを初期化し、サイズ変更するその時点で画面にグリッドが1つしかないと仮定します。

これは全体のウィンドウサイズのパーセンテージに基づいて高さを調整し、それに基づいてグリッドの高さを調整します。デフォルトでは、グリッドは使用可能なスクリーンの高さの55％を占めます。上で概説した高さ調整の仕組みを無効にするので、最初にheightの値を指定しないことが重要です。

画面内の他のelementsを考慮する必要がある場合は、これは明らかに必要に応じて変更できます。