locked
Header in Gridvew RRS feed

  • Question

  • User-1499457942 posted

    Hi

      I have below code . i want to add another line of Header on Top

    <asp:GridView ID="gvw" runat="server" Font-Size="9pt" OnPreRender="gvw_PreRender"
                            
                            CssClass="table table-bordered table-striped" AutoGenerateColumns="false" 
                            BorderWidth="1px"  BorderStyle="None" BorderColor="#DEBA84" HeaderStyle-CssClass="GridHeader" ClientIDMode="Static"
    >
                            <HeaderStyle ForeColor="White" Font-Bold="True" BackColor="#428bca"></HeaderStyle>
                            <Columns>
    <asp:BoundField DataField="Name"  HeaderText = "Name" HeaderStyle-Font-UnderLine="true" ReadOnly="True" />
                                <asp:BoundField DataField="Department"  HeaderText = "Department" HeaderStyle-Font-UnderLine="true" ReadOnly="True" />
    </columns>
    </asp:gridview>
    
    
    protected void gvw_PreRender(object sender, EventArgs e)
            {
                if (gvw.Rows.Count > 0)
                {
                    gvw.UseAccessibleHeader = true;
                    gvw.HeaderRow.TableSection = TableRowSection.TableHeader;
                }
            }
    
        <script type="text/javascript" charset="utf-8">
     $(document).ready(function () {
                $("<thead class='bg-primary text-white'></thead>").append($("#gvw tr:first")).prependTo($("#gvw"));
                $('#gvwBfbStructure').dataTable({
                    "pageLength": 20
                });
          });
    </script>

    Thanks

    Friday, August 31, 2018 12:50 PM

All replies

  • User839733648 posted

    Hi JagjitSingh,

    According to your description, I could not fully understand what you want to do.

    You’ve mentioned “gvwBfbStructure” in code behind and in js, but I could not find the id in your body element.

    i want to add another line of Header on Top

    I couldn't understand clearly about the how to add another line of header.

    If possible, please provide detailed codes and more information about your requirement(such as description with images) so that it will be better for us to help with you.

    Best Regards,
    Jenifer

    Monday, September 3, 2018 8:50 AM
  • User-1499457942 posted

    Hi

      It is gvw

    Thanks

    Monday, September 3, 2018 10:42 AM
  • User-1499457942 posted

    Hi mudassarkhan

       When i use gridview only then it works . But when i convert gridview to datatable then i get the problem

    $(document).ready(function () {
                $("<thead class='bg-primary text-white'></thead>").append($("#gvw tr:first")).prependTo($("#gvw"));
                $('#gvw').dataTable({
                    "pageLength": 20
                });
          });
    </script>

    Thanks
    Tuesday, September 4, 2018 4:50 AM
  • User839733648 posted

    Hi JagjitSingh,

    According to your description, I suggest that you could add another header in js.

    For example, you could read one row of data in table, and then use clone() to add it to the header.

    For more information, you could refer to the code below.

    .aspx

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
        <link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" />
        <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                $("<thead class='bg-primary text-white'></thead>").append($("#gvw tr:first")).prependTo($("#gvw"));
                var table = $('#gvw').dataTable({
                    "pageLength": 20
                });
               $('#gvw tbody tr:eq(0)').clone().insertAfter($("thead tr"));
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="gvw" runat="server" Font-Size="9pt" OnPreRender="gvw_PreRender"
                    CssClass="table table-bordered table-striped" AutoGenerateColumns="False"
                    BorderWidth="1px" BorderStyle="None" BorderColor="#DEBA84" HeaderStyle-CssClass="GridHeader" ClientIDMode="Static">
                    <HeaderStyle ForeColor="White" Font-Bold="True" BackColor="#428bca"></HeaderStyle>
                    <Columns>
                        <asp:BoundField DataField="Eid" HeaderText="Eid" HeaderStyle-Font-Underline="true" SortExpression="Eid" />
                        <asp:BoundField DataField="Ename" HeaderText="Ename" HeaderStyle-Font-Underline="true" SortExpression="Ename" />
                    </Columns>
                </asp:GridView>
            </div>
        </form>
    </body>
    </html>
    

    code behind.

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    string constr = ConfigurationManager.ConnectionStrings["EmployeeManagementConnectionString"].ConnectionString;
                    using (SqlConnection con = new SqlConnection(constr))
                    {
                        using (SqlCommand cmd = new SqlCommand("SELECT Eid,Ename FROM tb_info", con))
                        {
                            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
                            {
                                cmd.CommandType = CommandType.Text;
                                DataTable dt = new DataTable();
                                sda.Fill(dt);
                                gvw.DataSource = dt;
                                gvw.DataBind();
                            }
                        }
                    }
                }
            }
    
            protected void gvw_PreRender(object sender, EventArgs e)
            {
                if (gvw.Rows.Count > 0)
                {
                    gvw.UseAccessibleHeader = true;
                    gvw.HeaderRow.TableSection = TableRowSection.TableHeader;
                }
            }    

    result:

    Best Regards,

    Jenifer

    Thursday, September 6, 2018 1:29 AM
  • User-1499457942 posted

    Hi Jenifer

      It is showing first record data in the Header Row. I want to display Headings in that row

    Thanks

    Thursday, September 6, 2018 4:02 PM
  • User839733648 posted

    Hi JagjitSingh,

    I suggest that you could just modify the adding header code in js.

    For more, you could refer to the js code below.

        <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                $("<thead class='bg-primary text-white'></thead>").append($("#gvw tr:first")).prependTo($("#gvw"));
                var table = $('#gvw').dataTable({
                    "pageLength": 20
                });
                $('#gvw thead th').clone().insertAfter($("thead tr"));
            });
        </script>

    result:

    Best Regards,

    Jenifer

    Friday, September 7, 2018 8:46 AM
  • User-1499457942 posted

    Hi

       Thanks . How i can change the headings now from Code Behind of first Heading row

    Thanks

    Friday, September 7, 2018 11:44 AM