Исправить заголовок сетки кендо - PullRequest
Новая
       10

Исправить заголовок сетки кендо

0 голосов
/ 25 апреля 2018

Я хочу установить фиксированный заголовок сетки кендо.После большого поиска в интернете я не могу найти то, что я точно хочу сделать.

Этот пост на Telerik Doc показывает, как исправить заголовок в верхней части окна: https://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/Layout/fixed-headers-grid

Но это не совсем такЧто я хочу сделать.Я хочу, чтобы заголовок был исправлен при прокрутке страницы в том месте, где она находится на странице загрузки.

Как я могу это сделать?

1 Ответ

0 голосов
/ 25 апреля 2018

После тяжелой работы и теста на безумие я наконец нашел, как исправить этот заголовок сетки.Итак, я делюсь этим здесь, потому что я думаю, что многие люди хотят сделать это ...

Я немного переделал урок telerik, чтобы исправить заголовок там, где вы хотите, учитывая, что сетка имеет панель инструментов и должна бытьмногоразовые:)

CSS: 

.fixed-header {
    position: fixed;
    width: auto;
    z-index: 10000;
}

Javascript ('#main-header' - это селектор главного меню моего сайта): 

/**
* Fix grid header
* @param {kendo.ui.Grid} grid - The grid
* @param {string} [selector] - The selector of the element which the header must be "stuck" on scrolling, by default the main menu
*/
function fixGridHeader(grid, selector) {
    var wrapper = grid.wrapper,
        toolbar = wrapper.find(".k-grid-toolbar"),
        header = wrapper.find(".k-grid-header");

    function resizeFixed() {
        var paddingRight = parseInt(header.css("padding-right"));
        header.css("width", wrapper.width() - paddingRight);
    }

    function scrollFixed(selector) {

        var offset = $(selector ? selector : '#main-header').offset().top + $(selector ? selector : '#main-header').outerHeight(),
            tableOffsetTop = wrapper.offset().top,
            top = $('#main-header').height() + (selector ? $(selector).height() : 0);

        if (offset >= tableOffsetTop) {
            header.addClass("fixed-header");
            if (toolbar.length > 0) {
                toolbar.addClass("fixed-header");
                toolbar.css({ 'top': top, width: "100%" });
                header.css({ 'top': top + toolbar.innerHeight() });
            }
            else {
                header.css({ 'top': top });
            }
        }
        else {
            header.removeClass("fixed-header");
            if (toolbar.length > 0)
                toolbar.removeClass("fixed-header");
        }

    }
    resizeFixed();
    $(window).resize(resizeFixed);
    $(window).scroll(function () { scrollFixed(selector); });
}
...