Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Tema de Gridview PDF
Tema de Gridview PDF
NET con C#
Servicio de Informática
GRID VIEW
Índice
Introducción .................................................................................................................................. 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 INFORMACIÓN (WEB) ......................................................................................................... 27
1
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
Introducción
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.
Ahora seguimos el asistente para darle configuración al origen de datos. Recuerdo que se van a
crear 2 controles:
2
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
Tras pulsar en siguiente tenemos que asociar a cada acción posible sobre un dato de la base de
datos un evento del objeto.
Con select….
Con update….
3
Programación avanzada en .NET con C#
Servicio de Informática
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 parámetro para el listado es por defecto -1 (por definición en el objeto) para que nos
muestre todo el listado. Si pusiéramos otro filtraría por idcategoria.
Resultado:
4
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
GRIDVIEW
Ahora tenemos relacionado nuestro GridView con el origen de datos. Ya es funcional…
5
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
Listar datos.
Por ejemplo:
6
Programación avanzada en .NET con C#
Servicio de Informática
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 más 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 estarán en
la misma columna.
7
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
Desde comando.
Ilustración 1
Pero si queremos que realmente borre es MUY importante indicar la columna índice
con la propiedad DataKeyNames
8
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
Confirmar borrado:
Debemos primero convertir este campo-columna a plantilla-columna. Para ello, desde Editar
columnas. ¡¡Este cambio no es reversible!!
Ilustración 2
Con esto conseguimos tener muchas más opciones sobre esta columna. Poco a poco iremos
trabajando sobre ellas.
De momento salimos de esta ventana con el botón ok. Localizamos en el código la columna
Delete que hemos convertido en plantilla:
return confirm("¿Seguro?");
En realidad esto se tendría que hacer por programación para determinar el idioma. Para ello
usamos el evento “PreRender” del control que dispara el delete.
9
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
Ejercicio 1:
Partiendo de los objetos de la figura 1, consigue este GridView:
Donde :
Modificar / Editar
De forma parecida a borrar podemos insertar una opción de “Habilitar edición”.
Es mejor añadir un nuevo campo (añadir nuevo campo) que hacerlo con habilitar edición:
Ilustración 3
10
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
Si habilitamos edición y borrado, por ejemplo, ambas opciones irán en la misma columna. Sin
embargo si añadimos 2 commadField cada comando irá en una columna independiente.
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 cambiar el TextBox por un DropDownList debemos transformar la columna en plantilla tal
y como se indica en la ilustración 2.
11
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
Ilustración 4
12
Programación avanzada en .NET con C#
Servicio de Informática
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.
Ahora quedaría cambiar la apariencia de lo que muestra por defecto el GridView en esa
columna.
Si lo que queremos es modificar algún 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>
Ejercicio 2:
Partiendo de los objetos de la figura 1 y el ejercicio 1, consigue este GridView:
Y al editar un registro
13
Programación avanzada en .NET con C#
Servicio de Informática
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 opción podemos mantener unos datos con un formulario independiente al GridView,
por ejemplo. O podemos resumir el botón de borrado de manera que sólo aparezca una vez y
que al pulsarlo elimine el registro seleccionado.
14
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
Para poder borrar desde fuera del GridView necesitamos un control con comportamiento de
botón (linkButton, imageButton o Button) que será donde pongamos el código de borrado.
15
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
Donde:
• GridView1.DataBind();
En el ejercicio 2 trasformábamos IdCategoria en su descripción usando la
ClaseCategoria.
Si no ponemos esta línea 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 código (1). Al intentar volver a trasformar el valor trasformado el resultado es un
error.
Esta línea vendría mejor en el evento de RowCommand. Cualquier comando que se
ejecuta en un GridView pasa primero por aquí. Por ello esta sería 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 debería usarse GridView1.SelectedDataKey.Values
• ObjectDataSource1.DeleteParameters["Codigo"].DefaultValue
A través de código alteramos el parámetro 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 programación. Esta orden se da al
objeto de base de datos.
Ejercicio 3:
Pensar cómo hacer una selección múltiple.
Paginar datos
Otra de las opciones que posee el GridView es la de paginar. Para ello basta con permitir la
paginación o bien desde “Habilitar Paginación” o bien desde la propiedad “AllowPaging”.
Por defecto nos presentará los datos de 10 en 10, para cambiar el valor del pageSize.
16
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
17
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
Para cambiar de página usamos los controles de botón (ImageButton, LinkButton o Button).
18
Programación avanzada en .NET con C#
Servicio de Informática
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 botón que trabaje en “TemplatePage”. Por ello se pide este
paginado especial, incompatible con el que trae el GridView por defecto.
Estamos en la página 3:
Estamos en la página 1:
Estamos en la página 5:
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 ordenación que trae por defecto.
Para ello:
19
Programación avanzada en .NET con C#
Servicio de Informática
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 ordenación. Normalmente se deja el nombre del campo que
es la opción por defecto.
3.- Si ejecutamos la página observaremos que la ordenación que trae por defecto genera un
error. Por ello debemos apoderarnos de esa ordenación. Para ello programamos el evento
Sorting (no confundir con Sorted) que es lo que hará en cuanto pulsamos la opción de ordenar.
20
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
A esta función 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 continuación de la ordenación automática que lleva gridView para saltar el
error:
e.Cancel = true;
GridView1.DataBind();
Label3.Text = ObjectDataSource1.SelectParameters["campoOrden"].
DefaultValue.ToString();
Ejercicio 5:
Con ayuda del parámetro “tipoOrden” que tiene ObjectDataSource hacer que la ordenación
sea ascendente (el valor del parámetro será “asc”)/descendente (el valor del parámetro será
“desc”) cada vez que se vuelve a pulsar sobre una columna ordenada.
21
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
Insertar
GridView no trae por defecto un sistema de inserción. Por ello deberemos programarlo. La
forma que yo propongo es aprovechar el FooterRow.
El resultado será:
Modo de inserción:
1.- Convertimos a plantilla los campos que recogerán datos (ver ilustración 2):
22
Programación avanzada en .NET con C#
Servicio de Informática
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.
23
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
}
}
4.- Programamos ahora los botones de Aceptar (InsAceptar) (Cancelar se deja como ejercicio).
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 instrucción obligamos que GridView vaya a la última página
GridView1.PageIndex = GridView1.PageCount;
}
}
GridView1.DataBind();
}
24
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
Sin datos
Para poder ver qué ocurre cuando no hay datos cambiamos el parámetro del select a uno que
no existe.
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.
25
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
Aap
26
Programación avanzada en .NET con C#
Servicio de Informática
GRID VIEW
Destacamos la propiedad DataFormatString que permite dar formato a los datos poniendo
{0:format string} , por ejemplo {0:0000} Para ver la colección de formaos recurriremos a:
http://msdn.microsoft.com/es-es/library/fbxft59x.aspx
Ojo: que se podrá acceder sólo si no se ha convertido en plantilla. Si fuera así habría que
recurrir a tocar la propiedad del label:
EJERCICIO AJAX(filtrar)
27