4

Buenas Noches Familia:

Quisiera que me puedan ayudar estoy realizando un gridview que estoy realizando en el lenguaje asp.net c# pero yo quisiera ponerle una cabecera como la imagen:

introducir la descripción de la imagen aquí

para ello en mi gridview le estoy colocando una propiedad llamada : OnRowCreated="GrvPagoDiaAtraso_RowCreated"

 <asp:GridView ID="GrvPagoDiaAtraso" HorizontalAlign="Center" runat="server" Width="95%" CssClass="table toggle-arrow-small table-hover table-bordered table-condensed table-striped" AutoGenerateColumns="False" Style="max-width: 600px" OnRowCreated="GrvPagoDiaAtraso_RowCreated">
                                <Columns>
                                        <asp:BoundField DataField="GrupoNomProductoAnalisis" HeaderText="Producto" />
                                        <asp:BoundField DataField="Rango0_Cap" HeaderText="Capital" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />
                                        <asp:BoundField DataField="Rango0_Int" HeaderText="Interes" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />
                                        <asp:BoundField DataField="Rango1_8_Cap" HeaderText="Capital" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />
                                        <asp:BoundField DataField="Rango1_8_Int" HeaderText="Interes" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />
                                          <asp:BoundField DataField="Rango9_15_Cap" HeaderText="Capital" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />
                                          <asp:BoundField DataField="Rango9_15_Int" HeaderText="Interes" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />
                                     <asp:BoundField DataField="Rango16_30_Cap" HeaderText="Capital" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />
                                        <asp:BoundField DataField="Rango16_30_Int" HeaderText="Interes" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />
                                     <asp:BoundField DataField="Rango31_60_Cap" HeaderText="Capital" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />
                                        <asp:BoundField DataField="Rango31_60_Int" HeaderText="Interes" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />
                                     <asp:BoundField DataField="Rango61_90_Cap" HeaderText="Capital" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />
                                        <asp:BoundField DataField="Rango61_90_Int" HeaderText="Interes" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />
                                     <asp:BoundField DataField="Rango91_120_Cap" HeaderText="Capital" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />
                                        <asp:BoundField DataField="Rango91_120_Int" HeaderText="Interes" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />
                                     <asp:BoundField DataField="Rango121_Cap" HeaderText="Capital" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />
                                        <asp:BoundField DataField="Rango121_Int" HeaderText="Interes" ItemStyle-HorizontalAlign="Right" DataFormatString="{0:0,0}" />

                                     <%--   <asp:CommandField HeaderText="Informacion" SelectText="Detalle" ShowSelectButton="True" />--%>
                                    </Columns>
                            </asp:GridView>

Y en el Codehebing este codigo

protected void GrvPagoDiaAtraso_RowCreated(object sender, GridViewRowEventArgs e)
        {


            if (e.Row.RowType == DataControlRowType.Header)
            {

                    GridView HeaderGrid = (GridView)sender;
                    GridViewRow HeaderGridRow = new GridViewRow(0, 0, DataControlRowType.Header, DataControlRowState.Insert);
                    TableCell HeaderCell = new TableCell();
                    HeaderCell.Text = "Producto";
                    HeaderCell.ColumnSpan = 1;
                    HeaderGridRow.Cells.Add(HeaderCell);

                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Rango 0 Días";
                    HeaderCell.ColumnSpan = 2;
                    HeaderGridRow.Cells.Add(HeaderCell);

                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Rango 1 a 8 Días";
                    HeaderCell.ColumnSpan = 2;
                    HeaderGridRow.Cells.Add(HeaderCell);

                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Rango 9 a 15 Días";
                    HeaderCell.ColumnSpan = 2;
                    HeaderGridRow.Cells.Add(HeaderCell);

                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Rango 16 a 30 Días";
                    HeaderCell.ColumnSpan = 2;
                    HeaderGridRow.Cells.Add(HeaderCell);

                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Rango 31 a 60 Días";
                    HeaderCell.ColumnSpan = 2;
                    HeaderGridRow.Cells.Add(HeaderCell);

                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Rango 61 a 90 Días";
                    HeaderCell.ColumnSpan = 2;
                    HeaderGridRow.Cells.Add(HeaderCell);

                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Rango 91 a 120 Días";
                    HeaderCell.ColumnSpan = 2;
                    HeaderGridRow.Cells.Add(HeaderCell);

                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Rango 121 Día";
                    HeaderCell.ColumnSpan = 2;
                    HeaderGridRow.Cells.Add(HeaderCell);

                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Total Capital";
                    HeaderCell.ColumnSpan = 1;
                    HeaderGridRow.Cells.Add(HeaderCell);

                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Total Interes";
                    HeaderCell.ColumnSpan = 1;
                    HeaderGridRow.Cells.Add(HeaderCell);

                    GrvPagoDiaAtraso.Controls[0].Controls.AddAt(0, HeaderGridRow);

            } 
        }

Pero al momento de ejecutar me sale este error :

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

10
  • Que tiene que ver lo de abajo con lo de arriba??? y el error que te da, no se da en el codigo que pasaste...
    – gbianchi
    el 18 jul. 2017 a las 2:47
  • @gbianchi Exacto cuando yo lo hago aparte del codigo osea un nuevo proyecto ahi si me sale pero no entiendo porque me sale ese error .
    – PieroDev
    el 18 jul. 2017 a las 2:51
  • esq lo que viene como parametro de sesion es una tabla incompleta?? que viene en esa variable de sesion?
    – gbianchi
    el 18 jul. 2017 a las 3:04
  • es solo el nombre del usuario que se loguea nada mas
    – PieroDev
    el 18 jul. 2017 a las 3:10
  • pero entonces apra.. el problema es lo de arriba o lo de abajo??? y vos podes asegurar lo que decis?? lo mostraste de alguna forma??
    – gbianchi
    el 18 jul. 2017 a las 3:15

2 respuestas 2

2
+50

Si tu objetivo final es lograr un control sin mayores funcionalidades (como paginación, organización de columnas, etcétera), esta es una opción de cómo puedes lograr el resultado que muestras en la captura de pantalla de tu pregunta:

Para ello, armo el elemento table de HTML siguiendo estos pasos:

  • Agrego al WebForm un control Panel que será el contenedor del HTML que armo en el código (desde el lado servidor).
  • Genero los encabezados estáticos (o mas bien, quemados) en el código.
  • Armo el HTML al recorrer las filas de un DataTable - que posee datos de prueba.

Este es el código que muestra todo el proceso:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.UI.HtmlControls;

namespace GridViewPruebas
{
    public partial class _Default : System.Web.UI.Page
    {
        /// <summary>
        /// Page_Load.
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="e"></param>
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                CargarTablaPersonalizadaHTML();
            }
        }

        /// <summary>
        /// Armar variable de tipo DataTable con información de prueba.
        /// </summary>
        /// <returns>DataTable</returns>
        private DataTable FuenteDeDatos()
        {
            DataTable dt = new DataTable();

            dt.Columns.Add(new DataColumn() { ColumnName = "CUSTOMER_Name", DataType = typeof(string) });
            dt.Columns.Add(new DataColumn() { ColumnName = "CUSTOMER_Country", DataType = typeof(string) });
            dt.Columns.Add(new DataColumn() { ColumnName = "EMPLOYEE_Name", DataType = typeof(string) });
            dt.Columns.Add(new DataColumn() { ColumnName = "EMPLOYEE_Country", DataType = typeof(string) });

            dt.Rows.Add("John Hamood", "United States", "Albert Dunner", "Bolivia");
            dt.Rows.Add("Mudassar Khan", "India", "Jason Sprint", "Canada");
            dt.Rows.Add("Suzanne Mathews", "France", "Alfred Lobo", "Philipines");
            dt.Rows.Add("Robert Schidner", "Russia", "Shaikh Ayyaz", "UAE");

            return dt;
        }

        /// <summary>
        /// Cargar tabla personalizada - creada en HTML.
        /// Fuente de la construcción de la tabla: https://forums.asp.net/t/1327905.aspx?customize+header+and+sub+header+in+gridview
        /// </summary>
        private void CargarTablaPersonalizadaHTML()
        {
            // Inicializar variables.
            string tablaHTML = "";
            string filasHTML = "";
            DataTable tabla_con_datos = FuenteDeDatos();

            try
            {
                // Limpiar valores previos.
                pnlTabla.Controls.Clear();

                // Este es el código principal de la tabla.
                // Contiene los encabezados "headers".
                tablaHTML = "<table border='1'>                         \n" +
                            "    <tr bgcolor='#39C0F7'>                 \n" +
                            "        <td colspan='2' align='center'>    \n" +
                            "            Customers</td>                 \n" +
                            "        <td colspan='4' align='center'>    \n" +
                            "            Employees</td>                 \n" +
                            "    </tr>                                  \n" +
                            "    <tr bgcolor='#A2D5EA'>                 \n" +
                            "        <td>                               \n" +
                            "            Name</td>                      \n" +
                            "        <td>                               \n" +
                            "            Country</td>                   \n" +
                            "        <td>                               \n" +
                            "            Name</td>                      \n" +
                            "        <td>                               \n" +
                            "            Country</td>                   \n" +
                            "    </tr>                                  \n";

                // Recorrer las filas del DataTable "tabla_con_datos":
                foreach (DataRow fila in tabla_con_datos.Rows)
                {
                    // Armar las filas en HTML.
                    filasHTML += "    <tr>                                    \n" +
                                 "        <td>" + fila[0].ToString() + "</td> \n" +
                                 "        <td>" + fila[1].ToString() + "</td> \n" +
                                 "        <td>" + fila[2].ToString() + "</td> \n" +
                                 "        <td>" + fila[3].ToString() + "</td> \n" +
                                 "    </tr>                                   \n";
                }

                // Concatenar las filas creadas en HTML con el final de la tabla en HTML.
                tablaHTML += filasHTML + "</table>";

                // Agregar la tabla "armada en HTML" al control "Panel":
                HtmlGenericControl control_con_tabla_HTML = new HtmlGenericControl("div");
                control_con_tabla_HTML.InnerHtml = tablaHTML;
                pnlTabla.Controls.Add(control_con_tabla_HTML);
            }
            catch (Exception ex)
            {
                pnlTabla.Controls.Clear();
                pnlTabla.Controls.Add(new HtmlGenericControl() { InnerHtml = ex.ToString() });
            }
        }
    }
}

Y este es el resultado obtenido (haz click para ver la imagen en mayor tamaño):

resultados de tabla con encabezados personalizados

-1

introducir la descripción de la imagen aquíUSA EL ELEMENTO CAPTION

  <h3>GridView Caption and CaptionAlign Example</h3>

  <asp:gridview id="CustomersGridView" 
    datasourceid="CustomersSource" 
    autogeneratecolumns="true"
    emptydatatext="No data available." 
    allowpaging="true"
    caption="Customer Information Table"
    captionalign="Top"   
    runat="server">                
  </asp:gridview>
1
  • ¿Puedes agregar una captura de pantalla con el resultado y el código completo?. La verdad no veo que con tu código obtenga el resultado que el OP espera. el 25 dic. 2017 a las 3:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.