Tutorial: Eventos de la grid

Eventos de la grid

Los eventos de la grid hacen mucho más flexible el código y permite manejar lógicas al momento de tener interacción.

Configuración


Asignar eventos a una grid

Las grids pueden tener múltiples eventos diferentes, para asignarlo simplemente se invoca la función addEventGrid, indicando el nombre del evento, el objeto grid y la función que manejará el evento.

onRowAdded - Al agregar una fila

El evento se dispara al momento de agregar una fila, entrega el rowId a la función

addEventGrid('onRowAdded', gPruebas, function(rId){
    setCellValue(gPruebas, rId, gPruebasConf.Estatus.idx, 'Nuevo');
});

onRowEdit - Al editar una fila

El evento se dispara al momento de editar una fila, entrega el rowId a la función

addEventGrid('onRowEdit', gPruebas, function(rId){
    setCellValue(gPruebas, rId, gPruebasConf.Estatus.idx, 'Modificado');
});

onRowDelete - Al eliminar una fila

El evento se dispara al momento de eliminar una fila, no se entrega el rowId, ya que la fila no existe

addEventGrid('onRowDelete', gPruebas, function(){
    console.log('Fila Eliminada');
});

onBeforeRowDelete - Antes de eliminar una fila

El evento se dispara antes de eliminar una fila, entrega el rowId a la función

addEventGrid('onBeforeRowDelete', gPruebas, function(rId){
    var nombre = getCellValue(gPruebas, rId, gPruebasConf.Nombre.idx);
    console.log('Se va a eliminar ' + nombre);
});

onBeforeOpenPopup - Antes de abrir el popup

El evento se dispara antes de abrir el popup con los campos

addEventGrid('onBeforeOpenPopup', gPruebas, function(rId){
    //Filtrar las ciudades
});

onOpenPopup - Antes de abrir el popup

El evento se dispara cuando se abrió el popup con los campos

addEventGrid('onOpenPopup', gPruebas, function(rId){
    var salario = getCellValue(gPruebas, rId, gPruebasConf.Salario.idx);
    var porcentaje = parseFloat(salario/100);
    _$('#mensaje').html('El 1% del salario es ' + porcentaje);
});

onRowSelected - Al hacer clic en la fila

El evento se dispara cuando se hace clic sobre una fila

addEventGrid('onRowSelected', gPruebas, function(rId){
    var nombre = getCellValue(gPruebas, rId, gPruebasConf.Nombre.idx);
    console.log('Usuario seleccionado ' + nombre);
});

onParseXml - Después parsear el XML

El evento se dispara cuando se usa la función parseXml y termina de agregar las filas

addEventGrid('onParseXml', gPruebas, function(numRows){
    console.log('Filas Agregadas ' + numRows);
});