Asp.net Column placement to next row in gridview

Question

Is it possible to move a column to the next row in a gridview somehow?

Like this:
Column placement to next row in gridview

This really is the best way to explain what i'm trying to do.
here's some code for you nice fellows.

ASP.NET

<asp:GridView 
                runat="server" 
                ID="Notifications" 
                CssClass="Notifications" 
                PageSize="30" 
                AllowPaging="true" 
                AutoGenerateColumns="false" 
                ShowHeader="false" 
                OnRowCreated="Notifications_RowCreated">
            <RowStyle CssClass="TableRow" />
            <Columns>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Image ID="IMG_Seen" runat="server" AlternateText="Error" ImageUrl='<%# Eval("cSeen") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Image ID="IMG_Status" runat="server" AlternateText="Error" ImageUrl='<%# Eval("cStatus") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label ID="L_Title" runat="server" Text='<%# Eval("cTitle") %>' />
                    </ItemTemplate>
                </asp:TemplateField>                    
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label ID="L_Date" runat="server" Text='<%# Eval("cDate") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:Label ID="L_Description" runat="server" Text='<%# Eval("cDescription") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField>
                    <ItemTemplate>
                        <asp:LinkButton ID="lLB_inkTo" runat="server" PostBackUrl='<%# Eval("clinkto") %>' />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>   
            </asp:GridView>

C# -Gridview bind method

void Init_Notifications(XDocument xDoc) 
    {
        GridView GV = Notifications;           
        var Root = from p in xDoc.Descendants("User") select p;
        var getNotify = from n in Root.Descendants("Notifications") select n;
        foreach (XElement xe in getNotify.Nodes()) 
        {
            NotifList.Add(new Notification(
                xe.Attribute("ID").Value,
                xe.Attribute("Status").Value,
                xe.Attribute("Title").Value,
                xe.Attribute("Seen").Value,
                xe.Attribute("linkTo").Value,
                xe.Element("Description").Value
                )
            );
        }
        DataTable DT = new DataTable();
        DT.Columns.Add("cDate", typeof(System.String));
        DT.Columns.Add("cStatus", typeof(System.String));
        DT.Columns.Add("cTitle", typeof(System.String));
        DT.Columns.Add("cSeen", typeof(System.String));
        DT.Columns.Add("cDescription", typeof(System.String));
        DT.Columns.Add("clinkTo", typeof(System.String));
        foreach (Notification n in NotifList)
        {
            object[] RowContent = 
            {
                n.pDate,
                n.pStatus,
                n.pTitle,
                n.pSeen,                    
                n.pDescription,
                n.pLinkTo
            };
            DT.Rows.Add(RowContent);
        }
        Notifications.DataSource = DT;
        Notifications.DataBind();
    }

Im basically trying to somehow convert / move this into a new row via codebehind or aspx code.
I couldn't get this to look great using CSS as well

This technically isn't a column. My approach would be to style the first row. — , Oct 10 '13 at 07:43
Im basically trying to somehow convert / move this into a new row via codebehind or aspx code. — Jeroen Vorsselman, Oct 10 '13 at 07:45
My approach may be a bad one, but what I'm proposing is that you stop treating it as a column and instead style the first row. This 5th column you've mentioned will not be able to have any data 'of it's own' as it sits under all of the others, so it's simply one instance of a column header. Making the top row look like a 5th column header is an option (I'll re-iterate, maybe not the best option - but it's all I know for now). — , Oct 10 '13 at 07:48
In response to your edit - getting it to look great is simply a case of writing the right CSS. Not looking great isn't a reason to choose an alternative method. — , Oct 10 '13 at 07:50

score 1 · Accepted Answer · answered Oct 10 '13 at 09:20

Yes that is certainly possible =) You can achieve this by rendering the gridview column as a new table row on your aspx page. Just add a template field in your gridview & include tr, td tags like this

<asp:TemplateField>
                 <ItemTemplate>
                        <tr>
                            <td colspan="100%">
                                <!-- Insert your label, boundfield controls etc -->
                            </td>
                        </tr>
                 </ItemTemplate>
 </asp:TemplateField>

Sample

Asp.net Column placement to next row in gridview

1 Answers1