GWT 2.4 Desplazamiento automático de DataGrid al seleccionar un elemento

Question

Estoy utilizando GWT 2.4's nueva DataGrid en un proyecto. Configuré el DataGrid con un tamaño de página de 50.
La pantalla disponible no es lo suficientemente grande como para mostrar todos los elementos y, por lo tanto, se muestra una barra de desplazamiento vertical (este es en realidad el objetivo principal del uso de un DataGrid).
Adjunté un SingleSelectionModel al DataGrid para poder seleccionar elementos.
Esto funciona bien hasta el momento.

Sin embargo, también tengo otro widget con el que el usuario puede interactuar. En función de esa acción del usuario, debe seleccionarse un elemento del DataGrid.
A veces, el elemento seleccionado no se encuentra en la región de la pantalla visible y el usuario tiene que desplazarse hacia abajo en el DataGrid para verlo.
¿Hay alguna forma de desplazarse hacia abajo automática o manualmente, de modo que el elemento seleccionado sea visible?
Comprobé el JavaDocs del DataGrid y no encontré ningún método o función apropiada para hacerlo.

Answer 1

No sé si esto funciona, pero podría tratar de obtener el elemento de fila para la selección y usar el método scrollIntoView.

Código Ejemplo:

dataGrid.getRowElement(INDEX_OF_SELECTED_ITEM).scrollIntoView(); 

Answer 2

No tiene tiempo para probarlo, pero DataGrid implementa la interfaz HasRows, y HasRows tiene, entre otras cosas, un método llamado setVisibleRange. Solo necesita averiguar el número de fila del artículo en el que desea enfocar, y luego establecer el rango visible desde ese número n hasta n + 50. De esta forma, DataGrid se restablecerá para colocar ese elemento en la parte superior (o cerca de la parte superior si está en los últimos 50 elementos de la lista que respalda el DataGrid). No olvides volver a dibujar tu DataGrid.

¿Ya ha mirado esto? Si es así, me sorprendería que no funcionara.

Ah, y dado que este es un widget que habla con otro, probablemente tenga algunos mensajes configurados y algunos manejadores de mensajes para que cuando el usuario interactúe con ese segundo widget y "seleccione" el elemento, el mensaje se active en EventBus y un controlador para ese mensaje corrige el DataGrid a lo largo de las líneas que he descrito. Creo que tendrás que hacer este cableado tú mismo.

Answer 3

La respuesta de arriba funciona bastante bien, aunque si la red es más ancha que la ventana y tiene una barra de desplazamiento horizontal, sino que también se desplaza todo el camino a la derecha que es bastante molesto . Pude hacer que se desplazara hacia abajo y quedara desplazado hacia la izquierda al obtener la primera celda de la fila seleccionada y luego hacer que se deslizara hacia la vista.

dataGrid.getRowElement(dataGrid.getVisibleItems().indexOf(object)).getCells().getItem(0).scrollIntoView(); 

Answer 4

Mi solución, un poco mejor:

dataGrid.getRow(model).scrollIntoView(); 

Answer 5

tengo un Fuera de límites excepción de hacer lo anterior.

Lo resolví obteniendo el ScrollPanel en el DataGrid y usé .scrollToTop() y así sucesivamente en el ScrollPanel. Sin embargo, para acceder a la ScrollPanel en la cuadrícula de datos que tenía que usar este comentario: http://code.google.com/p/google-web-toolkit/issues/detail?id=6865

Answer 6

Como Kem señaló, es molesto efecto "scrollToRight" después de la scrollIntoView.Después de mí, la solución de Kem ofrece un mejor comportamiento que la base, ya que normalmente las primeras columnas de una tabla son más significativas. Mejore un poco su enfoque, que se desplaza horizontalmente a la primera columna de la fila que queremos que sea visible, al calcular la primera columna visible a la izquierda antes de aplicar el desplazamiento y luego desplazarse hacia él.

Nota final: Columnas absolutas a la izquierda se prueban con "51". Este es un valor que encontré "experimentalmente" al buscar los valores de JS en la herramienta de desarrollo del navegador, creo que depende del estilo de la tabla, puede que necesite cambiarla/calcularla.

A continuación el código:

public void scrollIntoView(T next) { 
     int index = datagrid.getVisibleItems().indexOf(next); 
     NodeList<TableCellElement> cells = datagrid.getRowElement(index).getCells(); 
     int firstVisibleIndex = -1; 
     for(int i=0; i<cells.getLength() && firstVisibleIndex<0;i++) 
      if(UIObject.isVisible(cells.getItem(i)) && (cells.getItem(i).getAbsoluteLeft() > 51) && (cells.getItem(i).getAbsoluteTop() > 0)) 
       firstVisibleIndex = i; 

     cells.getItem(firstVisibleIndex>=0? firstVisibleIndex : 0).scrollIntoView(); 
}