Прокрутка сетки кендо до выбранной строки

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

например, я попытался это:

var grid = $("#Grid").data("kendoGrid"),
    content = $(".k-grid-content");
content.scrollTop(grid.select());

Ive также попробовал это:

var gr = $("#Grid").data("kendoGrid");
var dataItem = gr.dataSource.view()[gr.select().closest("tr").index()];
var material = dataItem.id;
var row = grid.tbody.find(">tr:not(.k-grouping-row)").filter(function (i) {
    return (this.dataset.id == material);
});
content.scrollTop(row);

может ли кто-нибудь указать мне в правильном направлении, пожалуйста? :)

--- редактировать ---

по другим причинам я не могу привязаться к событию изменения, поэтому я должен быть возможность вызова функции прокручивает список до выбранной строки. Это то, что я пробовал с ответом @Antonis, предоставленным для меня.

var grid = $("#Grid").data("kendoGrid")
grid.element.find(".k-grid-content").animate({  
    scrollTop: this.select().offset().top  
 }, 400);

когда я попробовал это, он прокрутил несколько вниз по списку, но не к выбранной строке. Я использую объект сетки неправильно, вызывая scrollTop на нем?

такое:

var grid = $("#ItemGrid").data("kendoGrid");
grid.scrollToSelectedRow = function () {
    var selectedRow = this.select();
    if (!selectedRow) {    
        return false;    
    }
    this.element.find(".k-grid-content").animate({
        scrollTop: selectedRow.offset().top  
    }, 400);
    return true;
    };

grid.scrollToSelectedRow();
8
asp.net-mvc asp.net-mvc-4 jquery kendo-grid kendo-ui

5 ответов

вы можете сделать это автоматически, когда выбрана строка. Свяжите функцию с событием "change", и там вы можете прокрутить выбранную строку. ( предполагая, что вы можете выбрать только одну строку, которая дается на это.select ()')

пример JSFiddle

обработчик 'change'

//    bind to 'change' event
function onChangeSelection(e) {

    //    animate our scroll
    this.element.find(".k-grid-content").animate({  // use $('html, body') if you want to scroll the body and not the k-grid-content div
        scrollTop: this.select().offset().top  //  scroll to the selected row given by 'this.select()'
     }, 400);
}
6

таким образом, большинство ответов здесь делают две ошибки, одна просто вопрос эффективности, другая фактическая ошибка.

  1. используя element.find(".k-grid-content"). Это просто массово не нужно. grid.content дает вам то же самое гораздо легче (и быстрее).

  2. используя .offset() чтобы найти положение строки. это неверно: это скажет вам положение строки относительно сам документ. Если ваша страница позволяет прокручивать всю страницу (а не только сетки), это число будет неверным.

    вместо того, чтобы использовать .position() - это дает вам положение относительно смещенного родителя. для того чтобы .position() чтобы дать вам правильные номера, таблица в вашем grid.content должно быть position: relative. это лучше всего применять через таблицу стилей CSS:

    .k-grid-content table {
  position: relative;
}

в любом случае, предполагая, что у вас уже есть ссылка, которую я назову grid, к самой сетке, и у вас есть панель содержимого установлена в relative положении, все, что вам нужно сделать это:

grid.content.scrollTop(grid.select().position().top);

или, для анимации,

grid.content.animate({ scrollTop: grid.select().position().top }, 400);

как уже обсуждалось, grid.content получает панель содержимого, часть, которую вы хотите прокрутить. Это объект jQuery.

объекты jQuery имеют .scrollTop метод, так что эта часть довольно проста. The .animate метод работает аналогично, когда вы используете его scrollTop собственность. Теперь нам просто нужно знать, где свиток to.

для этого grid.select() возвращает объект jQuery, соответствующий выбранной строке. Вот где вы хотите прокрутить to. Чтобы получить его позицию, мы используем jQuery .position() метод. Возвращаемое значение-это объект с top и left поля; мы хотим прокрутить к своему вертикальному положению, поэтому мы используем top.

это самый простой в использовании в change обратный звонок, конечно; там grid просто this (так как обратный вызов вызывается на самой сетке) и change автоматически вызывается при изменении выбора. Но вы можете вызвать этот код в любое время, когда вы хотите прокрутить выбор; вы можете получить grid использование:

grid = $('#theGridsId').data('kendoGrid');
13

вот обновленный код http://jsfiddle.net/27Phm/12/

//    bind to 'change' event
function onChangeSelection(e) {
    try {
        var $trSelect = this.select();
        var $kcontent = this.element.find(".k-grid-content");
        if ($trSelect && $trSelect.length == 1 && $kcontent) {
            var scrollContentOffset = this.element.find("tbody").offset().top;
            var selectContentOffset = $trSelect.offset().top;
            var IsMove = false;
            var distance = selectContentOffset - scrollContentOffset;
            distance += $kcontent.offset().top;
            if ($trSelect.prev().length == 1 && distance > $trSelect.prev().offset().top) {
                distance = (distance - $trSelect.prev().offset().top); //+ ($trSelect.height());
                //var toprows = $kcontent.scrollTop() / $trSelect.height(); //top rows above the scroll
                var selrowtotal = ($trSelect.offset().top - $kcontent.offset().top) + $trSelect.height();
                IsMove = selrowtotal > $kcontent.height() ? true : false;
                if (IsMove) $kcontent.scrollTop(distance);
            }
            if (!IsMove && $trSelect.offset().top < $kcontent.offset().top) {
                distance = selectContentOffset - scrollContentOffset;
                $kcontent.scrollTop(distance - 15);`enter code here`
            }
        }
    } catch (e) {

    }
}
0

У меня были проблемы со смещением, поэтому позиция работает лучше для меня:

grid.element.find(".k-grid-content").animate({  // use $('html, body') if you want to scroll the body and not the k-grid-content div
                    scrollTop: this.select().position().top  //  scroll to the selected row given by 'this.select()'
                 }, 400);
0

Я нашел функцию для этого, в Kendo mobile MVVM

parent.set('onShow', function (e) {
   e.view.scroller.reset();
}

или

app.xxx = kendo.observable({
   onShow: function() { e.view.scroller.reset(); }
});
0