Destripando el ASPXGRIDVIEW 2/3: Totales, colores, formatos y filtros

Codigo del post
Bien voy a comenzar de atraz para adelante, con esto me refiero a que voy a empezar con lo que quiero llegar y luego voy a explicar como lo hice, asi que vamos por el objetivo

meta

Bien como pueden ver en la imagen de arriba quiero implementar una cuadricula que tenga scrolls, totales (en el resumen y una columna calculada para el total), formatos de fecha, columnas fijas con esto me refiero a que si hago scroll horizontal las tres primeras columnas de la cuadricula queden fijas como en la imagen de abajo:

meta1

Bien entonces por donde comenzar, pues por la data, al igual que en el post anterior (sobre este tema) voy a usar un DataTable hechoa mano con datos llenados a mano y la definicion de estos la pueden ver en el archivo de ejemplo (descargable) que acompaña a este post.

Antes que nada voy a determinar las secciones y por que las llamo de esta manera:

<dx:ASPxGridView ….>
“esta es la definicion de la cuadricula”
<Columns>
“esta es la defincion general de las columnas”
<dx:GridViewDataTextColumn …..>
“esta es la definicion de una columna”
</dx:GridViewDataTextColumn>
</Columns>
“esta tambien es la definicion de la cuadricula”
</dx:ASPxGridView>

Pero vamos a lo que nos intereza, como he llegado a darle formatos, bien primero voy a indicarles que para mi es casi un suplicio navegar por las opciones del cuadro de propiedades asi que las escribo en su mayoria en el aspx, en modo source, biene sta es la defincion para la columna nombrada como ID:

<dx:GridViewDataTextColumn Caption=”Id” FieldName=”id” FixedStyle=”Left” VisibleIndex=”0″ Width=”30px”>
<HeaderStyle HorizontalAlign=”Center” Wrap=”True” />
<CellStyle BackColor=”Silver”></CellStyle>
</dx:GridViewDataTextColumn>

Aqui pueden ver la seccion <HeaderStyle HorizontalAlign=”Center” Wrap=”True” /> con esto hago dos cosas una que los encabezados se coloquen en el centro (HorizontalAlign=”Center”) y tambien que salgan en dos filas (Wrap=”True”) como lo pueden ver en la ultima columna “Total desde los datos”.

La seccion <CellStyle BackColor=”Silver”></CellStyle> hace que se cambie el color de fondo de la columna.

ahora para que una columna quede fija a la izquierda fijense en la defincion de la columna en la parte que indica FixedStyle=”Left” pues es eso lo que las fija a la izquierda, mucho cuidado con esto ya que va a alinearla siempre a la izquierda un que sea la ultima columna, digamos que en mi diseño yo le puse Visibleindex= 6 pero le puse FixedStyle=”Left” entonces lo que va a hacer el control es ponerla lo mas a la izquierda que pueda asi si tienes 3 columasn marcadas con FixedStyle=”Left” y ocho columnas mas pero a la sexta le pusiste FixedStyle=”Left” y le dijistes que su Visibleindex= 6 no le importa la va a mostara como la tercera columna siempre.

Vamos ahora con los filtros, como pueden ver en la imagen tengo la fila de filtros, donde puedes ir escribiendo y va a filtrarlos, pero tambien a la derecha de cada cuadro de texto del filtro tengo un simbolo, si clickeas sobre el simbolo vaz a ver un menu desplegable con cosas como “igual a”, “que contenga esto” pues eso afecta al filtro, pero tambien peudes ver en la cabera de las columnas un simbolo con una flecha hacia abajo y si clickeas sobre ella van a salir opciones para el filtrado basado en los datos como en la imagen:

filtro

Bien como conseguimos esto, pues con este codigo en la definicion de la cuadricula:

<Settings ShowFilterRow=”True”
ShowHeaderFilterButton=”True” ShowFilterRowMenu=”True”
/>

ShowFilterRow=”True”: Hace que se muestre la fila con los filtros con cuadros de texto.
ShowHeaderFilterButton=”True”: Hace que se muestren esa flechta en la cabecera de las columnas y que ahora vez desplegada en la imagen de arriba.
ShowFilterRowMenu=”True”: es el que hace que se muestren ese simbolo a lado de los cuadros de texto.

Pero aqui tienes algo extraño si lo dejas asi le pone en las cabeceras de las columnas esa opcion en todas y no quiero que salgan en las que son numericas, asi que como las quitamos, pues con este codigo en la definicion de cada columna como esto:

<dx:GridViewDataTextColumn Caption=”Total desde los datos” FieldName=”total” VisibleIndex=”7″ >
<Settings AllowHeaderFilter=”False” />
</dx:GridViewDataTextColumn>

Esta es la etiqueta que hace que no se muestre esa dichosa opcion en las columnas que prefieras <Settings AllowHeaderFilter=”False” />, por eso prefiero escribir por codigo las etiquetas esta pues sino tendria que hacer en diseñador dale en la pestañita “>” del grid, editar las columas e ir columna por columna en la seccion setings y alli ponerle false a cada columna, peros i me voy al codigo copio y pego esto en cada columna que prefiera que haga eso.

Ahora los formatos, bien aqui tenemos dos tipos de formato que he aplicado uno para las columnas numericas les he puesto formato moneda y tambien le he dado formato a la columna de fecha para que solo muestre la fecha y no la hora, como he conseguido esto pues con la etiqueta: <PropertiesTextEdit DisplayFormatString=”<aqui va el formato>”></PropertiesTextEdit> en la defincion de las columnas asi pueden ver la definicion de la columna “Total desde los datos” en toda su definicion:

<dx:GridViewDataTextColumn Caption=”Total desde los datos” FieldName=”total” VisibleIndex=”7″ >
<HeaderStyle HorizontalAlign=”Center” Wrap=”True” />
<PropertiesTextEdit DisplayFormatString=”c2″></PropertiesTextEdit>
<Settings AllowHeaderFilter=”False” />
</dx:GridViewDataTextColumn>

Como pueden ver le he puesto como formato “c2″ loq ue indica que de tipo momenda (currency) y que estara redondeada a 2 decimales pero como hacerlo con la columna de fecha pues esta es la defincion de la columna fecha:

<dx:GridViewDataDateColumn Caption=”Fecha” FieldName=”fecha” VisibleIndex=”3″>
<PropertiesDateEdit DisplayFormatString=”dd-MM-yyyy”></PropertiesDateEdit>
</dx:GridViewDataDateColumn>

Esta es una columna especial pues la he convertido a una columna de tipo GridViewDataDateColumn, com hacerlo desde el modo diseño pues le das click a la pestaña “>” de la cuadricula y alli modifcas las columans, te posicionas sobre la columna y le das boton derecho elijes “Chage column to” y va a desplegarse un submenu con todos los posibles tipos que puedes aplicar auna columna, recuerdenq ue en el articulo anterior converti de esta manera una columna a una de tipo “Band column”, segundo la etiqueta PropertiesDateEdit DisplayFormatString=”dd-MM-yyyy”></PropertiesDateEdit> hace eso, en este caso le puse que mostrara dia-mes-anio con cuatro digitos para el anio, esta etiqueta soporta todos los formatos que tiene elsplayformat que se explican en la MSDN.

Vamos ahora con los scrolls, bien los scrolls se logran con estas etiquetas en la definicion de la cuadricula:

<Settings ShowHorizontalScrollBar=”True” ShowVerticalScrollBar=”True”
ShowFilterRow=”True”
/>

ShowHorizontalScrollBar=”True”: Muestra el scroll bar horizontal.
ShowVerticalScrollBar=”True”: muestra el scrollbar vertical.

Pero si tengo un pager es un poco raro usar un scroll horizontal, pero podemos desabilitar el pager con esto:

<SettingsPager Mode=”ShowAllRecords” Visible=”False”></SettingsPager>

Lo que le estoy diciendo es que me muestre todos los registros (Mode=”ShowAllRecords”) y que oculte el pager (Visible=”False”), una cosa mas antes de terminar con esto de los scrolls por defecto el tamaño del scroll vertical es de 200, recuerden que el aspxgridview no tiene una propiedad para el alto de la misma asi que como definimos un alto para que salga el scroll, pues con la propiedad VerticalScrollableHeight alli le ponemos el tamaño en pixeles que va atener nuestra cuadricula.

Bien hasta aqui tenemos casi todo el diseño, ahora vamos a los totales, com sonsigo los totales al piede la cuadricula pues con esta etiqueta en la defincion de nuestra cuadricula: <Settings ShowFooter=”True”/> esto haria que apresca la liena de totales o sumario, pero ahora quiero que salgan los totales bajo cada una de las columans que yo defina y como se hace esto con esta etiqueta tambien en la definicion de la cuadricula:

<TotalSummary >
<dx:ASPxSummaryItem FieldName=”importe” ShowInColumn=”importe” SummaryType=”sum” DisplayFormat=”c2″ />
<dx:ASPxSummaryItem FieldName=”igv” ShowInColumn=”igv” SummaryType=”sum” DisplayFormat=”c2″ />
<dx:ASPxSummaryItem FieldName=”total” ShowInColumn=”total” SummaryType=”sum” DisplayFormat=”c2″ />
<dx:ASPxSummaryItem FieldName=”totalcalc” ShowInColumn=”totalcalc” SummaryType=”sum” DisplayFormat=”c2″ />
</TotalSummary>

Bien aqui tienen como he definido los totales para mis columans de esta cuadricula
FieldName=”importe”: Incia que columna voy a totalizar
ShowInColumn=”importe”: indica bajo que columna voy a mostrar el total
SummaryType=”sum”: que tipo de toal voy a mostrar, en este caso es la suma.
DisplayFormat=”c2″: el formato en que se va a mostrar el valor, si no se coloca colocaria en este caso “Sum=valor” cosa que no es muy aceptable.

Por ultimo voy a explicar como hacer una columa que sea el total de otras columnas, bien eso tiene dos partes, primero defino la columna como cualquier otra columna y le pongo un nombre de campo (fieldname) pero se que esta columna no va estar en mi origen de tatos (para el ejemplo mi DataTabe) asi que me voy a la propìedad UnboundType y cambio por el tipo de datos que quiero devolver (se puede hacer facilmente desde el modo diseño de columnas), en este caso le puse decimal ya que las columans que quiero sumas tambien son decimal, con eso hacemos que no me salte el error al ejecuta que la columna no existe ene l origen de datos, pero como hago para que sume las colinas de cada fila, pues aquis i vamos a meter codigo y se hace desde el evento: CustomUnboundColumnData y de esta manera:

Primero selecciono en modo de diseño la cuadricula, cambio a ver los eventos en donde vemos las propiedades, es un simbolo como el de un trueno amarillo, alli me va a mostrar en lugar de las propiedades del objeto los eventos, busco CustomUnboundColumnData y le doy doble click, con eso me crea el evento vacio y alli lo dejo como esta en codigo siguiente:

protected void ASPxGridView1_CustomUnboundColumnData(object sender, DevExpress.Web.ASPxGridView.ASPxGridViewColumnDataEventArgs e)
{
decimal tot = 0;
if (e.Column.FieldName == “totalcalc”)
{
tot += Convert.ToDecimal(e.GetListSourceFieldValue(“importe”));
tot += Convert.ToDecimal(e.GetListSourceFieldValue(“igv”));
e.Value = tot;
}
}

Como pueden ver pregunto su la columna tiene como nombre de campo “totalcalc” que es el nombre de mi columna que esta desenlazada del origen de datos, alli lo que hago es sumar en una variable los cmapos que deseo acumular y luego al final asigo la suma en el contenido de la columna con e.Value = tot, com pueden ver pueden tener mas de una columna que sume o que haga lo que quiera.

Bien espero les sirva, a la proxima de si o si me meto con callbacks.

Acerca de

Antes que nada voy a dejar en claro algo, en este blog escribo como se me place, asi que no busquen errores de ortografia o de redaccion que los van a encontrar a montones y tampoco me critiquen o me digan nada sobre ellos pues no tengo intencion alguna de cambiarlos, lo que escribo lo dejo asi y no lo corrijo,claro esta a menos que sean lineas de codigo. Jorge Prado Anci, profesional en desarrollo de aplicaciones, en especial las dirigidas a bases de datos. He trabajado con VFP en casi todas sus versiones, se algo de Java (que no me gusta, es eso solo no me gusta, es bueno pero no me gusta), lo suficiente de PHP como para tener mi propio CMS(es que sigue sin gustarme por la capacidad de desorden que te permite este “lenguaje”), VB lo conoci y lo deteste tanto que lo olvide al punto de no querer adoptar ni por obligacion a su reemplazante VB .NET (por lo mismo de Java) y si C# este si me encanta y aun que conozco bastante bien el lenguaje, la verdad es que me falta mucho del Framework (del 100% estare en un 65%). Soy un apasionado por el orden (en los proyectos de desarrollo), de la programacion en capas (de MVC conozco pero no he aplicado mucho), los estandares y las condenadas pruebas unitaria. Venga creo que ya con esto fue suficiente.

Tagged with: , , , , , , , , , ,
Publicado en c#, devexpress, Webs Internet
5 comments on “Destripando el ASPXGRIDVIEW 2/3: Totales, colores, formatos y filtros
  1. jonny sant dice:

    muchisimas gracias por continuar con el tema que es muy interesante y me esta ayudando muchisimo para darle a mi aplicacion una vista mas agil con DevExpress, por favor considera en uno de tus post, como seleccionar el valor actual de la columna donde esta posicionado el cursor dentro del grid y llevar los valores de esa fila a otro formulario.

    Muchas Gracias nuevamente

  2. beto dice:

    Hola, sera que usando ASPxGridView es posible hacer la edición de datos de una fila y actualizar los mismos usando un procedimiento almacenado?

  3. […] del año a OpenERP donde intenté definir lo básico de la filosofía de esta herramienta. Luego el segundo post sobre el aspxgridview y con eso acabé el […]

  4. mgonic10 dice:

    amigo esta genial el post y tengo una consulta, asi como tienes los filtros por cada columna el devexpress tiene tambien 1 solo filtro qe es un texbox que busca en todas las columnas, pero por default siempre esta en visible=false, me podrias ayudar como ponerlo siempre en visible=true ya que no encuentro en donde puedo estandarizarlo asi. gracias

  5. Ana Li. dice:

    Hola es muy interesante el tema pero no se donde puedo encontar el DevExpress o la dll para trabajar con el aspxgridview me podrias ayudar estoy empezando en esto de programar y se me hace muy interesante Gracias por tu tiempo y tu apoyo

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Escribe tu dirección de correo electrónico para suscribirte a este blog, y recibir notificaciones de nuevos mensajes por correo.

Únete a otros 441 seguidores

Blog Stats
  • 303,829 hits
A %d blogueros les gusta esto: