Multiple Row per Record RadGrid

[David]

I am trying to figure out how to accomplish this.  I am not sure if the RadGrid is best use

I have a data query that will return one or more records

Example - data returned may look like

UserID, User Full Name, User Status, Hire Date, Manager Name, Location, Skill Set, Last Review

And I want to format it as

Record 1

Row - User ID, User Full Name, User Status, Hire Date, Manager Name

Row - Location, Skill Set, Last Review

Next Record

Row - User ID, User Full Name, User Status, Hire Date, Manager Name

Row - Location, Skill Set, Last Review

Etc. 

I no problem filling data adapter, filling data table and then binding to grid in single row to record, but setting up multiple rows per record I am struggling. 

Thanks

[Rumen]

Hi,

Thank you for reaching out to Telerik Support!

Based on your requirements, RadGrid is indeed the right choice for this scenario. You can achieve the multi-row per record layout using the DetailItemTemplate property of the MasterTableView. This template automatically renders additional content below each data row, giving you the exact layout you described.

Solution Overview

Row 1 (Grid Columns): User ID, User Full Name, User Status, Hire Date, Manager Name
Row 2 (DetailItemTemplate): Location, Skill Set, Last Review

ASPX

    <style type="text/css">
        .detail-row {
            background-color: #f5f5f5;
            padding: 8px 12px;
            border-bottom: 2px solid #ccc;
        }
        .detail-row td {
            padding: 4px 15px 4px 0;
        }
        .detail-label {
            font-weight: bold;
            color: #555;
        }
    </style>
        

<telerik:RadGrid ID="RadGrid1" runat="server" 
            OnNeedDataSource="RadGrid1_NeedDataSource"
            AllowPaging="true" 
            PageSize="10"
            Skin="Bootstrap">
            <MasterTableView AutoGenerateColumns="false" DataKeyNames="UserID">
                <Columns>
                    <telerik:GridBoundColumn DataField="UserID" HeaderText="User ID" />
                    <telerik:GridBoundColumn DataField="UserFullName" HeaderText="Full Name" />
                    <telerik:GridBoundColumn DataField="UserStatus" HeaderText="Status" />
                    <telerik:GridBoundColumn DataField="HireDate" HeaderText="Hire Date" DataFormatString="{0:MM/dd/yyyy}" />
                    <telerik:GridBoundColumn DataField="ManagerName" HeaderText="Manager" />
                </Columns>
                <DetailItemTemplate>
                    <table class="detail-row" style="width: 100%;">
                        <tr>
                            <td>
                                <span class="detail-label">Location:</span> <%# Eval("Location") %>
                            </td>
                            <td>
                                <span class="detail-label">Skill Set:</span> <%# Eval("SkillSet") %>
                            </td>
                            <td>
                                <span class="detail-label">Last Review:</span> <%# Eval("LastReview", "{0:MM/dd/yyyy}") %>
                            </td>
                        </tr>
                    </table>
                </DetailItemTemplate>
            </MasterTableView>
        </telerik:RadGrid>

ASPX.CS

    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        RadGrid1.DataSource = GetEmployeeData();
    }

    private DataTable GetEmployeeData()
    {
        DataTable dt = new DataTable();

        // Row 1 fields
        dt.Columns.Add("UserID", typeof(int));
        dt.Columns.Add("UserFullName", typeof(string));
        dt.Columns.Add("UserStatus", typeof(string));
        dt.Columns.Add("HireDate", typeof(DateTime));
        dt.Columns.Add("ManagerName", typeof(string));

        // Row 2 fields (displayed in DetailItemTemplate)
        dt.Columns.Add("Location", typeof(string));
        dt.Columns.Add("SkillSet", typeof(string));
        dt.Columns.Add("LastReview", typeof(DateTime));

        // Sample employee data
        string[] names = { "John Smith", "Jane Doe", "Michael Johnson", "Emily Davis", "Robert Wilson",
                           "Sarah Brown", "David Lee", "Jennifer Garcia", "William Martinez", "Lisa Anderson",
                           "James Taylor", "Maria Thomas", "Daniel Jackson", "Nancy White", "Christopher Harris" };

        string[] statuses = { "Active", "On Leave", "Active", "Probation", "Active" };
        string[] managers = { "Alice Cooper", "Bob Freeman", "Carol King", "Dan Murphy", "Eve Rogers" };
        string[] locations = { "New York", "Los Angeles", "Chicago", "Houston", "Phoenix", "Philadelphia", "San Antonio" };
        string[] skills = { "C#, ASP.NET, SQL", "JavaScript, React, Node.js", "Python, Django, PostgreSQL",
                            "Java, Spring, Oracle", "Azure, DevOps, Docker", ".NET, Angular, MongoDB" };

        Random rand = new Random(42);

        for (int i = 0; i < 25; i++)
        {
            DataRow row = dt.NewRow();
            row["UserID"] = 1000 + i;
            row["UserFullName"] = names[i % names.Length];
            row["UserStatus"] = statuses[i % statuses.Length];
            row["HireDate"] = DateTime.Today.AddDays(-rand.Next(365, 3650));
            row["ManagerName"] = managers[i % managers.Length];
            row["Location"] = locations[i % locations.Length];
            row["SkillSet"] = skills[i % skills.Length];
            row["LastReview"] = DateTime.Today.AddDays(-rand.Next(30, 365));
            dt.Rows.Add(row);
        }

        return dt;
    }

Key Points

• DetailItemTemplate - Renders as part of each data item (no expand/collapse required), creating a seamless two-row per record appearance.
• Data Binding - Your existing DataTable/DataAdapter approach will work perfectly. Just ensure all fields (including Location, SkillSet, LastReview) are included in your data source.
• Use NeedDataSource - We recommend binding in the NeedDataSource event rather than Page_Load for optimal performance.
• Styling - You can add CSS to visually distinguish the detail row (background color, borders, etc.).

Alternative Approach

If you need even more control over the layout, you can use a single GridTemplateColumn with an HTML table in the ItemTemplate to render both rows within one cell spanning all columns.

Regards,
Rumen
Progress Telerik

[David]

Fantastic and thank you.  Let me give that a shot.  Seems very straight forward