Kendo UI网格在编辑（Jquery）时中断高度设置

Question

问题

我有一个Kendo UI JQuery网格。所有功能都按预期运行，但是添加新记录时遇到错误。

可以添加和保存记录，但是网格的页脚在网格的中部“浮动”，并且滚动条已删除-看起来已损坏。

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

调查

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";