Tema de Gridview

Programacin avanzada en .
NET con C#

Servicio de Informtica
GRID VIEW

1

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#

GRID VIEW

2
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:


GRID VIEW

3
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.

GRID VIEW

4
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="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="Nombre" Type="String" />
<asp:Parameter Name="IdCategoria" Type="Int32" />
<asp:Parameter Name="Ciencias" Type="Boolean" />
</UpdateParameters>
</asp:ObjectDataSource>


GRID VIEW

5
Para modificar el ObjectDataSource:

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


GRID VIEW

6
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:


GRID VIEW

7

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.

GRID VIEW

8

Desde comando.

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


GRID VIEW

9
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.

GRID VIEW

10

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

GRID VIEW

11
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

GRID VIEW

12

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.


GRID VIEW

13
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.

GRID VIEW

14
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:

GRID VIEW

15

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();

GRID VIEW

16
}

Donde:
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.

GRID VIEW

17


GRID VIEW

18
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/es-
es/library/system.web.ui.webcontrols.gridview.pagertemplate%28VS.80%29.aspx
Valor CommandArgument

Descripcin

"Next"

Se desplaza a la pgina siguiente.

"Prev"

Se desplaza a la pgina anterior.

"First"

Se desplaza a la primera pgina.
"Last"

Se desplaza a la ltima pgina
Valor entero

Se desplaza al nmero de pgina especificado


GRID VIEW

19

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 (<<).

Desde aqu podemos ir a las pginas 5 (la ltima) o a la 4.


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.

GRID VIEW

20

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.

GRID VIEW

21

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

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.


GRID VIEW

22

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):


GRID VIEW

23
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)
{
if (e.CommandName == "Insertar")
{
GridView1.FooterRow.Visible = true;
((LinkButton)GridView1.BottomPagerRow.
FindControl("Insertar")).Visible = false;

GRID VIEW

24
}
}

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;
FindControl("Insertar")).Visible = false;
}

if (e.CommandName == "InsAceptar")
{
ObjectDataSource1.Insert();
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;

}

GRID VIEW

25

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

GRID VIEW

26
Aap

Y para las columnas:


GRID VIEW

27
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/es-
es/library/system.web.ui.webcontrols.gridview.pagertemplate%28v=vs.80%29.aspx

Tema de Gridview

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema de Gridview

Cargado por

Copyright:

Formatos disponibles

Programacin avanzada en .

También podría gustarte