Ajax Toolkit: Accordion Control

Ajax Toolkit

Al fin después de una larga espera desde que vimos la introducción al Ajax Toolkit, aquí tenemos la primera entrega de los posts dedicados a los controles de Ajax Toolkit. En esta primera entrega hablaremos sobre el controla llamado Accordion Control.

 

¿Qué es Accordion Control?

Este control nos permite definir múltiples paneles en un solo conjunto, dándonos la habilidad de poder ver el contenido de cada panel de manera individual. Es como tener muchos paneles que puedan contraerse, donde solo uno puede mostrarse a la vez. Este control es implementado como un Web Control que contiene controles web de tipo AccordionPane. Cada AccordionPane tiene un template (una plantilla) para su encabezado y su contenido, por lo cual podemos mostrar la información de la manera que más nos guste y creamos más conveniente. Otra característica que nos brinda este control es que mantendrá el estado del control aun después de que suceda un postback, es decir que veremos el mismo panel que hayamos seleccionado antes de que éste sucediera.

Cabe señalar que dentro de cada panel además de texto o imágenes podemos tener cualquier otro control que queramos, inclusive otro Accordion Panel. El contenido de dicho control puede auto ajustarse de tres maneras diferentes lo cual nos brinda la posibilidad de ajustar el contenido de nuestros paneles de la manera que más nos agrade. A continuación las detallo:

  • None: El panel crece o se encoge sin restricción alguna. Lo cual puede causar que algún otro control de nuestra página se mueve junto con el contenido de nuestro panel.
  • Limit: El panel nunca crecerá más de lo que se le haya especificado en su propiedad de altura (height). Al usar este tipo de auto ajuste, debemos tener en cuenta que mientras más grande sea el contenido de nuestro panel, el scroll para verlo será de la misma dimensión.
  • Fill: Usando este modo el panel siempre tendrá exactamente el mismo tamaño que se le haya especificado en su propiedad de altura (height). Esto puede ocasionar que el contenido del panel no se muestre de manera correcta, los controles se expandan o se contraigan incorrectamente.

Otra de las características que nos ofrece este control es que podemos asignarle un enlace a datos, esto lo hacemos simplemente a través de sus propiedades DataSource o DataSourceID, y después asignándoles valor a nuestros Data Items que estarán dentro de las propiedades HeaderTemplate y ContentTemplate de nuestro control.

 

A continuación detallaré las propiedades que pueden ser configuradas en el control:

  • AutoSize: restringe el crecimiento del contenido del Accordeon Control. Las opciones del valor que puede contener esta propiedad se detallaron más arriba.
  • ContentCssClass: nombre de la clase css que será usada por el contenido del panel. El valor de esta propiedad puede ser asignado de manera individual a cada panel o de manera general asigandoselo al Accordion Control.
  • ContentTemplate: contiene el formato que deben tener los elementos del panel cuando al control se le asigne un enlace a datos.
  • DataMember: el miembro a enlazar a un dato cuando se usa la propiedad DataSourceID.
  • DataSource: la fuente de datos que será usada.
  • DataSourceID: el id de la fuente de datos a ser usada.
  • FadeTransitions: verdadero (true) si se desea usar el efecto de fade al seleccionar un panel, falso (false) si se desea usar el efecto por defecto.
  • FramesPerSecond: es el número de cuadros por segundo que se usaran en la transición de las animaciones.
  • HeaderCssClass: nombre de la clase css que será usada en los encabezados de los paneles. Al igual que la propiedad ContentCssClass esta propiedad puede asignarse de manera individual o general.
  • HeaderSelectedCssClass: nombre de la clase css que será usada para el encabezado del panel que este seleccionado, puede aplicarse de manera individual o general.
  • HeaderTemplate: contiene el formato que deben tener los elementos del encabezado cuando al control se le asigne un enlace a datos.
  • Panes: es la colección de paneles que contendrá el Accordion Control.
  • RequireOpenedPane: previene que el panel actual se cierre al dar clic en su encabezado (lo cual nos asegura que siempre estará visible un panel). El valor por defecto es verdadero (true).
  • SelectedIndex: es el índice del panel que queremos que este seleccionado por defecto.
  • SuppressHeaderPostbacks: previene que los manejadores por el lado del cliente se disparen en el encabezado, esto nos sería útil cuando tengamos links en nuestro encabezado, así evitaríamos un postback en nuestra página.
  • TransitionDuration: numero de milisegundos que durara la animación entre la transición de un panel a otro.
 

Hagamos un ejemplo paso a paso:

* Paso número uno: Ahora que ya conocemos un poco del Accordion control vamos a lo interesante. Antes que nada lo primero que debemos hacer para usar cualquier control del Ajax Toolkit en nuestras páginas es agregar un ToolkitScriptManager. Este control lo podemos arrastrar de nuestra barra de herramientas, este control está localizado en la pestaña donde se encuentren nuetros controles del Ajax Toolkit, a continuación se muestra un ejemplo de cómo debería verse:

<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">  
</asp:ToolkitScriptManager>

* Paso número dos: Añadir un Accordion Control a la pagina, también podemos arrastrarlo de nuestra barra de herramientas o hacer doble clic sobre él para agregarlo a nuestra página:

<asp:Accordion ID="Accordion1" runat="server">  
</asp:Accordion>

* Paso número tres: Ahora vamos a agregar unos cuantos paneles a nuestro acordeón, noten que cada panel contiene las etiquetas content y header:

<asp:Accordion ID="Accordion1" runat="server">
<Panes>  
<asp:AccordionPane runat="server">  
<Header>Pane 1</Header>  
<Content>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.  
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.              
</Content>  
</asp:AccordionPane>  
<asp:AccordionPane ID="AccordionPane1" runat="server">  
<Header>Pane 2</Header>  
<Content>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.  
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.  
</Content>  
</asp:AccordionPane>  
<asp:AccordionPane ID="AccordionPane2" runat="server">  
<Header>Pane 3</Header>  
<Content>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.  
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.  
</Content>  
</asp:AccordionPane>  
</Panes>  
</asp:Accordion>

* Paso número cuatro: Agreguemos un estilo (css) a nuestro acordeón, para que sea agradable a la vista:

.accordion { width: 400px;  }  
.accordionHeader { border: 1px solid #2F4F4F; color: white; background-color: #2E4d7B; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; }  
.accordionHeaderSelected { border: 1px solid #2F4F4F; color: white; background-color: #5078B3; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; }  
.accordionContent { background-color: #D3DEEF; border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; }

* Listo cuando terminemos el código de nuestra página debería lucir como el siguiente:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AccordionControlTest.Default" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Accordion Control Test</title>  
<style type="text/css">  
.accordion { width: 400px;  }  
.accordionHeader { border: 1px solid #2F4F4F; color: white; background-color: #2E4d7B; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; }  
.accordionHeaderSelected { border: 1px solid #2F4F4F; color: white; background-color: #5078B3; font-family: Arial, Sans-Serif; font-size: 12px; font-weight: bold; padding: 5px; margin-top: 5px; cursor: pointer; }  
.accordionContent { background-color: #D3DEEF; border: 1px dashed #2F4F4F; border-top: none; padding: 5px; padding-top: 10px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<asp:Accordion ID="Accordion1" runat="server">
<Panes>  
<asp:AccordionPane runat="server">  
<Header>Pane 1</Header>  
<Content>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.  
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.              
</Content>  
</asp:AccordionPane>  
<asp:AccordionPane ID="AccordionPane1" runat="server">  
<Header>Pane 2</Header>  
<Content>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.  
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.  
</Content>  
</asp:AccordionPane>  
<asp:AccordionPane ID="AccordionPane2" runat="server">  
<Header>Pane 3</Header>  
<Content>  
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.  
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.  
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin pharetra nonummy pede. Mauris et orci.  
</Content>  
</asp:AccordionPane>  
</Panes>  
</asp:Accordion>
</div>
</form>
</body>
</html>

Y el resultado final debería ser algo parecido a esto:

Accordion Control


ajaxPor el momento esto es todo, me despido de ustedes enviándoles un cordial saludo, y esperando que este post sea de su agrado, esperen los futuros artículos referentes a esta herramienta que puede llegar a serles muy útil.

Dudas, sugerencias o preguntas son bienvenidas.
Saludos.

Fuentes      |      asp.net/ajaxcontroltoolkit      asp.net/ajaxlibrary

2 comentarios para “Ajax Toolkit: Accordion Control”

Gracias por compartir tu opinión en esta nota

Para que tu avatar aparezca en los comentarios de este y otros blogs debes ser usuario registrado en Gravatar, puedes registrarte en el siguiente enlace: http://en.gravatar.com/site/signup
Stay Geek!

Deja un comentario

Sitios Amigos
Únete en Facebook
Síguenos en Twitter
Publicaciones Favoritas