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:

• Control personalizado ASP.NET MessageBox 
• Control personalizado ASP.NET TextBoxNumerico 

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.