Kendo 具有 100% 和导航的网格 header

Question

我有一个 kendo 网格，想显示一个带有导航元素的 header。

请参阅我在 Teleriks Dojo 中的示例：http://dojo.telerik.com/iWIXa

当我添加 < header> 元素时，全高度功能被破坏（底部的寻呼机将滑落）。

如何解决这个问题？

谢谢斯文

Answer 1

这里有一个 Dojo example 可以满足您的需要。请注意如何在网格 dataBound 事件以及 window.resize 事件期间调用 resizeGrid() 函数。

function resizeGrid() {
    var gridElement = $("#grid");
    var dataArea = gridElement.find(".k-grid-content");
    var newHeight = gridElement.parent().innerHeight() - 75; 
    var diff = gridElement.innerHeight() - dataArea.innerHeight();
    gridElement.height(newHeight);
    dataArea.height(newHeight - diff);
}

注意 75 是如何使用的，这个值可用于修改大小，以便将网格置于屏幕边界内。希望这有帮助。

Answer 2

所以我稍微调整了你的代码dojo

使用我在网格中实际使用的一些代码。

与@Sandman 类似，我正在调整网格，但我没有在网格上设置外部样式，而是使用 window 作为确定调整大小的东西。

所以代码：

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




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

        }
    }


}

所以这是一个更扩展的解决方案，这个函数需要一个 options 对象（如果没有提供一个对象，那么会创建一个默认的对象，它会自动将一个或多个网格的大小调整为 windows身高.

在我的示例中，我在这里创建了一个对象

 var gridOptions = {
            size: 0.70,
            gridContentCss: ".k-grid-content",
            gridLockedContentCss: ".k-grid-content-locked",
            gridsToResize:[]
        };

所以我告诉网格使用当前 window 高度的 70% 来调整大小。

我还告诉它调整锁定和非锁定内容的大小，因为调整大小可以使锁定内容与解锁内容一起脱离 sync。

我还可以告诉代码仅调整某些网格的大小，因此如果屏幕上有多个网格，您可以调整它们全部或部分。如果未提供任何内容，则该函数假定所有网格都将在屏幕上进行调整。

然后最重要的是，我只是将此函数绑定到 window 调整大小函数，该函数将工作到默认值 css 接管并且如果您缩小说小于420 像素的屏幕高度然后将在 window 和网格上发生滚动。

我在代码中留下了一个控制台语句，因此您可以看到它正在调整大小。

正如我所说，这是一个比 Sandman 的解决方案更扩展的解决方案

Kendo 具有 100% 和导航的网格 header

Kendo grid with 100% and navigation header

javascript

css

kendo-ui

kendo-grid

kendo-asp.net-mvc