Kendo UI Grid在编辑时打破高度设置（Jquery）

Question

问题

我有一个 Kendo UI JQuery Grid。所有功能都按我的预期工作，但是当我添加新记录时遇到了一个错误。

可以添加和保存记录，但网格的页脚“浮动”到网格的一半，并且滚动条被移除 - 让它看起来很损坏。

经过进一步调查，我认为滚动条实际上​​尊重初始高度设置，但在编辑时滚动似乎消失并且网格是全高

调查

1. 我在创建新记录时没有自定义处理程序
2. 我有一个习惯 数据绑定事件，但是在上面的场景中，这是通过的 不接触网格
3. 这似乎不是 CSS 问题，因为在开发人员工具中检查 DOM 并没有发现任何值得注意的地方
4. 我现在也尝试添加我自己的自定义添加（第一点我保持了标准）。哪个触发并按预期运行，但仍然存在滚动条消失和页脚“浮动”的问题
5. 控制台等中没有错误消息...继续

 $(".k-grid-my-create", grid.element).on("click", function (e) {
            var dataSource = grid.dataSource;
            dataSource.insert(0, blankTimeEntry);
            grid.editRow(grid.tbody.children().first());

        });

代码：

网格定义为：

$("#timeItemsGrid").kendoGrid({
            //scrollable: false,
            sortable: true,
            filterable: true,
            editable: true,
            resizable: true,
            pageable: false,
            height: 750,
            groupable: { sort: { dir: "desc" } },
            toolbar: ["create", "save"],
            dataBound: onDataBound,

            dataSource: {
                data: itemsToUse,

                schema: {
                    model: {
                        fields: {
                            copiedTime: { type: "boolean" },
                            customerObj: { defaultValue: { customerText: null, customerId: null } },
                            mainCustName: { type: "string" },
                            item: { type: "string" },
                            itemText: { type: "string" },
                            casetaskevent: { defaultValue: { casetaskevent: null, casetaskeventText: "" } },
                            team: { type: "string" },
                            teamText: { type: "string" },
                            div: { type: "string" },
                            divText: { type: "string" },
                            loc: { type: "string" },
                            locationText: { type: "string" },
                            isbillable: { type: "boolean" },
                            mon: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
                            tue: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
                            wed: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
                            thu: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
                            fri: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
                            sat: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } },
                            sun: { defaultValue: { timeSheetId: 0, hours: 0, memo: "" } }
                        }
                    }
                },
                aggregate: [
                    { field: "mon.hours", aggregate: "sum" },
                    { field: "tue.hours", aggregate: "sum" },
                    { field: "wed.hours", aggregate: "sum" },
                    { field: "thu.hours", aggregate: "sum" },
                    { field: "fri.hours", aggregate: "sum" },
                    { field: "sat.hours", aggregate: "sum" },
                    { field: "sun.hours", aggregate: "sum" }
                ]
            }, 

和dataBound方法

function onDataBound(e) {
    console.log("onDataBound");
    var grid = $("#timeItemsGrid").data("kendoGrid");
    var data = grid.dataSource.data();
    var element;

    $.each(data, function (i, row) {
        if (row.dirty) {
            element = $("tr[data-uid=\"" + row.uid + "\"] ");
            $(element).removeClass("k-alt");
            $(element).addClass("isdirty");
        }
        if (row.copiedTime == true) {
            element = $("tr[data-uid=\"" + row.uid + "\"] ");
            $(element).removeClass("k-alt");
            $(element).addClass("copiedTime");
        }
    });

}

Answer 1

把我的头发拔了几个小时后

捕捉网格的编辑功能并设置以下工作

var scrollable = document.querySelector("#timeItemsGrid > div.k-grid-content.k-auto-scrollable");            
scrollable.style.overflow = "scroll";
scrollable.style.overflowX = "hidden";