lunes, 9 de abril de 2012

Drill Down con Grid de .Net

Hacer DrillDown con Grid de un tercero en .Net es muy sencillo ya que existen productos tales como Telerik, DevExpress, Janus y otros que proveen estas características.

Nosotros los pobres que no tenemos estos controles tenemos que trabajar con los controles y herramientas nativas de .Net

Tuve la necesidad de hacer DrillDown con un Grid de .Net y lo trabajé de la siguiente manera:

  1. Debemos hacer Template la columna en donde vamos a desplegar la información que corresponda al detalle del Grid.
  2. En el tag ItemTemplate debemos poner el siguiente código que inserta una tabla y otro grid.
  3. Use un comando agregado en el grid para ver el detalle del registro.
El código para insertar la tabla y el otro grid es el siguiente:


<asp:TemplateField HeaderText="Nombre de la Funda" HeaderStyle-Width="360" ItemStyle-Width="360">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Descripcion") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server"  Text='<%# Bind("Descripcion") %>'></asp:Label>
<table width="100%" border="0">
<tr>
<td width="70%">
<asp:DataGrid id="gridRelacionDet" runat="server" AutoGenerateColumns="False" BorderColor="#CC9966"
BorderStyle="None" BorderWidth="1px" BackColor="White" CellPadding="4" Font-Size="X-Small">
<FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
<ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
<HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
<Columns>
<asp:BoundColumn DataField="Articulo" HeaderText="Artículo" HeaderStyle-Width="80" ItemStyle-Width="80"></asp:BoundColumn>
<asp:BoundColumn DataField="Descripcion" HeaderText="Nombre del Artículo" HeaderStyle-Width="280" ItemStyle-Width="280"></asp:BoundColumn>
</Columns>
<PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
</asp:DataGrid>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>

Mi Grid principal se llama "gridRelacion" y el detalle de este se llama "gridRelacionDet" y tengo 2 columnas, una para un código de Artículo y otra para el Nombre del Artículo.

En el CodeBehind al hacer clic en el comando del grid para ver el detalle debemos usar el siguiente código:

//Este es mi WS que devuelve el detalle del registro seleccionado
var q = ws.ListarRelacionFundas(ArticuloConsultar);

Control ctl = gridRelacion.SelectedRow.FindControl("gridRelacionDet");

if (ctl is DataGrid)
{
          DataGrid fileGrid = (DataGrid)ctl;
          fileGrid.DataSource = q.ToArray();
          fileGrid.DataBind();
}

El Resultado es el siguiente:



Espero esto les pueda ser de utilidad.

No hay comentarios:

Publicar un comentario