Collapsable repeater in ASP.NET

Question

I have a repeater that currently displays a list of counties and townships within those counties. The county records and township records are treated the same in the repeator, aside from having different RowFormat attributes. Each record also has a unique id and the unit (whether it be a township or county) name to display. There is also a column for townships to reference their parent counties. I utilize the AlternatingItemTemplate option on the repeator to display alternating colors on each township.

I want to be able to display and hide the township rows when the '+' or '-' images are clicked on each row. To add this image to only the county rows I've added an additional column to the bound DataTable which is either empty (for the townships) or contains a tablecell containing the '+' image:

row["Image"] = "<img src='/includes/plus.gif' />";

This is essentially what I'm after:

I've tried calling a JavaScript function when the user clicks on the '+' or '-' image on the counties, but I'm not really sure how to access all of the child townships from the javascript call to hide them. I also need to switch the countiy's Image field to display the opposite image (i.e. from '+' -> '-' and vise versa).

<TABLE width="100%" style="border: thin solid #A3A3A3;" cellspacing="0px">
   <asp:repeater id="RepeaterUnits" Runat="server">
    <ItemTemplate>
        <tr '<%# (DataBinder.Eval(Container.DataItem, "RowFormat")) %>' >
            <td style="width: 16px" onclick='ClickCollapse(<%# (DataBinder.Eval(Container.DataItem, "UnitID")) %>);'>
                <%# (DataBinder.Eval(Container.DataItem, "Image")) %>
            </td>
            <td onclick='ClickUnit(<%# (DataBinder.Eval(Container.DataItem, "UnitID")) %>);' width="100%">
                <%# (DataBinder.Eval(Container.DataItem, "UnitName")) %>
            </td>
        </tr>
    </ItemTemplate>
    <AlternatingItemTemplate>
        <tr '<%# (DataBinder.Eval(Container.DataItem, "AltRowFormat")) %>'>
            <td style="width: 16px" onclick='ClickCollapse(<%# (DataBinder.Eval(Container.DataItem, "UnitID")) %>);'>
                <%# (DataBinder.Eval(Container.DataItem, "Image")) %>
            </td>
            <td onclick='ClickUnit(<%# (DataBinder.Eval(Container.DataItem, "UnitID")) %>);' width="100%">
                <%# (DataBinder.Eval(Container.DataItem, "UnitName")) %>
            </td>
        </tr>
    </AlternatingItemTemplate>
</asp:repeater>

I thought about potentially using a repeater for each county inside a datagrid to iterate each county's townships, but as of now I'm storing every record in the same datatable, and therefore would have to separate out the counties and towniships into multiple tables. Can anyone suggest a way to better approach this? I'm relatively new to ASP.NET, so I'm not aware of all of the options available to me.

Answer 1

Can you put the townships inside of a div and then simply show/hide that div?

Answer 2

If you sort your table with two columns as an example by "County, Township" you can effectively loop through it and every time there's a new County you start a new group of Townships.

You can use Repeater's ItemDataBound event in the code behind to do any fancy formatting you need on a per-row basis.