jquery - 在窗口内显示时的网格高度问题

Question

我有一个剑道网格的问题，我有一个window，在窗口里面有一个tabstrip选项卡的内容是两个网格，分别显示在 tab1 和 tab2 中，窗口最初也是不可见的。

我的问题是grid in the second tab height超出了原始网格内容的高度。我在 jsfiddle clickhere 中重现了这个问题。我想有人可以帮助我。

Answer 1

为了获得上述评论中描述的结果：

您需要一个不使用分页而是滚动显示所有结果的网格。但是这个网格在一个 tabstrip 选项卡内（恰好在一个窗口内），所以它不应该溢出它的容器（tabstrip 选项卡）

你应该：

1. 据我所知，height不是 的有效选项kendoTabStrip，您可以将其删除。
2. 您不想分页，而是从服务器获取所有结果，然后滚动。因此，您需要pageable: ...从Grid初始化以及初始化pageSize: 10中删除DataSource。
3. 创建网格后，您应该删除heightKendo UI 引入的样式，因为它没有正确计算（！？）$("#grid2").css("height","");。这在我看来有点棘手，但我无法让它运行。
4. 您应该稍微降低网格的高度，否则它不适合窗口。我把它改成450。

在您的示例的以下修改中，我对grid2（仅针对 grid2）进行了此修改。

Answer 2

我检查了你的 jsfiddle 并发现

<div id="tabStrip">
    <ul>
        <li>First tab</li>
        <li>Second tab</li>
    </ul>
    <div id="grid1"></div>
    <div id="grid2">Second tab content</div>
</div>

在上面的代码<div id="grid2">Second tab content</div>中为第二个标签创建高度问题。

您可以删除该文本div并尝试。

演示

---

改变

我对您的代码进行了一些更改，请参阅下面的 jsFiddle

小提琴检查这个小提琴

根据您的评论更新小提琴

Answer 3

我有同样的问题并通过在 dataBound 事件中设置 .k-grid-content 的高度来解决

$("#grid").kendoGrid(
{
    dataBound: function()
    {
        $('#grid .k-grid-content').height(349);
    }
});

在这里检查jsfiddle

Answer 4

窗口或标签条（活动标签除外）内的网格高度问题。实际上，当我们部分加载内容或通过 ajax 加载内容时，就会出现这些问题。

解决方案 1：为我工作
-使用 CSS 为网格内容容器设置最大高度，并在绑定网格时删除高度。因此，当网格内容大于此高度时，将启用滚动条。我做了如下。

CSS：

    #gridTasks .k-grid-content {
            最大高度：300px；
        }

javascript:

    //准备网格可用的数据源
                var taskDataSource = new kendo.data.DataSource({
                    服务器分页：真，
                    服务器过滤：真，
                    服务器排序：真，
                    页面大小：10，
                    架构：{
                        数据：“数据”，
                        总计：“总计”，
                        model: { // 定义数据源的模型。对于验证和属性类型是必需的。
                            id: "会员ID",
                            字段：{
                                MemberID: { type: "number", editable: false },
                                任务名称：{类型：“字符串”}
                            }
                        }
                    },
                    运输： {
                        读： {
                            url: "/MemberManagement/GetTasksList",
                            内容类型：“应用程序/json”，
                            type: "POST" //使用 HTTP POST 请求，因为 ASP.NET MVC 默认不允许 GET
                        },
                        参数映射：函数（数据，操作）{
                            如果（操作==“读取”）{
                                返回 JSON.stringify(data);
                            }
                        }
                    }
                });

    //绑定网格
    $("#gridTasks").kendoGrid({
                 // height: 300, // 删除这一行 ***
                    列： [                
                        { field: "MemberID", title: "Member ID", width: 60, groupable: false, hidden: true },
                        { 字段：“任务名称”，标题：“任务名称”，宽度：100 ，可分组：false }
                    ],
                    可分页：{
                        刷新：真，
                        页面大小：10，
                        页面大小：[10、20、50、100]，
                        按钮数：5，
                        消息：{
                            empty: "没有找到记录。",
                            显示：“{0}-{1} 个，共 {2} 个”
                        }
                    },
                    可排序：真，
                    可选：“多个”，
                    可滚动：真，
                    可过滤：真，
                    可分组：真，
                    数据源：任务数据源
                });

解决方案2：也为我工作。
- 更改dataBound javascript上的k-grid-content高度：

    数据绑定：函数（）{
                 $('#gridTasks .k-grid-content').height(300);
              }