Question

我有一个kendo网格问题我有一个window并且在窗口内有一个tabstrip标签的内容是两个网格，分别显示在tab1和tab2中，也是窗口最初是看不见的。

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

Answer 1

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

您想要一个网格，显示所有结果不使用分页但滚动。但是这个网格位于tabtrip标签内（恰好位于窗口内）所以它不应该溢出其容器（标签选项卡）

你应该：

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

在以下modification of your example中，我对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的文字并尝试。

DEMO

更改

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

<强>小提琴 Check this fiddle

根据您的评论更新 Fiddle

Answer 3

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

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

检查jsfiddle here

Answer 4

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

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

CSS：


    #gridTasks .k-grid-content {
            max-height: 300px;
        }

的javascript：



    //prepare datasource available for grid
                var taskDataSource = new kendo.data.DataSource({
                    serverPaging: true,
                    serverFiltering: true,
                    serverSorting: true,
                    pageSize: 10,
                    schema: {
                        data: "Data",
                        total: "Total",
                        model: { // define the model of the data source. Required for validation and property types.
                            id: "MemberID",
                            fields: {
                                MemberID: { type: "number", editable: false },
                                TaskName: { type: "string" }
                            }
                        }
                    },
                    transport: {
                        read: {
                            url: "/MemberManagement/GetTasksList",
                            contentType: "application/json",
                            type: "POST" //use HTTP POST request as by default GET is not allowed by ASP.NET MVC
                        },
                        parameterMap: function (data, operation) {
                            if (operation == "read") {
                                return JSON.stringify(data);
                            }
                        }
                    }
                });

    //bind grid
    $("#gridTasks").kendoGrid({
                 // height: 300, // remove this line ***
                    columns: [                
                        { field: "MemberID", title: "Member ID", width: 60, groupable: false, hidden: true },
                        { field: "TaskName", title: "Task Name", width: 100 , groupable: false }
                    ],
                    pageable: {
                        refresh: true,
                        pageSize: 10,
                        pageSizes: [10, 20, 50, 100],
                        buttonCount: 5,
                        messages: {
                            empty: "No Records Found.",
                            display: "{0}-{1} of {2}"
                        }
                    },
                    sortable: true,
                    selectable: "multiple",
                    scrollable: true,
                    filterable: true,
                    groupable: true,
                    dataSource: taskDataSource
                });

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

的javascript：



    dataBound: function() {
                 $('#gridTasks .k-grid-content').height(300);
              }

窗口内显示的网格高度问题

4 个答案: