locked
2 Header rows in Gridview RRS feed

  • Question

  • User-1499457942 posted

    Hi

      I have created 2 headers rows like below code in Gridview. In first header row i want first 6 column to be merged , then next 3 columns & then next 3 columns to be merged

            $(document).ready(function () {
                $("<thead class='bg-primary text-white'></thead>").append($("#gvwStructure tr:first")).prependTo($("#gvwStructure"));
                $('#gvwStructure').dataTable({
                    "pageLength": 20,
                    columnDefs: [{ orderable: false, targets: [0] }],
                    "fnDrawCallback": function (oSettings) {
                        $("#gvwStructure thead  th").removeClass("sorting_asc sorting sorting_desc");
                    }
                });
    $('#gvwStructure thead th').clone().insertAfter($("thead tr"));
            });

    Thanks

    Tuesday, October 2, 2018 4:58 PM

All replies

  • Tuesday, October 2, 2018 5:29 PM
  • User1724605321 posted

    Hi JagjitSingh ,

    Please refer to the official code sample :

    https://datatables.net/examples/basic_init/complex_header.html

          <thead>
                <tr>
                    <th rowspan="2">Name</th>
                    <th colspan="2">HR Information</th>
                    <th colspan="3">Contact</th>
                </tr>
                <tr>
                    <th>Position</th>
                    <th>Salary</th>
                    <th>Office</th>
                    <th>Extn.</th>
                    <th>E-mail</th>
                </tr>
            </thead>

    try to dynamically add the merged thread to DataTables using colspan/rowspan based on your requirement in javascript. 

    Best Regards,

    Nan Yu

    Wednesday, October 3, 2018 5:46 AM
  • User-1499457942 posted

    Hi

      I have gridview i.e is enclosed in Database . In that case how it is to be done

    Thanks

    Wednesday, October 3, 2018 6:13 AM
  • User1724605321 posted

    Hi JagjitSingh ,

    The headers don't care the where the data from  , code below is for your reference :

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="Scripts/jquery-3.3.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.css" />
    
        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.js"></script>
        <script>
            $(function () {
                $("#gvitems").prepend($("<thead><tr><th colspan='2'>Item</th><th colspan='1'>Quilty</th></tr></thead>").append($(this).find("tr:first"))).dataTable();
            });
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <asp:GridView ID="gvitems" runat="server" AutoGenerateColumns="false">
                    <Columns>
                        <asp:BoundField DataField="ItemId" HeaderText="Item ID" ItemStyle-Width="30" />
                        <asp:BoundField DataField="ItemName" HeaderText="Item Name" ItemStyle-Width="150" />
                        <asp:BoundField DataField="ItemQuantity" HeaderText="Item Quantity" ItemStyle-Width="150" />
                    </Columns>
                </asp:GridView>
            </div>
        </form>
    </body>
    </html>
    

    Code behind :

    protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    DataTable dt = new DataTable();
                    dt.Columns.AddRange(new DataColumn[3] { new DataColumn("ItemId", typeof(int)),
                        new DataColumn("ItemName", typeof(string)),
                        new DataColumn("ItemQuantity",typeof(string)) });
                    dt.Rows.Add(1, "Flour", "500 Kg");
                    dt.Rows.Add(2, "Tea", "20 Kg");
                    dt.Rows.Add(3, "Rice", "1000 Kg");
                    gvitems.DataSource = dt;
                    gvitems.DataBind();
                }
            }

    Result :

    Best Regards,

    Nan Yu

    Wednesday, October 3, 2018 6:43 AM
  • User-1499457942 posted

    Hi Nan Yu

      Thanks . Upper line is not getting visible . Secondly how to give background color to this Header row.

    One more question how to Centre Headings.

    Thanks

    Wednesday, October 3, 2018 8:07 AM
  • User1724605321 posted

    Hi JagjitSingh m,

    Thanks . Upper line is not getting visible . Secondly how to give background color to this Header row.

    That are all related to css on your <head> ,for example , set background color to header row :

    <th bgcolor="#FF0000">Month</th>
    <th bgcolor="#00FF00">Savings</th>

    Best Regards,

    Nan Yu

    Friday, October 5, 2018 2:19 AM