Kendo UI Grid Breaks height setting on edit (Jquery)

Question

Problem

I have a Kendo UI JQuery Grid. All functionality is working as I expect however I encounter a bug when I add new record.

The record can be added and saved but the footer of the grid "floats" halfway up the grid and the scrollbar is removed - leaving it looking corrupt.

Following further investigation I think the scroll bar is actually respecting the initial height setting but on edit the scroll seems to disappear and the grid is full height

Investigations

I have no custom handler on the create new record
I have a custom data bound event however in the scenario above this is passed without touching the grid
It doesn't appear to be a CSS issue as inspecting the DOM in developer tools reveals nothing of note
I have also now tried tried to add my own custom add(Point one I have kept the standard). Which fires and behaves as expected but still has the issue of the scrollbar disappearing and the footer "floating"
There are no error message in the console etc... to go on

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

        });

Code:

The grid is defined as:

$("#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" }
                ]
            },

and the dataBound method

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

}

Dean Dean · Accepted Answer · 2020-01-27T20:44:23

After pulling my hair out for hours

catching the edit function of the grid and setting the below worked

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

Kendo UI Grid Breaks height setting on edit (Jquery)

1 Answers