How to perform gridview header row in ASP.NET

Question

How to perform gridview header row in ASP.NET

Navigation

#1 by (2 votes)
#2 by (-1 votes)

4

Good Night Family:

I would like you to help me I am doing a gridview that I am doing in the asp.net c # language but I would like to put a header like the image:

for this in my gridview I am placing a property called: 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>

And in the Codehebing this code

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);

            } 
        }

But at the moment of executing I get this error:

c# asp.net

asked by PieroDev 18.07.2017 в 04:41

source

2 answers

-1

USE THE ELEMENT 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>

answered by 20.12.2017 в 07:06

Send text to My Band 2 from Android BLE Iterative query with permissions

score 2 · Accepted Answer

If your ultimate goal is to achieve control without major functionalities (such as paging, column organization, etc.) , this is an option of how you can achieve the result you show in the screenshot of Your question:

To do this, I assemble the table of HTML following these steps:

I add to WebForm a control Panel that will be the container of the HTML that I assemble in the code (from the server side) .
I generate the static headers (or rather, burned) in the code.
I assemble HTML by traversing the rows of a DataTable - that has test data.

This is the code that shows the whole process:

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() });
            }
        }
    }
}

And this is the result obtained (click to see the image in larger size) :