locked
Gridview Headings RRS feed

  • Question

  • User-1499457942 posted

    Hi

      I want to display Heading in Gridview like below link .

    https://imgur.com/wq9cnuu

    <script type="text/javascript" charset="utf-8">
            $(document).ready(function () {
                $('#gvw').dataTable({
                });
    
            });
    
        </script>
    
    protected void gvw_PreRender(object sender, EventArgs e)
            {
                if (gvw.Rows.Count > 0)
                {
                    gvw.HeaderRow.TableSection = TableRowSection.TableHeader;
                }
            }

    Thanks

    Thursday, August 23, 2018 11:17 AM

All replies

  • User2103319870 posted

    DataTable supports Colspan and rowspan on headers.  https://datatables.net/examples/basic_init/complex_header.html

    You need to add an additional header to gridview and apply colspan in that like below

    protected void GridView4_RowCreated(object sender, GridViewRowEventArgs e)
            {
                if (e.Row.RowType == DataControlRowType.Header)
                {
                    GridView HeaderGrid = (GridView)sender;
                    GridViewRow HeaderGridRow = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal);
                    TableCell HeaderCell = new TableCell();
                    HeaderCell.Text = "";
                    HeaderCell.ColumnSpan = 2;
                    HeaderGridRow.Cells.Add(HeaderCell);
    
                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Sale";
                    HeaderCell.ColumnSpan = 2;
                    HeaderGridRow.Cells.Add(HeaderCell);
    
                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Purchase";
                    HeaderCell.ColumnSpan = 2;
                    HeaderGridRow.Cells.Add(HeaderCell);
    
                    GridView4.Controls[0].Controls.AddAt(0, HeaderGridRow);
    
                }
            }

    Complete Code

    HTML

      <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorks2016CTP3ConnectionString %>"
                SelectCommand="SELECT top 100 [AddressID], [AddressLine1], [City], [StateProvinceID], [PostalCode] FROM [Person].[Address]"></asp:SqlDataSource>
    
            <asp:GridView ID="GridView4" runat="server" CssClass="Grid" AutoGenerateColumns="false" ShowHeader="true" Width="500px" AllowPaging="true" PageSize="5" DataSourceID="SqlDataSource1" OnRowCreated="GridView4_RowCreated">
                <Columns>
                    <asp:BoundField DataField="AddressID" HeaderText="Address ID" HeaderStyle-HorizontalAlign="Left"></asp:BoundField>
                    <asp:BoundField DataField="AddressLine1" HeaderText="Address Line" HeaderStyle-HorizontalAlign="Left"></asp:BoundField>
                    <asp:BoundField DataField="City" HeaderText="City" ></asp:BoundField>
                    <asp:BoundField DataField="StateProvinceID" HeaderText="State Province ID" HeaderStyle-Width="8%"></asp:BoundField>
                    <asp:BoundField DataField="StateProvinceID" HeaderText="State Province ID" HeaderStyle-Width="8%"></asp:BoundField>
                    <asp:BoundField DataField="StateProvinceID" HeaderText="State Province ID" HeaderStyle-Width="8%"></asp:BoundField>
                    <asp:BoundField DataField="StateProvinceID" HeaderText="State Province ID" HeaderStyle-Width="8%"></asp:BoundField>
                </Columns>
            </asp:GridView>
    

    C#:

    protected void GridView4_RowCreated(object sender, GridViewRowEventArgs e)
            {
                if (e.Row.RowType == DataControlRowType.Header)
                {
                    GridView HeaderGrid = (GridView)sender;
                    GridViewRow HeaderGridRow = new GridViewRow(0, -1, DataControlRowType.Header, DataControlRowState.Normal);
                    TableCell HeaderCell = new TableCell();
                    HeaderCell.Text = "";
                    HeaderCell.ColumnSpan = 2;
                    HeaderGridRow.Cells.Add(HeaderCell);
    
                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Sale";
                    HeaderCell.ColumnSpan = 2;
                    HeaderGridRow.Cells.Add(HeaderCell);
    
                    HeaderCell = new TableCell();
                    HeaderCell.Text = "Purchase";
                    HeaderCell.ColumnSpan = 2;
                    HeaderGridRow.Cells.Add(HeaderCell);
    
                    GridView4.Controls[0].Controls.AddAt(0, HeaderGridRow);
    
                }
            }

    Thursday, August 23, 2018 2:11 PM
  • User-1499457942 posted

    Hi

      In normal gridvew my code also works but below error  comes when Gridview is converted into Jquery Datatable

    Error - The table must contain row sections in order of header, body, then footer.

    Thanks

    Thursday, August 23, 2018 2:15 PM
  • User1992938117 posted

    Your question <g class="gr_ gr_10 gr-alert gr_spell gr_inline_cards gr_run_anim ContextualSpelling ins-del multiReplace" id="10" data-gr-id="10">diesnot</g> match with the code provided, I hope you are looking to customize the Grid with <g class="gr_ gr_108 gr-alert gr_gramm gr_inline_cards gr_run_anim Grammar only-ins doubleReplace replaceWithoutSep" id="108" data-gr-id="108">header</g> in 2 rows, if so please try below code:

    Designer#

     <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField HeaderText="Location Code">
    
                    <HeaderTemplate>
                        <table style="width: 100%; border: 1px solid black; table-layout: fixed;">
                            <tr>
                                <td>&nbsp;</td>
                                <td>&nbsp;</td>
                                <td colspan="2" style="text-align: center;">Sale</td>
                                <td colspan="2" style="text-align: center;">Purchase</td>
                            </tr>
                            <tr>
                                <td>Location Code</td>
                                <td>Name</td>
                                <td>Apr</td>
                                <td>May</td>
                                <td>Apr</td>
                                <td>May</td>
                            </tr>
                        </table>
                    </HeaderTemplate>
                    <ItemTemplate>
                        <table style="width: 100%; border: 1px solid black; table-layout: fixed;">
                            <tr>
                                <td>
                                    <asp:Label ID="Label1" runat="server" Text='<%# Bind("Location") %>'></asp:Label></td>
                                <td>
                                    <asp:Label ID="Label2" runat="server" Text='<%# Bind("Name") %>'></asp:Label></td>
                                <td>
                                    <asp:Label ID="Label3" runat="server" Text='<%# Bind("Apr1") %>'></asp:Label></td>
                                <td>
                                    <asp:Label ID="Label4" runat="server" Text='<%# Bind("May1") %>'></asp:Label></td>
                                <td>
                                    <asp:Label ID="Label5" runat="server" Text='<%# Bind("Apr2") %>'></asp:Label></td>
                                <td>
                                    <asp:Label ID="Label6" runat="server" Text='<%# Bind("May2") %>'></asp:Label></td>
                            </tr>
                        </table>
                    </ItemTemplate>
    
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <style>
            table {
                border-collapse: collapse;
            }
    
            table, th, td {
                border: 1px solid black;
            }
        </style>

    Code#

      protected void Page_Load(object sender, EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    DataTable table = GetTable();
    
                    GridView1.DataSource = table;
                    GridView1.DataBind();
                }
            }
            static DataTable GetTable()
            {
                // Here we create a DataTable with four columns.
                DataTable table = new DataTable();
                table.Columns.Add("Location", typeof(string));
                table.Columns.Add("Name", typeof(string));
                table.Columns.Add("Apr1", typeof(DateTime));
                table.Columns.Add("May1", typeof(DateTime));
                table.Columns.Add("Apr2", typeof(DateTime));
                table.Columns.Add("May2", typeof(DateTime));
    
                // Here we add five DataRows.
                table.Rows.Add("IN01", "David", DateTime.Now.AddMonths(-5), DateTime.Now.AddMonths(-4), DateTime.Now.AddMonths(-5), DateTime.Now.AddMonths(-4));
                table.Rows.Add("IN02", "Sam", DateTime.Now.AddMonths(-5), DateTime.Now.AddMonths(-2), DateTime.Now.AddMonths(-4), DateTime.Now.AddMonths(-1));
                table.Rows.Add("IN03", "Christoff", DateTime.Now.AddMonths(-5), DateTime.Now.AddMonths(-4), DateTime.Now.AddMonths(-5), DateTime.Now.AddMonths(-3));
                table.Rows.Add("IN04", "Janet", DateTime.Now.AddMonths(-5), DateTime.Now.AddMonths(-1), DateTime.Now.AddMonths(-5), DateTime.Now.AddMonths(-1));
                table.Rows.Add("IN05", "Melanie", DateTime.Now.AddMonths(-5), DateTime.Now.AddMonths(-3), DateTime.Now.AddMonths(-5), DateTime.Now.AddMonths(-2));
                return table;
            }

    Result:

    Thursday, August 23, 2018 2:33 PM
  • User-1499457942 posted

    Hi Rajneesh

      I have structure like this . How it can be done now

    <Columns>
                                
                                <asp:TemplateField>
                                    <HeaderTemplate>
                                        <asp:CheckBox ID = "chkAll" runat="server" AutoPostBack="true" OnCheckedChanged="OnCheckedChanged" />
                                    </HeaderTemplate>
                                    <ItemTemplate>
                                        <asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="OnCheckedChanged" />
                                        <asp:HiddenField ID="hdfEntryNo" runat="server" Value='<%# Bind("EntryNo") %>' />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText = "Sr.">
                                    <ItemTemplate>
                                        <asp:Label ID="lblRowNumber" Text='<%# Container.DataItemIndex + 1 %>' runat="server" />
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:BoundField DataField="Category" HeaderText = "Type" ReadOnly="True" SortExpression="Category"/>
                                <asp:BoundField DataField="Department"  HeaderText = "Department" ReadOnly="True" SortExpression="Department" />
    
    
                                <asp:TemplateField HeaderText = "Location">
                                    <ItemTemplate>
                                        <asp:ListBox ID="lstBox"  SelectionMode="multiple" runat="server"></asp:ListBox>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText = "Amount">
                                    <ItemTemplate>
                                        <asp:Label ID="lblAmount" runat="server" Text='<%# Eval("Amount") %>' CssClass="mytxtWidth75"></asp:Label>
                                        <asp:TextBox ID="txtAmount" Text='<%# Eval("Amount") %>'  CssClass="mytxtWidth75" runat="server" Visible = "false"/>
                                    </ItemTemplate>
                                </asp:TemplateField>
    
    <asp:TemplateField HeaderText = "April">
                                    <ItemTemplate>
                                        <asp:Label ID="lblApril" runat="server" Text='<%# Eval("April") %>'></asp:Label>
                                        <asp:TextBox ID="txtApril" Text='<%# Eval("April") %>' CssClass="mytxtWidth30" runat="server" Visible = "false"/>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText = "May">
                                    <ItemTemplate>
                                        <asp:Label ID="lblMay" runat="server" Text='<%# Eval("May") %>'></asp:Label>
                                        <asp:TextBox ID="txtMay" Text='<%# Eval("May") %>' CssClass="mytxtWidth30" runat="server" Visible = "false"/>
                                    </ItemTemplate>
                                </asp:TemplateField>
    </Columns>

    Thanks

    Thursday, August 23, 2018 2:59 PM
  • User1992938117 posted

    You have to change bound fields to Template fields and keep only one TemplateField with one Header & One ItemTemplate.

    In each Header & Item Template place table and now place <g class="gr_ gr_229 gr-alert gr_gramm gr_inline_cards gr_run_anim Style multiReplace" id="229" data-gr-id="229">each .</g>net control to respective <td>

    Thursday, August 23, 2018 3:05 PM
  • User-1499457942 posted

    Hi

      Can u pls help me with little code

    Thanks

    Thursday, August 23, 2018 3:12 PM
  • User-893317190 posted

    Hi JagjitSingh,

    You could add  your heading at client side using jquery.

    Because   datatable.js needs  specific format of your table , if you change the format of your gridview at code behind, it will make datatable not work.

    So if you want to add header , you should do it after call the datatable method.

    Below is a small sample.

      <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
               
               >
               <Columns>
                   <asp:BoundField 
                       DataField="LocationCode" HeaderText="Location Code"
                       />
                   <asp:BoundField 
                       DataField="Name" HeaderText="Name"
                       />
                   <asp:BoundField 
                       DataField="Apr1" HeaderText="Apr"
                       />
                   <asp:BoundField 
                       DataField="May1" HeaderText="May"
                       />
                   <asp:BoundField 
                       DataField="Apr2" HeaderText="Apr"
                       />
                   <asp:BoundField 
                       DataField="Apr2" HeaderText="May"
                       />
                   
               </Columns>
    
           </asp:GridView>
    
            <script>
                $(function () {
    
                    $("<thead class='bg-primary text-white'></thead>").append($("#GridView1 tr:first")).prependTo($("#GridView1"));
                    $('#GridView1').dataTable();
    
                    $("#GridView1 thead").prepend("<tr><th></th><th></th><th colspan='2'  >Sale</th><th colspan='2'>Purchase</th></tr>")
    
                })
            </script>
        </form>

    Code behind.

     ArrayList list = new ArrayList()
                { new { LocationCode = "code1", Name = "name1", Apr1 = "Apr11", May1 = "May11", Apr2 = "Apr12", May2 = "May12" },
                
                    new { LocationCode = "code2", Name = "name2", Apr1 = "Apr21", May1 = "May21", Apr2 = "Apr22", May2 = "May22" },
                    new { LocationCode = "code3", Name = "name3", Apr1 = "Apr31", May1 = "May31", Apr2 = "Apr32", May2 = "May32" },
                    new { LocationCode = "code4", Name = "name4", Apr1 = "Apr41", May1 = "May41", Apr2 = "Apr42", May2 = "May42" },
                    new { LocationCode = "code5", Name = "name5", Apr1 = "Apr51", May1 = "May51", Apr2 = "Apr52", May2 = "May52" }};
                GridView1.DataSource = list;
                GridView1.DataBind();

    The result.

    Best regards,

    Ackerly Xu

    Wednesday, September 12, 2018 9:07 AM