Home » ASP.NET » GridViews – Multiple Rows Per Record

GridViews – Multiple Rows Per Record

G04B0069 I don’t know about you, but I’ve had several occasions where I’ve needed to use the simplicity of the GridView control in ASP.NET.  DataBinding, Paging, Sorting, etc.  But I’ve also wanted to stack the information for a record in multiple rows.

Most of the time this happens when I need to display data that would take up two or three times as much of the width as my layout will allow.

The solution to this problem is quite simple: Use templated columns and Literal controls.

Assuming you are starting off with a GridView control that renders like this:

Header1Header2Header3Header4Header5
Data1Data2Data3Data4Data5
etc…

But we want to display the data as:

Header1Header2Header3
Header4Header5
Data1Data2Data3
Data4Data5
etc…

To get your GridView to display like this, you will need to:

  1. Turn Header3 and Header4 into a templated columns.
  2. Add the following code into the TemplatedField section for column 3
    <HeaderTemplate>
       <asp:Label ID="Label3" runat="server" Text="Header3"></asp:Label>
       <asp:Literal ID="Literal1" runat="server"
        Text="&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td colspan=&quot;2&quot;&gt;"></asp:Literal>
       <asp:Label ID="Label4" runat="server" Text="Header4"></asp:Label>
    </HeaderTemplate>
    
  3. You’ll want to modify the ItemTemplate and EditItemTemplate so that they have similar Literal tags and add the appropriate control after it for what WAS in column 4.

That’s all there is to it.  Admittedly, there is a bit more work here than just drag and drop, but it beats having to write all of the databinding, paging and sorting code by hand.

 

Other post in ASP.NET

Related Post

  • ASP.NET GridView Edit All Rows At OnceASP.NET GridView Edit All Rows At Once I just saw a question about this yesterday and realized that while I know how to do this, not everyone does.  So, here we go... Here's the problem.  You want to be able to edit […]
  • GridView and Updating A Row ManuallyGridView and Updating A Row Manually A couple of days ago I mentioned a project that I’ve been working on that is a bit out of the ordinary as far as GridViews go.  One of the issues I’ve had is that the edit template […]
  • FormView Edit and AddFormView Edit and Add The FormView generally makes editing a record at a time pretty easy.  However, one of the biggest problems I've seen with this control is that there is no way of telling the FormView to […]
  • Multi-Step Processing in ASP.NETMulti-Step Processing in ASP.NET I received the following question a few days ago but I’ve been so busy with billable work that I just haven’t had a chance to answer it until now.  Actually, I’m still busy, but I […]
  • Access a control by ID From Within a Databound ControlAccess a control by ID From Within a Databound Control Databound controls are at once very easy and very frustrating.  If you just need to do some simple databinding that gets a list of items on the screen and you need the ability to edit […]

About Dave Bush

Dave Bush is a Full Stack ASP.NET developer focusing on ASP.NET, C#, Node.js, JavaScript, HTML, CSS, BootStrap, and Angular.JS.Does your team need additional help in any of the above? Contact Dave today.

One Pingback/Trackback