剑道冻结(锁定)网格高度

Question

我们使用了一个网格，其中有几个元素被锁定。我们使用 css 设置了网格的最小和最大高度。

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

我们面临设置锁定网格高度的问题。如果我们不设置网格的高度，锁定侧的许多行会在底部变白。那么我们如何动态设置网格的高度呢？

这是我们在绑定事件上的内容

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

任何问题请告诉我。