Grouped Gridview With Expandable Groups

Question

There are a number of questions around the topic of nesting gridviews or having sub-gridviews. I have considered this approach but it is too much for my purposes. The closest ex

Answer 1

Since you don't provide your actual code, I put together an example on how to accomplish what you need based off of this other question.

That other question simply takes the files on the server's drive C and groups them by creation time in descending order in a grid. So here's the repeater markup:

Here's the code behind for the OnRowDataBound event; written in C# since that's what you use:

private int month = -1;
private int year = -1;
protected void rpt_RowDataBound(object sender, RepeaterItemEventArgs e)
{
    if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
    {
        //Binding to FileInfo objects. 
        //Since we are grouping by CreationTime we need to check if it's time to create a new "group"
        //Is current month and year different from the value previously stored on the month and year variables?
        if (month != (e.Item.DataItem as FileInfo).CreationTime.Month || year != (e.Item.DataItem as FileInfo).CreationTime.Year)
        {   
            month = (e.Item.DataItem as FileInfo).CreationTime.Month;
            year = (e.Item.DataItem as FileInfo).CreationTime.Year;

            //append the current group to the hidden variable "dataGroups" which will tell us quickly how many groups we have in total
            dataGroups.Value += (e.Item.DataItem as FileInfo).CreationTime.ToString("yyyMM") + ",";
        }
        //for every row; "stamp it" with this attribute since we'll use it on the client side with jQuery
        (e.Item.FindControl("tableItem") as HtmlTable).Attributes.Add("data-group", (e.Item.DataItem as FileInfo).CreationTime.ToString("yyyMM"));
    }
}

Now on the client-side; we need to do some jQuery magic in order to build the collapsible panels.

Now, those lines of code produce this: