locked
want to display gridview header only one time ? RRS feed

  • Question

  • User-1026236167 posted

    hello in my gridview want to adjust this header only one time am using gridview view state when add gridview row a seprate header also created for new row but i need only one header i have few combo items like i add in paticulat header base and also add no product added text before click on the button and gridview does not display before click only text display
    before click button <%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="WebForm9.aspx.cs" Inherits="Store.WebForm9" %> <asp:Content ID="Content1" ContentPlaceHolderID="title" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content3" ContentPlaceHolderID="contentbody" runat="server"> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <asp:ScriptManager runat="server"></asp:ScriptManager> <div style="margin-left:10px;margin-top:10px"> <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server" CellPadding="4" ForeColor="#333333" GridLines="None"> <AlternatingRowStyle BackColor="White" /> <Columns> <asp:TemplateField> <ItemTemplate> <table> <tr style="background-color:blue; color:white"> <th>Sr.No</th> <th >Product Information</th> <th>Discount Information</th> <th>Tax Information</th><th>Tax Amount</th><th>Final Amount</th> </tr> <tr> <td> <asp:Label runat="server" Text="Author name:"></asp:Label><asp:Label ID="Label30" runat="server" Text='<%# Eval("AuthorName") %>'></asp:Label><br /> <asp:Label runat="server" Text="Book name:"></asp:Label><asp:Label ID="Label1" runat="server" Text='<%# Eval("book_name") %>'></asp:Label><br /> <asp:Label runat="server" Text="Book type:"></asp:Label><asp:Label ID="Label4" runat="server" Text='<%# Eval("book_type") %>'></asp:Label><br /> <asp:Label runat="server" Text="name:"></asp:Label><asp:Label ID="Label3" runat="server" Text='<%# Eval("publisher") %>'></asp:Label> </td> </tr> </table> </ItemTemplate> </asp:TemplateField> <%-- <asp:BoundField HeaderStyle-Width="120px" HeaderText="Author Name" DataField="AuthorName" /> <asp:BoundField HeaderStyle-Width="120px" HeaderText=" Book Name" DataField="book_name" /> <asp:BoundField HeaderStyle-Width="120px" HeaderText=" Book Type" DataField="book_type" /> <asp:BoundField HeaderStyle-Width="120px" HeaderText="Publisher" DataField="Publisher" /> --%> </Columns> <EditRowStyle BackColor="#2461BF" /> <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> <RowStyle BackColor="#EFF3FB" /> <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> <SortedAscendingCellStyle BackColor="#F5F7FB" /> <SortedAscendingHeaderStyle BackColor="#6D95E1" /> <SortedDescendingCellStyle BackColor="#E9EBEF" /> <SortedDescendingHeaderStyle BackColor="#4870BE" /> </asp:GridView> </div> </asp:Content> cs using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.IO; using System.Data; using System.Data.SqlClient; using System.Configuration; namespace Store { public partial class WebForm9 : System.Web.UI.Page { SqlCommand cmd = new SqlCommand(); SqlConnection con = new SqlConnection(); string connection = System.Configuration.ConfigurationManager.AppSettings["con"].ToString(); public void EstablishConnection(string storeprocedure) { con.ConnectionString = connection; cmd.Connection = con; cmd.Connection.Open(); cmd.CommandType = CommandType.StoredProcedure; cmd.CommandText = storeprocedure; } public void CloseConnection() { cmd.Connection.Close(); cmd.Connection.Dispose(); con.Close(); } protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { AddDefaultFirstRecord(); } } protected void AddProduct_Click(object sender, EventArgs e) { AddNewRecordRowToGrid(); } private void AddDefaultFirstRecord() { // creating dataTable DataTable dt = new DataTable(); DataRow dr; dt.TableName = "AuthorBooks"; dt.Columns.Add(new DataColumn("AuthorName", typeof(string))); dt.Columns.Add(new DataColumn("book_name", typeof(string))); dt.Columns.Add(new DataColumn("book_type", typeof(string))); dt.Columns.Add(new DataColumn("publisher", typeof(string))); dr = dt.NewRow(); dt.Rows.Add(dr); //saving databale into viewstate ViewState["AuthorBooks"] = dt; //bind Gridview GridView1.DataSource = dt; GridView1.DataBind(); } private void AddNewRecordRowToGrid() { // check view state is not null if (ViewState["AuthorBooks"] != null) { //get datatable from view state DataTable dtCurrentTable = (DataTable)ViewState["AuthorBooks"]; DataRow drCurrentRow = null; if (dtCurrentTable.Rows.Count > 0) { for (int i = 1; i <= dtCurrentTable.Rows.Count; i++) { //add each row into data table drCurrentRow = dtCurrentTable.NewRow(); drCurrentRow["AuthorName"] = Textbox1.Text; drCurrentRow["book_name"] = Textbox4.Text; drCurrentRow["book_type"] = Textbox5.Text; drCurrentRow["publisher"] = Textbox3.Text; } //Remove initial blank row if (dtCurrentTable.Rows[0][0].ToString() == "") { dtCurrentTable.Rows[0].Delete(); dtCurrentTable.AcceptChanges(); } //add created Rows into dataTable dtCurrentTable.Rows.Add(drCurrentRow); //Save Data table into view state after creating each row ViewState["AuthorBooks"] = dtCurrentTable; //Bind Gridview with latest Row GridView1.DataSource = dtCurrentTable; GridView1.DataBind(); } } } } }

    Monday, September 7, 2020 11:27 AM

Answers

  • User-1330468790 posted

    Hi prabhjot1313,

     

    One of solutions is that you could use inline codes for the webforms aspx page and remove all related settings for empty template of the grid view control.

     

    Please refer to below codes:

    aspx

    <head runat="server">
        <title></title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>
    
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div style="margin-left: 10px; margin-top: 10px">
                <% if (GridView1.Rows.Count == 0)
                    { %>
                <div class="card border-primary mb-3" style="max-width: 18rem;">
                    <div class="card-header">Product Information</div>
                    <div class="card-body text-primary">
                        <h5 class="card-title">Sorry, No Data</h5>
                        <p class="card-text">Please add product information.</p>
                    </div>
                </div>
                <% } %>
                <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server" CellPadding="4"
                    ForeColor="#333333" GridLines="None" OnDataBound="GridView1_DataBound">
                    <AlternatingRowStyle BackColor="White" />
                    <Columns>
                        <asp:BoundField HeaderText="Sr.No" />
                        <asp:TemplateField HeaderText="Product Information">
                            <ItemTemplate>
                                <asp:Label runat="server" Text="Author name:"></asp:Label><asp:Label ID="Label30" runat="server" Text='<%# Eval("AuthorName") %>'></asp:Label><br />
                                <asp:Label runat="server" Text="Book name:"></asp:Label><asp:Label ID="Label1" runat="server" Text='<%# Eval("book_name") %>'></asp:Label><br />
                                <asp:Label runat="server" Text="Book type:"></asp:Label><asp:Label ID="Label4" runat="server" Text='<%# Eval("book_type") %>'></asp:Label><br />
                                <asp:Label runat="server" Text="name:"></asp:Label><asp:Label ID="Label3" runat="server" Text='<%# Eval("publisher") %>'></asp:Label>
    
                            </ItemTemplate>
    
                        </asp:TemplateField>
                        <asp:BoundField HeaderText="Discount Information" />
                        <asp:BoundField HeaderText="Tax Information" />
                        <asp:BoundField HeaderText="Tax Amount" />
                        <asp:BoundField HeaderText="Final Amount" />
    
    
                    </Columns>
                    <EditRowStyle BackColor="#2461BF" />
                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                    <RowStyle BackColor="#EFF3FB" />
                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                    <SortedAscendingCellStyle BackColor="#F5F7FB" />
                    <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                    <SortedDescendingCellStyle BackColor="#E9EBEF" />
                    <SortedDescendingHeaderStyle BackColor="#4870BE" />
                </asp:GridView>
            </div>
            <asp:Label runat="server" Text="Author name:"></asp:Label><asp:TextBox ID="Textbox1" runat="server"></asp:TextBox><br />
            <asp:Label runat="server" Text="Book name:"></asp:Label><asp:TextBox ID="Textbox4" runat="server"></asp:TextBox><br />
            <asp:Label runat="server" Text="Book type:"></asp:Label><asp:TextBox ID="Textbox5" runat="server"></asp:TextBox><br />
            <asp:Label runat="server" Text="publisher:"></asp:Label><asp:TextBox ID="Textbox3" runat="server"></asp:TextBox><br />
            <asp:Button ID="AddProduct" runat="server" Text="Add Product" OnClick="AddProduct_Click" />
        </form>

    Code behind

     protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
    
                {
                    AddDefaultFirstRecord();
    
                }
            }
            protected void AddProduct_Click(object sender, EventArgs e)
            {
                AddNewRecordRowToGrid();
    
            }
    
            private void AddDefaultFirstRecord()
            {
                // creating dataTable
                DataTable dt = new DataTable();
    
                dt.TableName = "AuthorBooks";
                dt.Columns.Add(new DataColumn("AuthorName", typeof(string)));
                dt.Columns.Add(new DataColumn("book_name", typeof(string)));
                dt.Columns.Add(new DataColumn("book_type", typeof(string)));
                dt.Columns.Add(new DataColumn("publisher", typeof(string)));
    
                //saving databale into viewstate 
                ViewState["AuthorBooks"] = dt;
                //bind Gridview 
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
    
            private void AddNewRecordRowToGrid()
            {
                // check view state is not null 
                if (ViewState["AuthorBooks"] != null)
                {
                    //get datatable from view state 
                    DataTable dtCurrentTable = (DataTable)ViewState["AuthorBooks"];
    
                    //add data to datatable
                    DataRow drCurrentRow = dtCurrentTable.NewRow();
                    drCurrentRow["AuthorName"] = Textbox1.Text;
                    drCurrentRow["book_name"] = Textbox4.Text;
                    drCurrentRow["book_type"] = Textbox5.Text;
                    drCurrentRow["publisher"] = Textbox3.Text;
    
                    //add created Rows into dataTable 
                    dtCurrentTable.Rows.Add(drCurrentRow);
                    //Save Data table into view state after creating each row 
                    ViewState["AuthorBooks"] = dtCurrentTable;
                    //Bind Gridview with latest Row 
                    GridView1.DataSource = dtCurrentTable;
                    GridView1.DataBind();
    
                }
            }
    
            // Add the Cross header when the row count is greater than 0
            protected void GridView1_DataBound(object sender, EventArgs e)
            {
                GridView gv = (GridView)sender;
    
                if (gv != null)
                {
                    if(gv.Rows.Count > 0)
                    {
                        // The row to be added as the header container
                        GridViewRow row = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal);
    
                        // The cross header
                        TableCell crossHeader = new TableHeaderCell();
                        crossHeader.ColumnSpan = gv.Columns.Count;
                        crossHeader.Text = "Cross Header";
    
                        row.Cells.Add(crossHeader);
    
                        // Get the table of the grid view and add the row on the top
                        Table t = gv.Controls[0] as Table;
                        if (t != null)
                        {
                            t.Rows.AddAt(0, row);
                        }
                    }
                   
    
                }
            }

    Demo:

      

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 11, 2020 8:40 AM

All replies

  • User-1330468790 posted

    Hi prabhjot1313,

     

    I think you misunderstand the use of the grid view. 

    The Columns represent each column in one row. You should not put a table inside it -- at least for your purpose.

     

    The correct way would be adding a line of the book information as a cell inside an item template with a header.

    Apart from that, you could manually add a cross header above all of data.

     

    More details, you could refer to below codes:

    aspx:

    <form id="form1" runat="server">
            <div style="margin-left: 10px; margin-top: 10px">
                <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server" CellPadding="4"
                    ForeColor="#333333" GridLines="None" OnDataBound="GridView1_DataBound">
                    <AlternatingRowStyle BackColor="White" />
                    <Columns>
                        <asp:BoundField HeaderText="Sr.No"  />
                        <asp:TemplateField HeaderText="Product Information">
                            <ItemTemplate>
                                            <asp:Label runat="server" Text="Author name:"></asp:Label><asp:Label ID="Label30" runat="server" Text='<%# Eval("AuthorName") %>'></asp:Label><br />
                                            <asp:Label runat="server" Text="Book name:"></asp:Label><asp:Label ID="Label1" runat="server" Text='<%# Eval("book_name") %>'></asp:Label><br />
                                            <asp:Label runat="server" Text="Book type:"></asp:Label><asp:Label ID="Label4" runat="server" Text='<%# Eval("book_type") %>'></asp:Label><br />
                                            <asp:Label runat="server" Text="name:"></asp:Label><asp:Label ID="Label3" runat="server" Text='<%# Eval("publisher") %>'></asp:Label>
                                     
                            </ItemTemplate>
    
                        </asp:TemplateField>
                        <asp:BoundField HeaderText="Discount Information"  />
                        <asp:BoundField HeaderText="Tax Information"  />
                        <asp:BoundField HeaderText="Tax Amount"  />
                        <asp:BoundField HeaderText="Final Amount"  />
                        
    
                    </Columns>
                    <EditRowStyle BackColor="#2461BF" />
                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                    <RowStyle BackColor="#EFF3FB" />
                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                    <SortedAscendingCellStyle BackColor="#F5F7FB" />
                    <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                    <SortedDescendingCellStyle BackColor="#E9EBEF" />
                    <SortedDescendingHeaderStyle BackColor="#4870BE" />
                </asp:GridView>
            </div>
            <asp:Label runat="server" Text="Author name:"></asp:Label><asp:TextBox ID="Textbox1" runat="server"></asp:TextBox><br />
            <asp:Label runat="server" Text="Book name:"></asp:Label><asp:TextBox ID="Textbox4" runat="server"></asp:TextBox><br />
            <asp:Label runat="server" Text="Book type:"></asp:Label><asp:TextBox ID="Textbox5" runat="server"></asp:TextBox><br />
            <asp:Label runat="server" Text="publisher:"></asp:Label><asp:TextBox ID="Textbox3" runat="server"></asp:TextBox><br />
            <asp:Button ID="AddProduct" runat="server" Text="Add Product" OnClick="AddProduct_Click" />
        </form>

    Code behind:

     protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
    
                {
                    AddDefaultFirstRecord();
    
                }
            }
            protected void AddProduct_Click(object sender, EventArgs e)
            {
                AddNewRecordRowToGrid();
    
            }
    
            private void AddDefaultFirstRecord()
            {
                // creating dataTable
                DataTable dt = new DataTable();
                DataRow dr;
                dt.TableName = "AuthorBooks";
                dt.Columns.Add(new DataColumn("AuthorName", typeof(string)));
                dt.Columns.Add(new DataColumn("book_name", typeof(string)));
                dt.Columns.Add(new DataColumn("book_type", typeof(string)));
                dt.Columns.Add(new DataColumn("publisher", typeof(string)));
                dr = dt.NewRow();
                dt.Rows.Add(dr);
                //saving databale into viewstate 
                ViewState["AuthorBooks"] = dt;
                //bind Gridview 
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
    
            private void AddNewRecordRowToGrid()
            {
                // check view state is not null 
                if (ViewState["AuthorBooks"] != null)
                {
                    //get datatable from view state 
                    DataTable dtCurrentTable = (DataTable)ViewState["AuthorBooks"];
                    DataRow drCurrentRow = null;
    
                    if (dtCurrentTable.Rows.Count > 0)
                    {
    
                        for (int i = 1; i <= dtCurrentTable.Rows.Count; i++)
                        {
    
                            //add each row into data table 
                            drCurrentRow = dtCurrentTable.NewRow();
                            drCurrentRow["AuthorName"] = Textbox1.Text;
                            drCurrentRow["book_name"] = Textbox4.Text;
                            drCurrentRow["book_type"] = Textbox5.Text;
                            drCurrentRow["publisher"] = Textbox3.Text;
    
    
                        }
                        //Remove initial blank row 
                        if (dtCurrentTable.Rows[0][0].ToString() == "")
                        {
                            dtCurrentTable.Rows[0].Delete();
                            dtCurrentTable.AcceptChanges();
    
                        }
    
                        //add created Rows into dataTable 
                        dtCurrentTable.Rows.Add(drCurrentRow);
                        //Save Data table into view state after creating each row 
                        ViewState["AuthorBooks"] = dtCurrentTable;
                        //Bind Gridview with latest Row 
                        GridView1.DataSource = dtCurrentTable;
                        GridView1.DataBind();
                    }
                }
            }
    
            // Add the Cross header
            protected void GridView1_DataBound(object sender, EventArgs e)
            {
                GridView gv = (GridView)sender;
                if(gv != null)
                {
                    // The row to be added as the header container
                    GridViewRow row = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal);
    
                    // The cross header
                    TableCell crossHeader = new TableHeaderCell();
                    crossHeader.ColumnSpan = gv.Columns.Count;
                    crossHeader.Text = "Cross Header";
    
                    row.Cells.Add(crossHeader);
    
                    // Get the table of the grid view and add the row on the top
                    Table t = gv.Controls[0] as Table;
                    if (t!= null)
                    {
                        t.Rows.AddAt(0, row);
                    }
                }
            }

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    Tuesday, September 8, 2020 9:38 AM
  • User-1026236167 posted

    sir your code runs well but a little problem when open this webpage an message display No products added like using gridview empty text then we click on button and added entries in gridview

    Wednesday, September 9, 2020 8:28 AM
  • User-1330468790 posted

    Hi prabhjot1313,

     

    OK, I understand what you want now. It looks like you have added some codes behind to simulation this. However, you don't need to write those codes. Simply call the databind method and turn on "ShowHeaderWhenEmpty" property of the Grid view with setting "EmptyDataTemplate".

     

    You could refer to below codes for more details:

    aspx Page:

     <form id="form1" runat="server">
            <div style="margin-left: 10px; margin-top: 10px">
                <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server" CellPadding="4"
                    ForeColor="#333333" GridLines="None" OnDataBound="GridView1_DataBound" ShowHeaderWhenEmpty="True">
                    <AlternatingRowStyle BackColor="White" />
                    <EmptyDataTemplate>
                        Sorry, Not data
                    </EmptyDataTemplate>
                    <Columns>
                        <asp:BoundField HeaderText="Sr.No"  />
                        <asp:TemplateField HeaderText="Product Information">
                            <ItemTemplate>
                                            <asp:Label runat="server" Text="Author name:"></asp:Label><asp:Label ID="Label30" runat="server" Text='<%# Eval("AuthorName") %>'></asp:Label><br />
                                            <asp:Label runat="server" Text="Book name:"></asp:Label><asp:Label ID="Label1" runat="server" Text='<%# Eval("book_name") %>'></asp:Label><br />
                                            <asp:Label runat="server" Text="Book type:"></asp:Label><asp:Label ID="Label4" runat="server" Text='<%# Eval("book_type") %>'></asp:Label><br />
                                            <asp:Label runat="server" Text="name:"></asp:Label><asp:Label ID="Label3" runat="server" Text='<%# Eval("publisher") %>'></asp:Label>
                                     
                            </ItemTemplate>
    
                        </asp:TemplateField>
                        <asp:BoundField HeaderText="Discount Information"  />
                        <asp:BoundField HeaderText="Tax Information"  />
                        <asp:BoundField HeaderText="Tax Amount"  />
                        <asp:BoundField HeaderText="Final Amount"  />
                        
    
                    </Columns>
                    <EditRowStyle BackColor="#2461BF" />
                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                    <RowStyle BackColor="#EFF3FB" />
                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                    <SortedAscendingCellStyle BackColor="#F5F7FB" />
                    <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                    <SortedDescendingCellStyle BackColor="#E9EBEF" />
                    <SortedDescendingHeaderStyle BackColor="#4870BE" />
                </asp:GridView>
            </div>
            <asp:Label runat="server" Text="Author name:"></asp:Label><asp:TextBox ID="Textbox1" runat="server"></asp:TextBox><br />
            <asp:Label runat="server" Text="Book name:"></asp:Label><asp:TextBox ID="Textbox4" runat="server"></asp:TextBox><br />
            <asp:Label runat="server" Text="Book type:"></asp:Label><asp:TextBox ID="Textbox5" runat="server"></asp:TextBox><br />
            <asp:Label runat="server" Text="publisher:"></asp:Label><asp:TextBox ID="Textbox3" runat="server"></asp:TextBox><br />
            <asp:Button ID="AddProduct" runat="server" Text="Add Product" OnClick="AddProduct_Click" />
        </form>

    Code behind:

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
    
                {
                    AddDefaultFirstRecord();
    
                }
            }
            protected void AddProduct_Click(object sender, EventArgs e)
            {
                AddNewRecordRowToGrid();
    
            }
    
            private void AddDefaultFirstRecord()
            {
                // creating dataTable
                DataTable dt = new DataTable();
    
                dt.TableName = "AuthorBooks";
                dt.Columns.Add(new DataColumn("AuthorName", typeof(string)));
                dt.Columns.Add(new DataColumn("book_name", typeof(string)));
                dt.Columns.Add(new DataColumn("book_type", typeof(string)));
                dt.Columns.Add(new DataColumn("publisher", typeof(string)));
    
                //saving databale into viewstate 
                ViewState["AuthorBooks"] = dt;
                //bind Gridview 
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
    
            private void AddNewRecordRowToGrid()
            {
                // check view state is not null 
                if (ViewState["AuthorBooks"] != null)
                {
                    //get datatable from view state 
                    DataTable dtCurrentTable = (DataTable)ViewState["AuthorBooks"];
    
                    //add data to datatable directly without dealing with the "empty" data row
                    DataRow drCurrentRow = dtCurrentTable.NewRow();
                    drCurrentRow["AuthorName"] = Textbox1.Text;
                    drCurrentRow["book_name"] = Textbox4.Text;
                    drCurrentRow["book_type"] = Textbox5.Text;
                    drCurrentRow["publisher"] = Textbox3.Text;
    
                    //add created Rows into dataTable 
                    dtCurrentTable.Rows.Add(drCurrentRow);
                    //Save Data table into view state after creating each row 
                    ViewState["AuthorBooks"] = dtCurrentTable;
                    //Bind Gridview with latest Row 
                    GridView1.DataSource = dtCurrentTable;
                    GridView1.DataBind();
    
                }
            }
    
            // Add the Cross header
            protected void GridView1_DataBound(object sender, EventArgs e)
            {
                GridView gv = (GridView)sender;
                if (gv != null)
                {
                    // The row to be added as the header container
                    GridViewRow row = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal);
    
                    // The cross header
                    TableCell crossHeader = new TableHeaderCell();
                    crossHeader.ColumnSpan = gv.Columns.Count;
                    crossHeader.Text = "Cross Header";
    
                    row.Cells.Add(crossHeader);
    
                    // Get the table of the grid view and add the row on the top
                    Table t = gv.Controls[0] as Table;
                    if (t != null)
                    {
                        t.Rows.AddAt(0, row);
                    }
    
    
                }
            }

    Demo:

     

    Hope this can help you.

    Best regards,

    Sean

    Thursday, September 10, 2020 8:31 AM
  • User-1026236167 posted

    sir you done well but a little mistake can we hide blue color header also before button click and simple display like used bootstrap cards sorry not data this is my requirement

    Friday, September 11, 2020 5:38 AM
  • User-1330468790 posted

    Hi prabhjot1313,

     

    One of solutions is that you could use inline codes for the webforms aspx page and remove all related settings for empty template of the grid view control.

     

    Please refer to below codes:

    aspx

    <head runat="server">
        <title></title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"/>
    
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
    
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div style="margin-left: 10px; margin-top: 10px">
                <% if (GridView1.Rows.Count == 0)
                    { %>
                <div class="card border-primary mb-3" style="max-width: 18rem;">
                    <div class="card-header">Product Information</div>
                    <div class="card-body text-primary">
                        <h5 class="card-title">Sorry, No Data</h5>
                        <p class="card-text">Please add product information.</p>
                    </div>
                </div>
                <% } %>
                <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server" CellPadding="4"
                    ForeColor="#333333" GridLines="None" OnDataBound="GridView1_DataBound">
                    <AlternatingRowStyle BackColor="White" />
                    <Columns>
                        <asp:BoundField HeaderText="Sr.No" />
                        <asp:TemplateField HeaderText="Product Information">
                            <ItemTemplate>
                                <asp:Label runat="server" Text="Author name:"></asp:Label><asp:Label ID="Label30" runat="server" Text='<%# Eval("AuthorName") %>'></asp:Label><br />
                                <asp:Label runat="server" Text="Book name:"></asp:Label><asp:Label ID="Label1" runat="server" Text='<%# Eval("book_name") %>'></asp:Label><br />
                                <asp:Label runat="server" Text="Book type:"></asp:Label><asp:Label ID="Label4" runat="server" Text='<%# Eval("book_type") %>'></asp:Label><br />
                                <asp:Label runat="server" Text="name:"></asp:Label><asp:Label ID="Label3" runat="server" Text='<%# Eval("publisher") %>'></asp:Label>
    
                            </ItemTemplate>
    
                        </asp:TemplateField>
                        <asp:BoundField HeaderText="Discount Information" />
                        <asp:BoundField HeaderText="Tax Information" />
                        <asp:BoundField HeaderText="Tax Amount" />
                        <asp:BoundField HeaderText="Final Amount" />
    
    
                    </Columns>
                    <EditRowStyle BackColor="#2461BF" />
                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <HeaderStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                    <RowStyle BackColor="#EFF3FB" />
                    <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
                    <SortedAscendingCellStyle BackColor="#F5F7FB" />
                    <SortedAscendingHeaderStyle BackColor="#6D95E1" />
                    <SortedDescendingCellStyle BackColor="#E9EBEF" />
                    <SortedDescendingHeaderStyle BackColor="#4870BE" />
                </asp:GridView>
            </div>
            <asp:Label runat="server" Text="Author name:"></asp:Label><asp:TextBox ID="Textbox1" runat="server"></asp:TextBox><br />
            <asp:Label runat="server" Text="Book name:"></asp:Label><asp:TextBox ID="Textbox4" runat="server"></asp:TextBox><br />
            <asp:Label runat="server" Text="Book type:"></asp:Label><asp:TextBox ID="Textbox5" runat="server"></asp:TextBox><br />
            <asp:Label runat="server" Text="publisher:"></asp:Label><asp:TextBox ID="Textbox3" runat="server"></asp:TextBox><br />
            <asp:Button ID="AddProduct" runat="server" Text="Add Product" OnClick="AddProduct_Click" />
        </form>

    Code behind

     protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
    
                {
                    AddDefaultFirstRecord();
    
                }
            }
            protected void AddProduct_Click(object sender, EventArgs e)
            {
                AddNewRecordRowToGrid();
    
            }
    
            private void AddDefaultFirstRecord()
            {
                // creating dataTable
                DataTable dt = new DataTable();
    
                dt.TableName = "AuthorBooks";
                dt.Columns.Add(new DataColumn("AuthorName", typeof(string)));
                dt.Columns.Add(new DataColumn("book_name", typeof(string)));
                dt.Columns.Add(new DataColumn("book_type", typeof(string)));
                dt.Columns.Add(new DataColumn("publisher", typeof(string)));
    
                //saving databale into viewstate 
                ViewState["AuthorBooks"] = dt;
                //bind Gridview 
                GridView1.DataSource = dt;
                GridView1.DataBind();
            }
    
            private void AddNewRecordRowToGrid()
            {
                // check view state is not null 
                if (ViewState["AuthorBooks"] != null)
                {
                    //get datatable from view state 
                    DataTable dtCurrentTable = (DataTable)ViewState["AuthorBooks"];
    
                    //add data to datatable
                    DataRow drCurrentRow = dtCurrentTable.NewRow();
                    drCurrentRow["AuthorName"] = Textbox1.Text;
                    drCurrentRow["book_name"] = Textbox4.Text;
                    drCurrentRow["book_type"] = Textbox5.Text;
                    drCurrentRow["publisher"] = Textbox3.Text;
    
                    //add created Rows into dataTable 
                    dtCurrentTable.Rows.Add(drCurrentRow);
                    //Save Data table into view state after creating each row 
                    ViewState["AuthorBooks"] = dtCurrentTable;
                    //Bind Gridview with latest Row 
                    GridView1.DataSource = dtCurrentTable;
                    GridView1.DataBind();
    
                }
            }
    
            // Add the Cross header when the row count is greater than 0
            protected void GridView1_DataBound(object sender, EventArgs e)
            {
                GridView gv = (GridView)sender;
    
                if (gv != null)
                {
                    if(gv.Rows.Count > 0)
                    {
                        // The row to be added as the header container
                        GridViewRow row = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal);
    
                        // The cross header
                        TableCell crossHeader = new TableHeaderCell();
                        crossHeader.ColumnSpan = gv.Columns.Count;
                        crossHeader.Text = "Cross Header";
    
                        row.Cells.Add(crossHeader);
    
                        // Get the table of the grid view and add the row on the top
                        Table t = gv.Controls[0] as Table;
                        if (t != null)
                        {
                            t.Rows.AddAt(0, row);
                        }
                    }
                   
    
                }
            }

    Demo:

      

    Best regards,

    Sean

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, September 11, 2020 8:40 AM