[Solved] ASP.Net GridView: Display multiple columns under one heading

Gridview code :

<div class="table-responsive">
    <asp:UpdatePanel ID="ExistingBuilderGrid_UpdatePanel" runat="server">
        <ContentTemplate>
            <asp:GridView ID="ExistingBuilderGrid" CssClass="table" EnableViewState="False" AutoGenerateColumns="False"
                AllowSorting="true" OnSorting="ExistingBuilderGrid_OnSorting" AllowPaging="True"
                PageSize="10" PagerStyle-CssClass="custompaging" OnPageIndexChanging="ExistingBuilderGrid_OnPageIndexChanging"
                DataKeyNames="bldr_id" DataSourceID="ExistingBuilderDataSource" runat="server"
                EmptyDataText="No Builders Found !" OnDataBound="ExistingBuilderGrid_OnDataBound"
                OnRowDataBound="ExistingBuilderGrid_OnRowDataBound" OnRowDeleting="ExistingBuilderGrid_OnRowDeleting"
                OnSelectedIndexChanged="ExistingBuilderGrid_OnSelectedIndexChanged" OnRowDeleted="ExistingBuilderGrid_OnRowDeleted">
                <Columns>
                    <asp:TemplateField HeaderText="bldr_id" Visible="False">
                        <ItemTemplate>
                            <asp:Label ID="bldr_id" runat="server" Text='<%# Bind("bldr_id") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Business Logo">
                        <ItemTemplate>
                            <asp:Image ID="BSLogoImage" onerror="this.onload = null; this.src='http://www.placehold.it/84x84&text=No+Logo';"
                                runat="server" Height="70" Width="70" AlternateText="&nbsp;" ImageAlign="Middle"
                                CssClass="img-thumbnail" ImageUrl='<%# Bind("file_path") %>' />
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="bldr_name" HeaderText="Business Name" SortExpression="bldr_name" />
                    <asp:BoundField DataField="bldr_trading_as" HeaderText="Business Trading As" SortExpression="bldr_trading_as" />
                    <asp:TemplateField HeaderText="Business Sub-Category" SortExpression="Sub_Categ">
                        <ItemTemplate>
                            <asp:Label ID="SubCatName" runat="server" Text='<%# Bind("Sub_Categ") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField DataField="bldr_f1_name" HeaderText="Field" SortExpression="bldr_f1_name" />
                    <asp:BoundField DataField="bldr_f1_value" HeaderText="Value" SortExpression="bldr_f1_value" />
                    <asp:BoundField DataField="bldr_f2_name" HeaderText="Field" SortExpression="bldr_f2_name" />
                    <asp:BoundField DataField="bldr_f2_value" HeaderText="Value" SortExpression="bldr_f2_value" />
                    <asp:BoundField DataField="bldr_add_city_suburb" HeaderText="City/Suburb" SortExpression="bldr_add_city_suburb" />
                    <asp:TemplateField HeaderText="Status" SortExpression="bldr_isactive">
                        <ItemTemplate>
                            <asp:Label ID="Status" runat="server" Text='<%# (Boolean.Parse(Eval("bldr_isactive").ToString())) ? "Active" : "In-Active" %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:CommandField ShowSelectButton="True" SelectText="<img id='LnkSelect' src='assets/images/edit.png' onclick='return ScrollToHead()' border=0 >">
                    </asp:CommandField>
                    <asp:CommandField ShowDeleteButton="True" DeleteText="<img id='LnkSelect' src='assets/images/delete.png' onclick='removeDiv()'  border=0 >">
                    </asp:CommandField>
                </Columns>
                <FooterStyle CssClass="panel-heading" />
                <HeaderStyle CssClass="customGridViewHeader" ForeColor="Black" />
                <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />
                <RowStyle BackColor="#FFFFFF" />
                <SelectedRowStyle BackColor="#dfdfdf" Font-Bold="True" ForeColor="Black" />
                <SortedAscendingCellStyle BackColor="#FFF1D4" ForeColor="Black" />
                <SortedAscendingHeaderStyle CssClass="customGridViewHeader" ForeColor="Black" />
                <SortedDescendingCellStyle BackColor="#F1E5CE" ForeColor="Black" />
                <SortedDescendingHeaderStyle CssClass="customGridViewHeader" ForeColor="Black" />
            </asp:GridView>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ClearSearch_CMP" EventName="Click" />
            <asp:AsyncPostBackTrigger ControlID="SearchButton" EventName="Click" />
            <asp:AsyncPostBackTrigger ControlID="ChkAll" />
            <asp:AsyncPostBackTrigger ControlID="ChkAct" />
            <asp:AsyncPostBackTrigger ControlID="ChkInct" />
        </Triggers>
    </asp:UpdatePanel>
    <asp:UpdateProgress ID="UpdateProgress2" AssociatedUpdatePanelID="ExistingBuilderGrid_UpdatePanel"
        DynamicLayout="True" DisplayAfter="500" runat="server">
        <ProgressTemplate>
            <div class="progress progress-striped active">
                <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="100"
                    aria-valuemin="0" aria-valuemax="100" style="width: 100%">
                </div>
            </div>
        </ProgressTemplate>
    </asp:UpdateProgress>
    <asp:SqlDataSource ID="ExistingBuilderDataSource" runat="server" EnableCaching="False"
        EnableViewState="False" ConnectionString="<%$ ConnectionStrings:BSDConnectionString %>"
        SelectCommand="" DeleteCommand="">
        <DeleteParameters>
            <asp:Parameter Name="bldr_id" Type="Int32" />
            <asp:SessionParameter Name="do_ID" SessionField="do_ID" Type="Int32" />
        </DeleteParameters>
        <SelectParameters>
            <asp:SessionParameter DefaultValue="0" Name="bldr_createdby" SessionField="LogInID"
                Type="Int32" />
        </SelectParameters>
    </asp:SqlDataSource>
</div>

and rendered gridview is like this :

<div class="table-responsive">
<div id="bodyHolder_ExistingBuilderGrid_UpdatePanel">
    <div>
        <table class="table" rules="all" id="bodyHolder_ExistingBuilderGrid" style="border-collapse: collapse;"
            border="1" cellspacing="0">
            <tbody>
                <tr class="customGridViewHeader" style="color: Black;">
                    <th scope="col">
                        Business Logo
                    </th>
                    <th scope="col">
                        <a href="javascript:__doPostBack('ctl00$bodyHolder$ExistingBuilderGrid','Sort$bldr_name')"
                            style="color: Black;">Business Name</a>
                    </th>
                    <th scope="col">
                        <a href="javascript:__doPostBack('ctl00$bodyHolder$ExistingBuilderGrid','Sort$bldr_trading_as')"
                            style="color: Black;">Business Trading As</a>
                    </th>
                    <th scope="col">
                        <a href="javascript:__doPostBack('ctl00$bodyHolder$ExistingBuilderGrid','Sort$Sub_Categ')"
                            style="color: Black;">Business Sub-Category</a>
                    </th>
                    <th scope="col">
                        <a href="javascript:__doPostBack('ctl00$bodyHolder$ExistingBuilderGrid','Sort$bldr_f1_name')"
                            style="color: Black;">Field</a>
                    </th>
                    <th scope="col">
                        <a href="javascript:__doPostBack('ctl00$bodyHolder$ExistingBuilderGrid','Sort$bldr_f1_value')"
                            style="color: Black;">Value</a>
                    </th>
                    <th scope="col">
                        <a href="javascript:__doPostBack('ctl00$bodyHolder$ExistingBuilderGrid','Sort$bldr_f2_name')"
                            style="color: Black;">Field</a>
                    </th>
                    <th scope="col">
                        <a href="javascript:__doPostBack('ctl00$bodyHolder$ExistingBuilderGrid','Sort$bldr_f2_value')"
                            style="color: Black;">Value</a>
                    </th>
                    <th scope="col">
                        <a href="javascript:__doPostBack('ctl00$bodyHolder$ExistingBuilderGrid','Sort$bldr_add_city_suburb')"
                            style="color: Black;">City/Suburb</a>
                    </th>
                    <th scope="col">
                        <a href="javascript:__doPostBack('ctl00$bodyHolder$ExistingBuilderGrid','Sort$bldr_isactive')"
                            style="color: Black;">Status</a>
                    </th>
                    <th scope="col">
                        &nbsp;
                    </th>
                    <th scope="col">
                        &nbsp;
                    </th>
                </tr>
                <tr style="background-color: White;">
                    <td>
                        <img id="bodyHolder_ExistingBuilderGrid_BSLogoImage_0" class="img-thumbnail" onerror="this.onload = null; this.src='http://www.placehold.it/84x84&amp;text=No+Logo';"
                            src="http://www.placehold.it/84x84&amp;text=No+Logo" alt="&nbsp;" style="height: 70px;
                            width: 70px;" align="middle">
                    </td>
                    <td>
                        City homes builder
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <span id="bodyHolder_ExistingBuilderGrid_SubCatName_0">Residential Builder</span>
                    </td>
                    <td>
                        ABN
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        ACN
                    </td>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        Canberra
                    </td>
                    <td>
                        <span id="bodyHolder_ExistingBuilderGrid_Status_0">Active</span>
                    </td>
                    <td>
                        <a href="javascript:__doPostBack('ctl00$bodyHolder$ExistingBuilderGrid','Select$0')">
                            <img id="LnkSelect" src="assets/images/edit.png" onclick="return ScrollToHead()"
                                border="0"></a>
                    </td>
                    <td>
                        <a href="javascript:__doPostBack('ctl00$bodyHolder$ExistingBuilderGrid','Delete$0')">
                            <img id="LnkSelect" src="assets/images/delete.png" onclick="removeDiv()" border="0"></a>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<div aria-hidden="true" role="status" id="bodyHolder_UpdateProgress2" style="display: none;">
    <div class="progress progress-striped active">
        <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="100"
            aria-valuemin="0" aria-valuemax="100" style="width: 100%">
        </div>
    </div>
</div>

Here's the picture explanation

I want to merger both Fields and both Values column HEADER to one Header cell like Business Assigned Resource ...

NOTE:

Please dont merge the data cells , only merge header cells