Question

我遇到了Kendo UI网格问题。

我增加了网格中的列表，但是在初始加载时，“k-grid-content＆＃39;不显示滚动条，内容超过当前显示的内容。

如下所示，scrollable设置为true。

create: function (container) {
        this.container = container;
        $(container).kendoGrid({
            selectable: 'multiple',
            pageable: { refresh: true, buttonCount: 5, input: true },
            scrollable: true,
            navigatable: true,
            filterable: false,
            editable: true,
            resizable: true,
            columns: articleCategoryTab.grid.columns,
            dataBound: articleCategoryTab.events.onGridDataBound
        });
    },

我曾尝试在dataBind事件中编写一些Javascript，根据browser_height的某些计算给它一个固定的高度，但这不起作用。

我该如何解决这个问题？

Answer 1

我通过将以下内容置于Kendo UI网格的dataBind事件中来修复它。

dataBind: function (ds) {
        this.get().setDataSource(ds);

        //make k-grid-content scrollable on initial load
        var BROWSER_HEIGHT = $(window).height();
        var diff = $('.container').height() +
        $('#articleManagementTabs').height() +
        $('#categoryArticleNavbar').height() +
        $('#categoryArticlePager').height() +
        $('#previewPaneWrapper').height();
        var difference = BROWSER_HEIGHT - diff - 10;

        var gridElement = $("#categoryArticleGrid");
        var dataArea = gridElement.find(".k-grid-content");
        dataArea.height(difference);
        dataArea.css('overflow-y', 'scroll');

    },

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

        }
    }



}

所以在最初的document就绪事件中会调用它，如下所示：

 $(document).ready(function () {
            initializeGrid(null); 
});

这是一个实际的演示：http://dojo.telerik.com/ALAnu

这只是使用一个名为initializeGrid的函数，该函数接受一个选项对象，该对象定义了锁定和解锁部分的大小，网格内容css 指标。网格，然后是网格ID数组，没有调整大小的哈希值。如果没有对象存在，那么该函数初始化它自己的这个对象的版本，并假设在那个时刻屏幕上只有一个网格来调整大小。

根据整个窗口大小的百分比计算高度，然后根据该高度调整网格高度，因此默认情况下网格将占据可用屏幕高度的55％。重要的是不要提供初始height值，因为这将覆盖上面概述的高度调整机制。

如果您需要在屏幕内考虑其他elements，这显然可以根据您的需要进行修改。

如果内容溢出，则k-grid-content不会垂直滚动

2 个答案: