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

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();

这是一个 hack，它不能像分组一样完美地工作。 我们已经通过这个链接 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 调整控件的大小。因此，如果您同时在屏幕上有多个网格，则该功能将单独使用它们并保留那里的高度。

任何问题让我知道。