Question

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

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

当我添加＆lt;报头GT;元素全高功能被破坏（底部的寻呼机将滑落）。

如何解决此问题？

由于斯文

Answer 1

所以我稍微调整了你的代码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对象（如果未提供一个，则创建一个默认值，自动调整网格或网格大小为55％的窗口高度。< / p>

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

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

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

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

我也能告诉代码只调整某些网格的大小，所以如果你在屏幕上有多个网格，你可以调整它们全部或只是其中一些。如果未提供任何内容，则该功能假定将在屏幕上调整所有网格。

然后最重要的是我只是将这个函数绑定到窗口调整大小函数，它将在默认css接管时达到一个点，如果你缩小到小于420px的屏幕高度，那么滚动就会发生在窗口和网格上。

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

正如我所说，这是一个比桑德曼解决方案更广泛的解决方案

Answer 2

这是Dojo example，可以满足您的需求。请注意resizeGrid()事件以及dataBound事件期间如何调用window.resize函数。

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，此值可用于修改大小以使网格位于屏幕边界内。希望这会有所帮助。

剑道网格100％和导航标题

2 个答案: