React Tree Grid Row Adding
IgrTreeGrid
ofrece una forma conveniente de realizar manipulaciones de datos mediante la adición de filas en línea y una API potente para operaciones CRUD React. Agregue un componente IgrActionStrip
con acciones de edición habilitadas en la plantilla de la cuadrícula, pase el cursor sobre una fila y use el botón provisto, presione ALT + + para generar la interfaz de usuario para agregar filas o ALT + SHIFT + + para generar la interfaz de usuario para agregar un elemento secundario para la fila seleccionada.
Ejemplo de adición de filas en una cuadrícula de árbol React
¿Te gusta este ejemplo? Obtén acceso a nuestro kit de herramientas completo Ignite UI for React y comienza a crear tus propias aplicaciones en minutos. Descárgalo gratis.
Uso de adición de filas
A continuación, defina una fuente de IgrTreeGrid
datos enlazada, rowEditable
establecida en true y un IgrActionStrip
componente con las acciones de edición habilitadas. La addRow
entrada controla la visibilidad del botón que genera la interfaz de usuario de adición de filas.
<IgrTreeGrid autoGenerate="false" primaryKey="ID" foreignKey="ParentID" rowEditable="true">
<IgrColumn field="Name" header="Name" dataType="String"></IgrColumn>
<IgrColumn field="Title" header="Title" dataType="String"></IgrColumn>
<IgrColumn field="HireDate" header="Hire Date" dataType="Date"></IgrColumn>
<IgrColumn field="OnPTO" header="On PTO" dataType="Boolean"></IgrColumn>
<IgrActionStrip>
<IgrGridEditingActions addRow="true"></IgrGridEditingActions>
</IgrActionStrip>
</IgrTreeGrid>
tsx
Nota: La configuración de la clave principal es obligatoria para las operaciones de adición de filas.
Nota: Todas las columnas, excepto la clave principal, se pueden editar en la fila que agrega la interfaz de usuario de forma predeterminada. Si desea deshabilitar la edición de una columna específica, debe establecer la entrada de la columna
editable
enfalse
.
Nota: Las
IgrGridEditingActions
entradas que controlan la visibilidad de los botones Agregar fila y agregar botones secundarios pueden usar el contexto de la tira de acciones (que es del tipoIgrRowType
para ajustar los registros para los que se muestran los botones.
El interno BaseTransactionService
se proporciona IgrTreeGrid
automáticamente. Mantiene los cambios de celda pendientes hasta que se envía o cancela el estado de la fila.
Iniciar fila agregando mediante programación
IgrTreeGrid
permite generar mediante programación la interfaz de usuario de agregar fila mediante dos métodos públicos diferentes. Uno que acepta un identificador de fila para especificar la fila en la que debe aparecer la interfaz de usuario y otro que funciona por índice. Puede usar estos métodos para generar la interfaz de usuario en cualquier lugar dentro de la vista de datos actual. No se admite el cambio de página o la especificación de una fila que, por ejemplo, esté filtrada.
El uso beginAddRowById
requiere que especifique la fila que se va a utilizar como contexto para la operación por its RowID
(PK). A continuación, el método funciona como si el usuario final hiciera clic en el botón de la tira de acción Agregar fila para la fila especificada, generando la interfaz de usuario debajo de ella. El segundo parámetro controla si la fila se agrega como elemento secundario a la fila de contexto o como elemento del mismo nivel. También puede hacer que la interfaz de usuario aparezca como la primera fila de la cuadrícula pasando null
el primer parámetro.
this.treeGrid.beginAddRowById('ALFKI', true); // Spawns the add row UI to add a child for the row with PK 'ALFKI'
this.treeGrid.beginAddRowById(null); // Spawns the add row UI as the first record
typescript
El beginAddRowByIndex
método funciona de manera similar, pero la fila que se va a usar como contexto se especifica mediante el índice.
this.treeGrid.beginAddRowByIndex(10, true); // Spawns the add row UI to add a child for the row at index 10
this.treeGrid.beginAddRowByIndex(null); // Spawns the add row UI as the first record
typescript
Posicionamiento
La posición predeterminada de la interfaz de usuario para agregar filas está debajo de la fila en la que el usuario final hizo clic en el botón Agregar fila.
Se
IgrTreeGrid
desplaza para mostrar completamente la interfaz de usuario de agregar fila automáticamente.La superposición de la interfaz de usuario para agregar fila mantiene su posición durante el desplazamiento.
Comportamiento
La interfaz de usuario para agregar filas tiene el mismo comportamiento que la de edición de filas, ya que están diseñadas para brindar una experiencia de edición consistente a los usuarios finales. Consulte el tema Edición de filas de la cuadrícula de árbol para obtener más información.
Una vez que se agrega una nueva fila a través de la interfaz de usuario de adición de filas, su posición y/o visibilidad se determina mediante el estado de ordenación, filtrado y agrupación de la IgrTreeGrid
. En un IgrTreeGrid
que no tiene ninguno de estos estados aplicados, aparece como el último registro. Se muestra brevemente una barra de bocadillos que contiene un botón que el usuario final puede usar para desplazarse IgrTreeGrid
a su posición si no está a la vista.
Navegación por teclado
- ALT + +: ingresa al modo de edición para agregar una fila
- ALT + SHIFT + + - Enters edit mode for adding a child
ESC sale del modo de agregar filas sin enviar ningún cambio
TAB mueve el foco de una celda editable en la fila a la siguiente y de la celda editable más a la derecha a los botones CANCELAR y LISTO. La navegación desde el botón LISTO va a la celda editable más a la izquierda dentro de la fila actualmente editada.
Integración de funciones
Cualquier operación de adición de filas se detendrá si se modifica la vista de datos de la
IgrTreeGrid
fila. Se envían todos los cambios realizados por el usuario final. Las operaciones que cambian la vista de datos incluyen, entre otras, ordenación, agrupación, filtrado, paginación, etcétera.Los resúmenes se actualizan una vez finalizada la operación de agregar filas. Lo mismo es válido para otras funciones dependientes de la vista de datos, como ordenar, filtrar, etc.
Personalizar la superposición de agregar filas
Personalizando el texto
Es posible personalizar el texto de la fila agregando superposición usando RowAddTextDirective
.
gridRef.current.rowAddTextTemplate = (ctx: IgrGridEmptyTemplateContext) => {
return ('Adding Row');
}
tsx
Estilo
La interfaz de usuario que agrega filas comprende los botones en las acciones de edición IgrActionStrip
, los editores de edición y la superposición, así como la barra de bocadillos que permite a los usuarios finales desplazarse a la fila recién agregada. Para diseñar estos componentes, puede consultar estas guías completas en sus respectivos temas:
Referencias de API
rowEditable
RowEditEnter
RowEdit
RowEditDone
RowEditCancel
endEdit
primaryKey
IgrTreeGrid
Recursos adicionales
Nuestra comunidad es activa y siempre da la bienvenida a nuevas ideas.