Control personalizado ASP.NET DataGridDesplazable
Extensión del objeto System.Web.UI.WebControl.DataGrid para agregar funcionalidad de desplazamiento (scrolling) vertical y horizontal en su contenido en aplicaciones ASP.NET

Fecha: 18/Oct/2004 (18/Oct/04)
Autor: Haaron Gonzalez, e-mail: haarongonzalez@hotmail.com,
weblog: http://weblogs.golemproject.com/hgonzalez/

 


 

Introducción

Continuando con la serie de artículos sobre controles de servidor personalizados hoy hablaremos sobre el control DataGrid, pero antes de continuar, si aun no has visto los artículos anteriores, aquí esta la lista:

En este tercer artículo veremos como extender la funcionalidad del objeto  System.Web.UI.WebControls.DataGrid para permitir el desplazamiento del contenido vertical y horizontalmente, por ejemplo hay ocasiones donde necesites mostrar muchas columnas y no tenemos el espacio suficiente para hacerlo, bien pues agregando cierto tag HTML con medidas especificas de ancho y de alto podemos lograr que cuando el contenido del datagrid sea mayor a las medidas especificadas, aparezca una barras de desplazamiento horizontal y/o vertical según sea el caso.

La Solución

Para fines prácticos y de seguimiento utilizaremos la solución y proyectos creados en los artículos de esta serie mencionados anteriormente así que si no cuentas con ello empieza por ahí y cuando termines deberás contar con la siguiente estructura:

Selecciona el proyecto ControlesWeb creamos una clase de nombre:  DataGridDesplazable y escribimos el siguiente código:

En este código vemos la definición de dos propiedades públicas con sus miembros privados de tipo string las cuales nos sirven para definir el ancho y alto inicial y sobre el cual ocurre el desplazamiento, dejamos un tamaño predeterminado de 100px de alto y 100px de ancho:

  • WidthDesplazable: Es la propiedad con la cual definimos el ancho del marco que contendrá el datagrid de tal forma que si el contenido del datagrid es de 400px y quieres mostrarlo en un marco de 200px aparecerá la barra de desplazamiento vertical.
  • HeightDesplazable: Es la propiedad con la cual definimos lo alto del marco que contendrá el datagrid de tal forma que si los renglones de tu datagrid son muchos y sobrepasan el al alto del marco aparecerá la barra de desplazamiento vertical.

Sobrescribimos el sub procedimiento Render para escribir código encargado de generar código HTML apropiado para ofrecer la funcionalidad de desplazamiento. Por cierto el sub procedimiento Render envía el contenido del control a un objeto de tipo HtmlTextWriter el cual escribe una serie secuencial de caracteres HTML y texto en una pagina de formulario Web. La clase HtmlTextWriter provee de capacidades de formato que los controles de servidor ASP.NET utilizan cuando se renderiza contenido HTML en el cliente.

Una vez escrito el código compilemos el proyecto y generamos nueva versión del archivo ControlesWeb.dll ubicado en el fólder Bin del proyecto ControlesWeb

En el proyecto TestControlesWeb y agrega un nuevo formulario llamado WebForm3.aspx y expande el elemento References y seleccionamos ControlesWeb damos clic derecho y lo removemos. Ahora seleccionamos y damos doble clic en el WebForm3.aspx y en la ventana Toolbox presiona botón derecho del ratón y damos clic para seleccionar la opción Add and Remove Items. Buscamos y seleccionamos el archivo ControlesWeb.dll, damos clic en el titulo Namescape de la columna y se ordenara la lista de controles apareciendo al principio nuestros tres controles de servidor personalizados.

 

Ahora con solo arrastrar y soltar el control se mostrará en el formulario Web nuestro control personalizado, debido a que este nuevo control hereda del objeto DataGrid cuenta con todas las propiedades originales del control DataGrid más las dos nuevas propiedades definidas anteriormente, una recomendación importante es que utilicen apropiadamente las nuevas propiedades para establecer el tamaño del área, como se muestra en la siguiente figura.

Definiremos algunas propiedades de estilo visual para hacer un poco más atractivo nuestro DataGridDesplazable1. Selecciona el control DataGridDesplazable1 y da clic derecho del ratón, aparecerá un menú y selecciona la opción Auto Format.

Aparece otra ventana con una serie de esquemas de presentación visual para el DataGrid desplázate hasta el final y selecciona Classic 2 y presiona Ok.

Ahora tendrás que escribir algo de código para vincular en tu control DataGridDesplazable1 alguna información. Para ello nos conectaremos a la base de datos northwind desde el evento Page_Load del WebForm3.aspx y escribiremos el siguiente código:

Ahora si tienes todo listo para ejecutar la aplicación y ver funcionando tu control personalizado  DataGridDesplazable1 verifica que ahora aparece una barra desplazable vertical. 

Conclusión

En este artículo vimos como extender la funcionalidad del control System.Web.UI.WebControl.DataGrid para agregar funcionalidad de desplazamiento vertical y horizontal sobre el contenido de la información presentada.

 


ir al índice