jquery - pageable - Kendo Grid desplazarse a la fila seleccionada

kendo grid pageable jquery

Question

Quiero poder invocar una función que desplaza la cuadrícula de Kendo a la fila seleccionada. Ya he probado algunos métodos, pero ninguno de ellos funcionó,

por ejemplo, intenté esto:

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

También he intentado esto:

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

¿Puede alguien señalarme en la dirección correcta, por favor? :)

--- EDITADO ---

Por otras razones, no puedo vincularme al evento de cambio, así que tengo que poder llamar a una función para desplazar la lista a la fila seleccionada. Esto es lo que intenté con la respuesta que Anthony me brindó.

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

Cuando probé esto, se desplazó un poco hacia abajo en la lista, pero no hacia la fila seleccionada. ¿Uso el objeto de la cuadrícula de forma incorrecta llamando a scrollTop sobre él?

Esto también:

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();

Answer 1

Aquí está el código actualizado 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) {

    }
}

Answer 2

Así que la mayoría de las respuestas aquí están cometiendo dos errores, uno solo es cuestión de eficiencia, el otro es un error real.

1. Usando element.find(".k-grid-content") . Esto es masivamente innecesario. grid.content te ofrece exactamente lo mismo mucho más fácilmente (y más rápido).

2. Usando .offset() para encontrar la posición de la fila. Esto es incorrecto: eso le dirá la posición de la fila relativa al documento en sí. Si su página le permite desplazarse por toda la página (no solo la cuadrícula), este número será incorrecto.

   En su lugar, use .position() : esto le proporciona la posición relativa a un elemento primario desplazado. Para que .position() proporcione los números correctos, la tabla en su grid.content debe tener position: relative . Esto se aplica mejor a través de una hoja de estilo CSS:

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

De todos modos, suponiendo que ya tiene una referencia, que llamaré grid , a la cuadrícula en sí, y tiene su panel de contenido en posición relative , todo lo que tiene que hacer es esto:

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

O, para la animación,

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

Como ya se mencionó, grid.content le proporciona el panel de contenido, la parte que realmente desea desplazar. Es un objeto jQuery.

Los objetos jQuery tienen un método .scrollTop , por lo que esa parte es bastante simple. El método .animate funciona de manera similar cuando usa su propiedad scrollTop . Ahora solo necesitamos saber a dónde desplazarnos.

Para eso, grid.select() devuelve un objeto jQuery correspondiente a la fila que se selecciona. Ahí es donde quieres desplazarte. Para obtener su posición, usamos el .position() jQuery .position() . El valor de retorno es un objeto con campos top e left ; queremos desplazarnos a su posición vertical, por lo que utilizamos la top .

Esto es más fácil de usar en la devolución de llamada de change , por supuesto; allí la grid es simplemente this (dado que se llama a la rellamada en la cuadrícula), y el change se invoca automáticamente cuando cambia la selección. Pero puede llamar a este código en cualquier momento que desee desplazarse a la selección; puedes obtener una grid usando:

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

Answer 3

Encontré una función para esto, en Kendo mobile MVVM

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

o

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

Answer 4

Puede hacerlo automáticamente cuando se selecciona una fila. Vincula una función al evento ''cambiar'', y allí, puedes desplazarte a la fila seleccionada. (suponiendo que puede seleccionar solo una fila, que viene dada por ''this.select ()'')

Ejemplo JSFiddle

el manejador de ''cambio''

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

Answer 5

Tuve problemas con el desplazamiento, por lo que la posición me funciona mejor:

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