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调整控件的大小。因此，如果您一次在屏幕上有多个网格，那么该功能将单独保留并保持高度。

任何问题都让我知道。

剑道冻结（锁定）网格高度

1 个答案: