Programacin avanzada en .

NET con C#
Servicio de Informtica

GRID VIEW

ndice
Introduccin .................................................................................................................................. 2 OBJECT DATE SOURCE ............................................................................................................... 3 GRIDVIEW .................................................................................................................................. 5 Mantener una base de datos ........................................................................................................ 6 Listar datos. ............................................................................................................................... 6 Eliminar ..................................................................................................................................... 7 Ejercicio 1: ............................................................................................................................... 10 Modificar / Editar .................................................................................................................... 10 Ejercicio 2: ............................................................................................................................... 13 Seleccionar .............................................................................................................................. 14 Ejercicio 3: ............................................................................................................................... 16 Paginar datos........................................................................................................................... 16 Ejercicio 4: ............................................................................................................................... 19 Ordenar datos ......................................................................................................................... 19 Ejercicio 5: ............................................................................................................................... 21 Insertar .................................................................................................................................... 22 Sin datos .................................................................................................................................. 25 Ejercicio 6: ............................................................................................................................... 25 Apariencia ............................................................................................................................... 25 EJERCICIO AJAX(filtrar) ................................................................................................................ 27 MAS INFORMACIN (WEB) ......................................................................................................... 27

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW

Introduccin
Muestra los valores de un origen de datos en una tabla donde cada columna representa un campo y cada fila representa un registro. El control GridView permite seleccionar, ordenar y modificar estos elementos. Pasos para crear un GridView desde un objeto crearemos dos controles: un origen de datos (ObjectDataSource) y el GridView propiamente dicho. Pero si no tenemos nada en la pgina lo ms fcil es arrastrar un GridView nuevo y l se encargar del ObjectDataSource y de vincularlos. Tras arrastrar el GridView a la vista de diseo de Visual Studio veremos:

Presuponemos que trabajamos con clases, por lo que elegimos:

Ahora seguimos el asistente para darle configuracin al origen de datos. Recuerdo que se van a crear 2 controles:

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW

OBJECT DATE SOURCE

Elegimos el objeto que tiene conexin con la base de datos

Tras pulsar en siguiente tenemos que asociar a cada accin posible sobre un dato de la base de datos un evento del objeto. Con select.

Con update.

Igual con Insert y Delete.

3

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW
Veremos que con GridView no se puede insertar un registro, pero nada nos impide ponerlo en control de DataSource por si le asociamos otro control de datos (FormView o DataView). El parmetro para el listado es por defecto -1 (por definicin en el objeto) para que nos muestre todo el listado. Si pusiramos otro filtrara por idcategoria.

Resultado:

<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DeleteMethod="DeleteSubCategoria" InsertMethod="InsertSubCategoria" SelectMethod="FiltrarSubCategoria" TypeName="ClaseSubCategorias" UpdateMethod="UpdateSubCategoria"> <DeleteParameters> <asp:Parameter Name="Codigo" Type="Int32" /> </DeleteParameters> <InsertParameters> <asp:Parameter Name="Codigo" Type="Int32" /> <asp:Parameter Name="Nombre" Type="String" /> <asp:Parameter Name="IdCategoria" Type="Int32" /> <asp:Parameter Name="Ciencias" Type="Boolean" /> </InsertParameters> <SelectParameters> <asp:Parameter DefaultValue="-1" Name="Codigo" Type="Int32" /> </SelectParameters> <UpdateParameters> <asp:Parameter Name="Codigo" Type="Int32" /> <asp:Parameter Name="Nombre" Type="String" /> <asp:Parameter Name="IdCategoria" Type="Int32" /> <asp:Parameter Name="Ciencias" Type="Boolean" /> </UpdateParameters> </asp:ObjectDataSource>

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW
Para modificar el ObjectDataSource:

GRIDVIEW
Ahora tenemos relacionado nuestro GridView con el origen de datos. Ya es funcional

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW

Mantener una base de datos

Lo fundamental para trabajar con una base de datos es:

Listar datos.

Un dataGrid tiene estos tipos de columnas: BoundField: Utiliza una etiqueta y un TextBox para presentar y editar el valor. CheckboxField: Casilla de opcin para editar el valor. HyperLinkField: El valor de la columna se utiliza para formatear un hipervnculo. ImageField: Parmetros para mostrar una imagen. ButtonField: Parmetros para mostrar un botn. CommandField:Acciones sobre GridView: seleccin, edicin, validacin, anulacin y eliminacin.

ImageField y HyperLinkField funcionan con plantillas. En ambos me pregunta por un campo y por una plantilla de la forma texto{0}, donde {0} ser reemplazado por el valor del campo que hemos elegido. Por ejemplo:

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW

Podemos trabajar con las columnas desde Editar columnas. Desde all podremos crear nuevas columnas, reordenar las que hay, modificar sus propiedades, eliminar columnas y convertirlas en plantillas, algo que veremos ms adelante.

Eliminar
Podemos insertar una nueva coluna CommandField o permitir el borrado desde las propiedades de GridView. Pero hay una diferencia, si elegimos columnas cada comando tendr su propia columna. Si elegimos desde propiedades de GridView todos los comandos estarn en la misma columna. Desde propiedades GridView.

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW

Desde comando.

Ilustracin 1

Pero si queremos que realmente borre es MUY importante indicar la columna ndice con la propiedad DataKeyNames

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW
Confirmar borrado: Debemos primero convertir este campo-columna a plantilla-columna. Para ello, desde Editar columnas. Este cambio no es reversible!!

Ilustracin 2

Con esto conseguimos tener muchas ms opciones sobre esta columna. Poco a poco iremos trabajando sobre ellas. De momento salimos de esta ventana con el botn ok. Localizamos en el cdigo la columna Delete que hemos convertido en plantilla:

Localizamos la de OnClientClick y escribimos una lnea de javaScript: return confirm("Seguro?"); En realidad esto se tendra que hacer por programacin para determinar el idioma. Para ello usamos el evento PreRender del control que dispara el delete.

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW

Ejercicio 1:
Partiendo de los objetos de la figura 1, consigue este GridView:

Donde : la columna Google te llevar a hacer una bsqueda en Google del nombre de la asignatura, por supuesto en una nueva ventana. Borrar pedir confirmacin.

Modificar / Editar
De forma parecida a borrar podemos insertar una opcin de Habilitar edicin. Es mejor aadir un nuevo campo (aadir nuevo campo) que hacerlo con habilitar edicin:

Ilustracin 3

10

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW
Si habilitamos edicin y borrado, por ejemplo, ambas opciones irn en la misma columna. Sin embargo si aadimos 2 commadField cada comando ir en una columna independiente.

Pero si queremos que realmente actualice al pulsar sobre aceptar es MUY importante indicar la columna ndice con la propiedad DataKeyNames

Es muy posible que al editar queramos que los controles que aparezcan sean diferentes a los que el DataGrid nos ofrece. Por ejemplo podemos querer que no se edite o que en lugar de un checkbox sea un DropDownList. Para evitar que se edite:

Para cambiar el TextBox por un DropDownList debemos transformar la columna en plantilla tal y como se indica en la ilustracin 2. Luego elegimos Editar Plantillas

11

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW

Ilustracin 4

De la columna 5 IdCategoria que es la que queremos cambiar elegimos EditItemTemplate y ponemos (arrastrando) un DropDownList. Este lo asociaremos a un nuevo ObjectDataSource con la clase ClaseCategorias. La dificultad es la de vincular este control de dentro de la plantilla con la columna del GridView.

12

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW
Escribimos en Editar enlaces de datos (Edit data bindind). Podemos usar enlace de datos bidireccional (Bind) o unidireccional (Eval). Como se trata de un control usamos bidireccional. Si eligiramos escribir la expresin de cdigo tendramos que poner Bind(IdCategoria)

Ahora quedara cambiar la apariencia de lo que muestra por defecto el GridView en esa columna. Para esto cambiamos la plantilla de la ilustracin 4 a ItemTemplate y trabajar poniendo o quitando controles. Si lo que queremos es modificar algn atributo del control que se muestra se debe acudir al evento PreRender del control de la plantilla.
<ItemTemplate> <asp:Label ID="Label1" runat="server" Text= '<%# Bind("IdCategoria") %>' onprerender="Label1_PreRender" > </asp:Label> </ItemTemplate> protected void Label1_PreRender(object sender, EventArgs e) { Label m = (Label)sender; m.Text = Soy + m.Text; }

Ejercicio 2:
Partiendo de los objetos de la figura 1 y el ejercicio 1, consigue este GridView:

Y al editar un registro

Se trata de trasformar IdCategoria usando la ClaseCategoria de un nmero a la descripcin.

13

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW
Hay que validar que cuando se edite nombre el texto tenga al menos 3 caracteres, en caso contrario que de un aviso y que no deje actualizar.

Seleccionar
Otra de las opciones que posee el GridView es la de seleccionar. Con esta opcin podemos mantener unos datos con un formulario independiente al GridView, por ejemplo. O podemos resumir el botn de borrado de manera que slo aparezca una vez y que al pulsarlo elimine el registro seleccionado. Primero aadimos una nueva columna de seleccionar (ver ilustracin 1). Jugamos con la apariencia de la fila seleccionada:

Modificamos el comportamiento del GridView desde sus propiedades:

14

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW

Ojo con confundir SelectIndexChanged con SelectIndexChanging que se ejecuta antes de conocer cul es el valor de DataKeyName de la fila seleccionada. En el momento Changing slo se conoce el ndice de la fila sobre al que se ha pulsado (NewSelectedIndex).

Para poder borrar desde fuera del GridView necesitamos un control con comportamiento de botn (linkButton, imageButton o Button) que ser donde pongamos el cdigo de borrado.

Y en el cdigo de C# del CS ponemos:

protected void GridView1_SelectedIndexChanged(object sender, EventArgs e) { //Redibuja el GridView GridView1.DataBind(); ClaseSubCategoria MiClaseSubC = new ClaseSubCategoria(); MiClaseSubC.Carga( double.Parse(GridView1.SelectedDataKey.Value.ToString()) ); Reborra.Visible = true; Reborra.Text = "Desea borrar " + MiClaseSubC.Nombre + "?"; Reborra.OnClientClick = "return confirm('Seguro')"; } protected void Reborra_Click(object sender, EventArgs e) { ObjectDataSource1.DeleteParameters["Codigo"].DefaultValue = GridView1.SelectedDataKey.Value.ToString(); ObjectDataSource1.Delete();

15

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW
}

Donde:

GridView1.DataBind(); En el ejercicio 2 trasformbamos IdCategoria en su descripcin usando la

ClaseCategoria. Si no ponemos esta lnea el GridView reutiliza el contenido de las celdas sin recargar los datos. Esto implica que le llegue el valor ya trasformado (Matematicas) en lugar del cdigo (1). Al intentar volver a trasformar el valor trasformado el resultado es un error. Esta lnea vendra mejor en el evento de RowCommand. Cualquier comando que se ejecuta en un GridView pasa primero por aqu. Por ello esta sera la plataforma para crear nuevos comandos (ver punto de insertar).
GridView1.SelectedDataKey.Value En el momento que seleccionamos una columna esta propiedad toma el valor del campo clave que se indic en GridView como DataKeyNames. Si fuera un campo clave compuesto debera usarse GridView1.SelectedDataKey.Values ObjectDataSource1.DeleteParameters["Codigo"].DefaultValue A travs de cdigo alteramos el parmetro de borrado del objeto de base de datos (ObjectDataSource) que estamos usando de base para el GridView. ObjectDataSource1.Delete(); Ejecutamos la orden de borrado desde programacin. Esta orden se da al objeto de base de datos.

Ejercicio 3:
Pensar cmo hacer una seleccin mltiple.

Paginar datos
Otra de las opciones que posee el GridView es la de paginar. Para ello basta con permitir la paginacin o bien desde Habilitar Paginacin o bien desde la propiedad AllowPaging. Por defecto nos presentar los datos de 10 en 10, para cambiar el valor del pageSize.

16

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW

17

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW
En caso de querer personalizar la numeracin de pginas deberemos recurrir a la plantilla Pager Template

Y desde programacin podremos jugar con las propiedades: GridView1.PageCount: Indica el nmero de pginas que hay. GridView1.PageIndex: Indica la pgina en la estamos.

Para cambiar de pgina usamos los controles de botn (ImageButton, LinkButton o Button).

Podemos dar como valor a CommandName Page y a ComandArgument segn la tabla siguiente http://msdn.microsoft.com/eses/library/system.web.ui.webcontrols.gridview.pagertemplate%28VS.80%29.aspx Valor CommandArgument "Next" "Prev" "First" "Last" Valor entero Descripcin Se desplaza a la pgina siguiente. Se desplaza a la pgina anterior. Se desplaza a la primera pgina. Se desplaza a la ltima pgina Se desplaza al nmero de pgina especificado

18

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW

Ejercicio 4:
Nota: Para este ejercicio establecer el PageSize del GridView a 5 (en lugar de 10 de por defecto). Para insertar necesitaremos un botn que trabaje en TemplatePage. Por ello se pide este paginado especial, incompatible con el que trae el GridView por defecto. Estamos en la pgina 3: Se sabe porque el linkButton est desactivado y enmarcado en rojo. Podemos ir a la primera pgina (<<) o a la ltima (<<).

Estamos en la pgina 1: Desde aqu podemos ir a las pginas 5 (la ltima) o a la 4.

Estamos en la pgina 5:

Desde aqu podemos ir a la pgina 1 o 2.

Ordenar datos
Otra de las opciones que posee el GridView es la de ordenar. La forma de pasar los datos al GridView hace incompatible la ordenacin que trae por defecto. As deberemos programar la ordenacin. Para ello: 1.- Permitimos la ordenacin tocando la propiedad AllowSorting del GridView.

19

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW

2.- Si deseamos que alguna columna no sea ordenable debemos editarla y eliminar el contenido de SortExpression. Este valor ser muy importante pues ser el que le pasemos al ObjectDataSource para hacer la ordenacin. Normalmente se deja el nombre del campo que es la opcin por defecto.

3.- Si ejecutamos la pgina observaremos que la ordenacin que trae por defecto genera un error. Por ello debemos apoderarnos de esa ordenacin. Para ello programamos el evento Sorting (no confundir con Sorted) que es lo que har en cuanto pulsamos la opcin de ordenar.

20

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW

A esta funcin se le pasan 2 parametros, el control que hace la llamada (un linkButton) llamado sender y los argumentos llamados GridViewSortEventArgs. Debemos pasar al ObjectDataSource el argumento del GridViewSortEventArgs SortExpresion:
ObjectDataSource1.SelectParameters["campoOrden"].DefaultValue = e.SortExpression.ToString();

Y luego paramos la continuacin de la ordenacin automtica que lleva gridView para saltar el error:
e.Cancel = true;

Para solventar el problema de la columna calculada deberemos poner

GridView1.DataBind();

Para saber la columna que est ordenando podemos usar:

Label3.Text = ObjectDataSource1.SelectParameters["campoOrden"]. DefaultValue.ToString();

Ejercicio 5:
Con ayuda del parmetro tipoOrden que tiene ObjectDataSource hacer que la ordenacin sea ascendente (el valor del parmetro ser asc)/descendente (el valor del parmetro ser desc) cada vez que se vuelve a pulsar sobre una columna ordenada.

21

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW

Insertar
GridView no trae por defecto un sistema de insercin. Por ello deberemos programarlo. La forma que yo propongo es aprovechar el FooterRow. El resultado ser: Modo de presentacin de datos:

Modo de insercin:

Los pasos que debemos seguir son: 1.- Convertimos a plantilla los campos que recogern datos (ver ilustracin 2):

22

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW
2.- Editamos FooterTemplate de todos los campos y all ponemos los controles que nos hagan falta a la hora de insertar. Normalmente basta con copiar EditItemTemplate cambiando el nombre del control con la propiedad ID.

3.- Insertamos un LinkButton (insertar) en PagerTemplate. Se trata de un comando que est dentro de GridView y por ello requiere que se trate como tal. Por ello su accin la programamos en RowCommand del GridView. Para ello ponemos en ese LinkButton (insertar) que la propiedad CommandName vale Insertar.

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e) { GridView1.DataBind(); if (e.CommandName == "Insertar") { GridView1.FooterRow.Visible = true; ((LinkButton)GridView1.BottomPagerRow. FindControl("Insertar")).Visible = false;

23

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW
} }

GridView1.DataBind(); Pinchemos donde pinchemos queremos que actualice los datos del GridView. GridView1.FooterRow.Visible = true; Hacemos la lnea del formulario que acabamos de crear visible.

((LinkButton)GridView1.BottomPagerRow.FindControl("Insertar")).Visible = false; Con esto ocultamos el botn de insertar.

4.- Programamos ahora los botones de Aceptar (InsAceptar) (Cancelar se deja como ejercicio).

protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e) { if (e.CommandName != "InsAceptar") GridView1.DataBind(); if (e.CommandName == "Insertar") { GridView1.FooterRow.Visible = true; ((LinkButton)GridView1.BottomPagerRow. FindControl("Insertar")).Visible = false; } if (e.CommandName == "InsAceptar") { ObjectDataSource1.Insert(); ((LinkButton)GridView1.BottomPagerRow. FindControl("Insertar")).Visible = true; //Con esta instruccin obligamos que GridView vaya a la ltima pgina GridView1.PageIndex = GridView1.PageCount; } } protected void ObjectDataSource1_Inserting(object sender, ObjectDataSourceMethodEventArgs e) { e.InputParameters["Nombre"] = ((TextBox)GridView1.FooterRow.FindControl("INombre")).Text; e.InputParameters["Ciencias"] = (((CheckBox)GridView1.FooterRow.FindControl("ICiencias")).Checked) ? "True" : "False"; e.InputParameters["IdCategoria"] = ((DropDownList)GridView1.FooterRow.FindControl("IIdCategoria")). SelectedValue; GridView1.DataBind(); }

24

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW

Sin datos
Para poder ver qu ocurre cuando no hay datos cambiamos el parmetro del select a uno que no existe.

Ahora deberamos rellenar la plantilla

El problema est en la opcin de insertar el primero. Para ello la clase ClaseSubCategoria lleva un registro falso que se alcanza poniendo a FiltrarSubCategoria el cdigo a -2.

Ejercicio 6:
Conseguir que pinchando sobre Insertar el primero aparezca una el footerRow con el formulario para insertar el primer dato.

Apariencia
Existen multitud de opciones dentro de un GridView que nos permitir personalizar la apariencia a nuestro gusto. Para la apariencia global

25

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW

Aap

Y para las columnas:

26

Programacin avanzada en .NET con C#

Servicio de Informtica

GRID VIEW
Destacamos la propiedad DataFormatString que permite dar formato a los datos poniendo {0:format string} , por ejemplo {0:0000} Para ver la coleccin de formaos recurriremos a: http://msdn.microsoft.com/es-es/library/fbxft59x.aspx Ojo: que se podr acceder slo si no se ha convertido en plantilla. Si fuera as habra que recurrir a tocar la propiedad del label:

EJERCICIO AJAX(filtrar)
Todo lo explicado anteriormente se puede trabajar bajo AJAX. Se propone crear un campo DropDownList que actualice el parmetro del select de ObjectDataSource bajo AJAX, de manera que solo muestre los registros del select elegido.

MAS INFORMACIN (WEB)

http://msdn.microsoft.com/eses/library/system.web.ui.webcontrols.gridview.pagertemplate%28v=vs.80%29.aspx
27