ASPXGridView Estilo Excel Extendiendo la Funcionalidad

El objetivo principal para esta funcionalidad es aadir una lnea de edicin a la reja para poder actualizar e insertar datos.

La siguiente figura muestra habilitada la edicin cuando se hace clic en la segunda fila de la reja

Para esto se comienza con especificar los ajustes de edicin, se debe especificar la opcin InLine

Luego en el evento cliente RowClick de la reja se llamar a la funcin JavaScript habilitarEdicion, la cual invoca al mtodo cliente StartEditRow, este permite que se pueda editar en la fila que se hizo clic en la reja con el botn izquierdo del ratn.
<ClientSideEvents RowClick="habilitarEdicion" />

La funcin JavaScript para habilitar la edicin es la siguiente:

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

La funcin 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)) e.Cancel = True grdReja.CancelEdit() End Sub

= CDec(newValues(i))

Next