Question

I have a grid named ‘GridView1’ contains two columns ‘Date’ and ‘Session Details’ I am displaying like this way only:

<asp:GridView ID="GridView1" OnRowCommand="ScheduleGridView_RowCommand" 
    runat="server" AutoGenerateColumns="False" Height="60px"
    Style="text-align: center" Width="869px" EnableViewState="False">
    <Columns>
        <asp:BoundField HeaderText="Date" DataField="Date">
            <HeaderStyle Width="80px" />
        </asp:BoundField>
        <asp:BoundField DataField="" HeaderText="Session Detais" />
    </Columns>

But here I need to display 3 column sections downside Session details without any column borders for each dates, how can I achieve this.

Date                                                                SessionDetails

06-04-2010                       Time-(value from database)         Topic-(value from database)    Head-(value from database)


-------                               ------------------               -------------------            ----------------------

Answer 1

You’re going to want to use a TemplateField to define the layout yourself. Something like this will do it:

<asp:GridView ID="GridView1" OnRowCommand="ScheduleGridView_RowCommand" 
    runat="server" AutoGenerateColumns="False" Height="60px"
    Style="text-align: center" Width="869px" EnableViewState="False">
    <Columns>
        <asp:BoundField HeaderText="Date" DataField="Date">
            <HeaderStyle Width="80px" />
        </asp:BoundField>
        <asp:TemplateField>
            <HeaderTemplate>
                Session Details
            </HeaderTemplate>
            <ItemTemplate>
                <span class="col"><%# Eval("Time") %></span>
                <span class="col"><%# Eval("Topic") %></span>
                <span class="col"><%# Eval("Head") %></span>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

Note: You’ll have to replace Time, Topic, and Head with your real values if they differ. You can then style the placement of the 3 span tags with a style such as:

<style type="text/css">
    .col { width: 100px; float: left; }
</style>