Click here to Skip to main content
15,867,885 members
Articles / Web Development / HTML
Article

Merging DataGrid header columns

Rate me:
Please Sign up or sign in to vote.
3.86/5 (5 votes)
15 Dec 20061 min read 72.2K   1.1K   40   2
This article describes the technique to merge the header of a DataGrid by modifying the HTML in a tricky way.

Sample Image

Introduction

This article describes the technique to merge the header of a DataGrid by modifying the HTML in a tricky way.

Background

Some time ago, the requirement came to provide a common title to many sub-titles; for example, imagine that you want to display records containing account, inventory, and payment information.

  • Account information contains company name, website, and contact person.
  • Inventory contains bill number and bill date.
  • Payment details contain amount and payment type.

Now in this situation, you have to merge different DataGrid header columns to one common DataGrid header.

Using the code

To display common headers in DataGrid, write your code as below. First, put your DataGrid in a Table tag, and write your first <asp:TemplateColumn> in the <Columns> section like:

HTML
<table id="headingtable" 
    style="FONT-WEIGHT: bold; COLOR: #244668" borderColor="#000033"
    height="100%" cellSpacing="0" 
    cellPadding="0" border="0" runat="server">
<tr>
    <td><asp:datagrid id="grdSearchResult" Runat="server" 
            AllowPaging="True" AutoGenerateColumns="False" 
            AllowSorting="True" BackColor="white">
        <ItemStyle Height="30px" VerticalAlign="Top" 
             CssClass="GrdItemStyle"></ItemStyle>
        <AlternatingItemStyle Height="30px" 
            CssClass="GrdItemStyle"></AlternatingItemStyle>
        <HeaderStyle CssClass="GrdHeaderStyle"></HeaderStyle>
        <Columns>
        <asp:TemplateColumn ItemStyle-BorderColor="#000033" 
            ItemStyle-Width="25Px" ItemStyle-Wrap="True" 
            HeaderStyle-CssClass="GrdExtraHeader">
        <HeaderTemplate>Edit
    </td>
    <td width="500" class="GrdExtraHeader" colspan="3" 
           align="center">Account Information</td>
    <td width="325" class="GrdExtraHeader" 
           colspan="2" align="center">Inventory</td>
    <td width="225" class="GrdExtraHeader" colspan="2" 
           align="center">Payment Details</td>
</tr>
<td Align="Center" Height="25px" bgcolor="#244668" 
       class="GrdHeaderStyle" BorderColor="#000033"></td>
</HeaderTemplate>
<ItemTemplate>
    <asp:CheckBox id="chkEdit" Runat="server" Width="25">
    </asp:CheckBox>
</ItemTemplate>
</asp:TemplateColumn>

Please note that you have to close the td tag, i.e., </td> after giving the header template name. And then put the rest of the common header in a new TD by specifying the colspan attribute, which contains the total number of columns you want to merge, i.e., <td width="500" class="GrdExtraHeader" colspan="3" align="center">Account Information</td>. Here Account Information has three sub-headers. Close the row (</tr>) after the last common header. In the above code, you can find this after "Payment Details". The reason behind closing the TR tag is that we have to display all sub-headers in the second row. Write the rest of your DataGrid columns code in a standard way. Find the code below.

HTML
<asp:TemplateColumn HeaderText="Company" HeaderStyle-CssClass="GrdHeaderStyle" 
       ItemStyle-Width="100Px" ItemStyle-Wrap="True" 
       ItemStyle-CssClass="GrdItemStyle">
    <ItemTemplate>
        <asp:Label ID="lblCompanyName"  Width="100px" 
             Runat="server" 
             text='<%# DataBinder.Eval(
                Container.DataItem,"company_name") %>'>
        </asp:Label>
        </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="WebSite" 
            HeaderStyle-CssClass="GrdHeaderStyle" 
            ItemStyle-Width="100Px" ItemStyle-Wrap="True" 
            ItemStyle-CssClass="GrdItemStyle">
        <ItemTemplate>
            <asp:Label ID="lblWebSiteName" Width="150px" 
                  Runat="server" 
                  text='<%# DataBinder.Eval(
                    Container.DataItem,"website_name") %>'>
            </asp:Label>
        </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Contact" 
                HeaderStyle-CssClass="GrdHeaderStyle" 
                ItemStyle-Width="100Px" ItemStyle-Wrap="True" 
                ItemStyle-CssClass="GrdItemStyle">
        <ItemTemplate>
            <asp:Label ID="lblContactPersonName" Width="100px" 
                Runat="server" 
                text='<%# DataBinder.Eval(
                  Container.DataItem,"contact_person_name") %>'>
            </asp:Label>
        </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Bill No" 
            HeaderStyle-CssClass="GrdHeaderStyle" 
            ItemStyle-Width="75Px"
            ItemStyle-Wrap="True" 
            ItemStyle-HorizontalAlign="Right" 
            ItemStyle-CssClass="GrdItemStyle">
        <ItemTemplate>
            <asp:Label ID="lblBillno" Width="75px" 
                Runat="server" 
                text='<%# DataBinder.Eval(
                        Container.DataItem,"BillNo") %>'>
            </asp:Label>
        </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Bill Date" 
          HeaderStyle-CssClass="GrdHeaderStyle" 
          ItemStyle-Width="75Px" ItemStyle-Wrap="True" 
          ItemStyle-HorizontalAlign="Right" 
          ItemStyle-CssClass="GrdItemStyle">
        <ItemTemplate>
            <asp:Label ID="lblBillDate" Width="125px" 
               Runat="server" 
               text='<%# DataBinder.Eval(
                     Container.DataItem,"BillDate") %>'>
            </asp:Label>
        </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Amount" 
          HeaderStyle-CssClass="GrdHeaderStyle" 
          ItemStyle-Width="75Px"
          ItemStyle-Wrap="True" ItemStyle-CssClass="GrdItemStyle">
        <ItemTemplate>
            <asp:Label ID="lblamount" Width="75px" 
                 Runat="server" 
                 text='<%# DataBinder.Eval(
                       Container.DataItem,"Amount") %>'>
            </asp:Label>
        </ItemTemplate>
    </asp:TemplateColumn>
    <asp:TemplateColumn HeaderText="Payment Type" 
               HeaderStyle-CssClass="GrdHeaderStyle" 
               ItemStyle-CssClass="GrdItemStyle">
        <ItemTemplate>
            <asp:Label ID="lblPayout" Width="75px" Runat="server" 
               text='<%# DataBinder.Eval(
                       Container.DataItem,"payment_type") %>'>
            </asp:Label>
        </ItemTemplate>
    </asp:TemplateColumn>
    </columns> </asp:datagrid></TD></TR>
</table>

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
i am a software engineer in a Cybage Software Pvt. ltd. - Pune. and currrently working on a ASP.NET and C#,SQLServer2000, Accipiter AdServer.

Comments and Discussions

 
QuestionModify the EDIT header to span two rows Pin
bl_miles15-Feb-12 2:17
bl_miles15-Feb-12 2:17 
Generalnote Pin
DenisUsp11-May-07 10:55
DenisUsp11-May-07 10:55 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.