Kendo UI Grid Разрывает настройку высоты при редактировании (Jquery) - PullRequest
0 голосов
/ 27 января 2020

Проблема

У меня есть Kendo UI JQuery Сетка. Вся функциональность работает так, как я ожидаю, однако при добавлении новой записи я сталкиваюсь с ошибкой.

Запись может быть добавлена ​​и сохранена, но нижний колонтитул сетки «плавает» на полпути вверх по сетке, и полоса прокрутки удалена - в результате она выглядит поврежденной.

После дальнейших исследований я думаю, что полоса прокрутки фактически соответствует первоначальной настройке высоты, но при редактировании прокрутка кажется исчезающей, а сетка имеет полную высоту

Исследования

  1. У меня нет собственного обработчика при создании новой записи
  2. У меня есть пользовательское событие с привязкой к данным, однако в приведенном выше сценарии оно проходит без прикосновения к сетке
  3. Это не похоже на CSS проблема, связанная с тем, что проверка DOM в инструментах разработчика не обнаруживает ничего примечательного
  4. Я также сейчас пытался попытаться добавить свое собственное добавление (пункт первый, я придерживался стандарта). Который срабатывает и ведет себя как ожидалось, но все еще имеет проблему исчезновения полосы прокрутки и «плавающего» нижнего колонтитула
  5. В консоли нет сообщений об ошибках et c ... 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());

        });

Код:

Сетка определяется как:

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

}

footerbug

1 Ответ

0 голосов
/ 27 января 2020

После того, как я потянул меня за волосы в течение нескольких часов

, поймав функцию редактирования сетки и установив следующее, сработало

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

...