Jquery k-grid-content在内容溢出时不垂直滚动

我对剑道UI网格有问题

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

    },

我增加了网格中的列表，但在初始加载时，“k-grid-content”不会显示滚动条，并且内容比当前显示的内容更多

如下所示，可滚动设置为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，根据浏览器的某个计算来给它一个固定的高度，但这不起作用

---

如何解决这个问题？

我通过将以下内容放在剑道UI网格的

数据绑定

事件中，解决了这个问题

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

    },

---

我通过在剑道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');

    },

---

虽然您已经回答了自己的问题，但我想我会提供一个解决方案，用于动态调整网格大小

这是我创建的一个用于调整网格大小的函数，可以一次应用于多个不同的网格，并且可以同时考虑网格中的锁定列和解锁列

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).ready(function () {
            initializeGrid(null); 
}); 

下面是一个正在运行的演示：

这只是使用一个名为
initializeGrid
的函数，该函数接受一个选项对象，该对象为网格的锁定和解锁部分定义大小，网格内容css指示符，然后是网格ID的数组，而无需调整哈希大小。如果不存在任何对象，则函数将初始化该对象的自身版本，并假定此时屏幕上只有一个网格可调整大小

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

如果您需要考虑屏幕中的其他
元素，则可以根据您的需要对其进行修改
 虽然您已经回答了您自己的问题，但我想我会提供一个解决方案，用于动态调整网格大小

这是我创建的一个用于调整网格大小的函数，可以一次应用于多个不同的网格，并且可以同时考虑网格中的锁定列和解锁列

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).ready(function () {
            initializeGrid(null); 
}); 

下面是一个正在运行的演示：

这只是使用一个名为
initializeGrid
的函数，该函数接受一个选项对象，该对象为网格的锁定和解锁部分定义大小，网格内容css指示符，然后是网格ID的数组，而无需调整哈希大小。如果不存在任何对象，则函数将初始化该对象的自身版本，并假定此时屏幕上只有一个网格可调整大小

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

如果您需要考虑屏幕中的其他
元素，则可以根据您的需要对其进行修改
 谢谢你的努力。谢谢你的努力。