剣道フリーズ（ロック）グリッドの高さ

Question

ロックされた要素がいくつかあるグリッドを使用しています。 cssを使用してグリッドの最小高さと最大高さを設定しました。

.k-grid-content { 
    max-height: 400px; 
    min-height: 0px; 
    } 

ロックされたグリッドの高さの設定に問題があります。グリッドの高さを設定しないと、ロックされた側の行が白くなります。 グリッドの高さをどのように動的に設定するのですか？

は、これは、我々がこれはハックであり、それはグループのように完璧に動作しないOnboundイベント

var grid = e.sender; 
var lockedContent = grid.wrapper.children(".k-grid-content-locked") 
var content = grid.wrapper.children(".k-grid-content"); 

if (content[0] && (content[0].scrollWidth == content[0].clientWidth)) 
    lockedContent.height(content.height()); 
else 
    lockedContent.height(content.height()-16); 
//16 is near to horizontal scroll height 
grid.resize(); 

に持っているものです。 このリンクを完了しました http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/change-grid-height-when-using-frozen-columns グリッドには高さが設定されていないと仮定しているため動作しません。

適切な解決策を提供してください。

Answer 1

私はあなたがそれはあなたのシナリオ

http://dojo.telerik.com/eSava/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); 

     } 
    } 

    $(window).resize(function() { 
     ResizeGrid(options); 
    }); 

} 

この状態では、すべてのグリッドをウィンドウの高さの55％にリサイズします。

しかし、あなたはそうのような単純な変数を提供することにより、あなたができる別のサイジングルールを適用する場合：

var gridResize = { 
      size: 0.4, 
      gridContentCss: ".k-grid-content", 
      gridLockedContentCss: ".k-grid-content-locked", 
      gridsToResize:['grid'] 
      } 


initializeGrid(gridResize); 

ので、上記の例では、それはデフォルトを上書きし、利用できるのは40％に、グリッドのサイズを変更画面サイズ。さらに、グリッドのIDでコントロールのサイズを変更するだけです。だから、画面上に複数のグリッドがあった場合、それらの機能は単独で機能し、高さを維持します。

問題があれば教えてください。