ASPXGridView Estilo Excel – Extendiendo la Funcionalidad

El objetivo principal para esta funcionalidad es añadir una línea de edición a la reja

para poder actualizar e insertar datos.

La siguiente figura muestra habilitada la edición cuando se hace clic en la segunda

fila de la reja

Para esto se comienza con especificar los ajustes de edición, se debe especificar

la opción InLine

Luego en el evento cliente “RowClick” de la reja se llamar a la función JavaScript

“habilitarEdicion”, la cual invoca al método cliente “StartEditRow”, este permite que

se pueda editar en la fila que se hizo clic en la reja con el botón izquierdo del

ratón.

<ClientSideEvents RowClick="habilitarEdicion" />

La función JavaScript para habilitar la edición es la siguiente:

function habilitarEdicion(s, e) { s.StartEditRow(e.visibleIndex); }

La función JavaScript para actualizar/almacenar los datos de la reja es la siguiente

Se considera el nombre cliente de la reja ClientInstanceName="cinGrdReja"

function almacenarDato(s, e) { switch (e.htmlEvent.keyCode) { case 13: //Cuando se presiona la tecla ENTER ASPxClientUtils.PreventEventAndBubble(e.htmlEvent); cinGrdReja.UpdateEdit(); break; case 27: //Cuando se presiona la tecla ESCAPE cinGrdReja.CancelEdit(); break; } }

Luego de haber habilitado la propiedad “InLine” y creado las funciones JavaScript,

lo siguiente es habilitar los eventos servidores de la reja “CellEditorInitialize” y

“RowUpdating”

En el evento CellEditorInitialize se escribe lo siguiente:

Protected Sub grdReja_CellEditorInitialize(ByVal sender As Object, ByVal e As DevExpress.Web.ASPxGridView.ASPxGridViewEditorEventArgs) Handles grdDatos.CellEditorInitialize Dim box As ASPxTextBox = TryCast(e.Editor, ASPxTextBox) If e.Column.FieldName <> "Total"Then e.Editor.ReadOnly = False box.Width = 80 box.HorizontalAlign = HorizontalAlign.Right box.MaskSettings.Mask = "<0..99999g>.<00..99>" box.MaskSettings.IncludeLiterals = MaskIncludeLiteralsMode.DecimalSymbol box.ValidationSettings.ErrorDisplayMode = ErrorDisplayMode.ImageWithTooltip box.ValidationSettings.Display = Display.Dynamic box.ClientSideEvents.KeyDown = "almacenarDato" End If End Sub

En donde se habilitaron las columnas con FieldName distinto de Total, ya que este

es calculado, y el usuario no tiene que editar.

Y para finalizar, en el evento RowUpdating se escribe lo siguiente:

Protected Sub grdReja _RowUpdating(ByVal sender As Object, ByVal e As DevExpress.Web.Data.ASPxDataUpdatingEventArgs) Handles grdDatos.RowUpdating ' copy OrderedDictionaries to Hashtables ' for easier data manipulations Dim newValues As New Hashtable Dim dataTable As New Datatable For Each item As DictionaryEntry In e.NewValues ' if value == 0 then do not insert any value

newValues.Add(Convert.ToByte(item.Key), If(CDec(item.Value) = 0, Nothing, CType(item.Value, System.Nullable(Of Decimal))))

Next For i As Byte = 1 To newValues.Count

dataTable.Rows(i)(newValues.Keys(i)) = CDec(newValues(i)) Next e.Cancel = True grdReja.CancelEdit() End Sub