Generar Gridview de forma dinámica con el control Repeater

En este post voy a explicar cómo utilizar el control Repeater para la visualización de datos.

El control Repeater permite, como su nombre lo indica, repetir una plantilla compuesta por diversos controles un números de veces determinado de acuerdo a una estructura de datos que pueda proveer los datos necesarios para poder rellenar esos controles.

La base de datos que vamos a utilizar para este ejemplo contendrá una tabla Usuario con los siguientes campos.

       Id  |  Nombre    |  Apellido        |   Telefono          |  Direccion          
       1       Juan           Romero         1538486655         av. San Martin    
       2       Pedro         Gutierrez        1532145214         av. Santa Fé      
       3       Maria          Fernandez     1565425314         av. Cabildo        

La idea principal es generar Gridview a partir de la tabla Usuario, en este caso el resultado final será tres Gridview con los datos del usuario.

Inicialmente el control Repeater tiene la siguiente estructura:

          <asp:Repeater ID="rptUsuarios" runat="server">
          </asp:Repeater>

Al interior del mismo podemos introducir controles html, tablas, controles aspx, debemos tener en cuenta que estos controles se repetirán un números de veces igual al número de elementos del DataSource que le asignemos al Repeater.

El control Repeater hace uso de las siguientes plantillas:

• HeaderTemplate - El contenido de esta plantilla no se repetirá y se coloca en la sección posición más alta, es decir la cabeza del control Repeater.
• ItemTemplate - El contenido de esta plantilla se repetirá para cada registro presente en su origen de datos.
• AlternatingItemTemplate - se utiliza para añadir elementos alternos. Se utiliza junto con ItemTemplate.
• SeparatorTemplate - se utiliza para agregar un separador entre dos elementos del control del repetidor.
• FooterTemplate - El contenido de esta plantilla no se repetirá y se colocará en la sección de pie de página.

Para nuestro ejemplo vamos a insertar una tabla con un gridview, el código será el siguiente.

        <asp:Repeater ID="rptUsuarios" runat="server"                                                                                                               onitemdatabound="rptUsuarios_ItemDataBound">
               <ItemTemplate>
                       <table>
                             <tr>
                                    <td align="center">
                                              <asp:GridView runat="server" ID="gvUsuarios"
                                                                       AutoGenerateColumns="true">
                                               </asp:GridView>
                                   </td>
                           </tr>
                      </table>
              </ItemTemplate>
      </asp:Repeater>

El control Repeater tiene un evento "ItemDataBound" el cual se lanza al llamar al método DataBind().
La llamada al DataBind() lanzará un evento "ItemDataBound" por cada uno de sus elementos de su DataSource. El DataSource puede ser un DataTable, DataSet, ArrayList, etc. En nuestro caso el evento se lanzará tres veces, uno por cada elemento del "dtRepeater".

        protected void Page_Load(object sender, EventArgs e)
        {
               if (!IsPostBack)
               {
                      //El método Obtener_Usuario() simplemente obtiene los datos del usuario a través de                           //un  select a la tabla Usuario de la BD.
                      Usuario u = new Usuario();
                      dtRepeater = u.Obtener_Usuario();

                      if (dtRepeater.Rows.Count > 0)
                      {
                             rptUsuarios.DataSource = dtRepeater;
                             rptUsuarios.DataBind();
                      }
               }
        }

Además, el contenido del elemento del DataSource será accesible desde el evento "ItemDataBound" a través de la propiedad e.Item.

Dentro de este evento se realiza la asignación de los datos al Repeater, es decir la asignación de la propiedad DataBind del GridView, para hacer esto utilizamos el método FindControl para instanciar el objeto en función de la iteración.

        protected void rptUsuarios_ItemDataBound(object sender, RepeaterItemEventArgs e)
        {
                if (e.Item.ItemType == ListItemType.Item ||
                      e.Item.ItemType == ListItemType.AlternatingItem)
                {
                         int id = e.Item.ItemIndex;

                        GridView gv = (GridView)e.Item.FindControl("gvUsuarios");
                        if (gv != null)
                        {
                               gv.DataSource = GetUsuario(id);
                               gv.DataBind();
                        }
                }
        }

        private DataTable GetUsuario(int id)
        {
                DataTable dt = new DataTable();
                dt.Columns.Add("Id");
                dt.Columns.Add("Nombre");
                dt.Columns.Add("Apellido");
                dt.Columns.Add("Telefono");
                dt.Columns.Add("Direccion");
             
               DataRow dr = dt.NewRow();
               dr[0] = dtRepeater.Rows[id][0];
               dr[1] = dtRepeater.Rows[id][1];
               dr[2] = dtRepeater.Rows[id][2];
               dr[3] = dtRepeater.Rows[id][3];
               dr[4] = dtRepeater.Rows[id][4];
               dt.Rows.Add(dr);

              return dt;
       }

Este ViewState me permite almacenar y manipular los datos.

        private DataTable dtRepeater
        {
              get
               {
                       if (ViewState["dtRepeater"] != null)
                            return (DataTable)ViewState["dtRepeater"];
                       else
                            return null;
               }
              set
               {
                      if (ViewState["dtRepeater"] != null)
                           ViewState["dtRepeater"] = value;
                     else
                          ViewState.Add("dtRepeater", value);
               }
        }