Summary - Detail relationship

[Tim]

Hi All,

I've had success with my usage of the RadControls for ASP.NET AJAX (4.0) so far, and I'm optimistic that will continue.  I'm looking for a how-to pointer or at least some guidance to avoid going down some dead ends.  Essentially, I want to produce something that resembles this:

http://www.telerik.com/demos/aspnet/prometheus/Grid/Examples/Hierarchy/DeclarativeRelations/DefaultCS.aspx

Using a hypothetical real-estate application, the essential behaviors would be:

The main RadGrid table displays summary rows about available real-estate, for example:

Price   Sq. Footage   Rooms   Baths   Taxes   ...   ...   ...

Then for each row, I'd like to expand it inline and have 3 or 4 fixed (this is what differs from the linked example above)  detail views, for example:

Price   Sq. Footage   Rooms   Baths   Taxes   ...   ...   ...
house row info 1
Bathrooms
Kitchen
Bedrooms
Yard Features

Then each of those detail areas (Bathrooms, Kitchen, etc.) could be further expanded:

Bathrooms
  Bathroom   Shower   Tub   Sinks   Sq. Footage
  1                1            0        2         300
  2                1            1        1         325

Kitchen
  Appliance  Included?  Age  Other
  Fridge        Y             3       Kenmore
  Stove         Y             3       Gas stove
.
.
.

The summary objects contain properties which themselves are collections of elements, with headers and 0 or more rows, i.e., the Kitchen property is a collection of Kitchen objects, which has Kitchen[0].Appliance, Kitchen[0].Included, etc.

Any suggestions on approaching this would be greatly appreciated.

Thank you,
Tim

[Tim]

I have experimented some with this since the OP without success.  Basically I need to have the sub-table say "use this property of the summary row as the data source" and iterate over it as a collection.  Kind of like this:

DataBinder.Eval(Container, "Parent.Parent.BindingContainer.DataItem.Kitchen")

except code blocks aren't allowed in that context.

Tim

[Sebastian]

Hello Tim,

Thank you for the explanation.

I think that for this type of presentation you can take advantage of the new global item template feature of RadGrid for ASP.NET AJAX in combination with standard hierarchy:

http://www.telerik.com/DEMOS/ASPNET/Prometheus/Grid/Examples/GeneralFeatures/CardView/DefaultCS.aspx
http://www.telerik.com/help/aspnet-ajax/grdcardview.html

Thus you can model the layout of the main table in par with your preferences and show/hide child tables (holding detail information) with expand/collapse buttons with CommandName="ExpandCollapse", taking advantage of the event bubbling mechanism of the control.

For this purpose you will need to define parent/child relations between the source tables using DetailTableDataBind event handling:

http://www.telerik.com/DEMOS/ASPNET/Prometheus/Grid/Examples/Programming/DetailTableDataBind/DefaultCS.aspx

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Tim]

Stephen,

I've poured over all the pages you mention below several times.  There are a few things I still cannot reconcile.

There is no secondary table or datasource in the SQL sense.  The detail information is contained in a collection which itself is a property of the enclosing table row.

I haven't yet found a way to iterate over a collection, programmatically, using ASP.NET.

In the Java/Struts world, I would say

<logic:iterate name="outer collection"...>
  ...summary row1 prop1... ...summary row1 prop2...
  <logic iterate name="outer collection" property="inner property">
    ...detail row1 prop1...
    ...detail row2 prop1....
  </logic:iterate>
</logic:iterate>

I will re-read all of the links you suggest again.

Thanks,
Tim

[Tim]

OK, I am making progress now... thanks for the help.  I'll post again if I get stuck but for now I can get my child table(s) as DataTable-s and that makes the examples all work properly.

Tim

[Tim]

OK, I am stuck again.

I can make a single child table work by nesting a <DetailTables><t:GridTableView><Columns>...

What I need to do, and can't see how just yet, is to combine the custom view (like the card view) via an <ItemTemplate>Kitchen...<DetailTables>... as above.

Is there an example of this?  Is it even possible?  The IDE tells me I can't nest these tags...

Thanks,
Tim

[Sebastian]

Hello Tim,

You do not need to nest the detail tables inside the global ItemTemplate of the master table. Instead define the DetailTables directly under the MasterTableView tag  as shown in the demo (specifying auto-generated columns for them) and wire the DetailTableDataBind event as suggested in my previous reply to bind the child table content.

Thus when you put expand/collapse buttons (with CommandName = "ExpandCollapse") beside the Bathrooms/Kitchen/etc. items and click to expand an arbitrary item, you can retrieve the key field value from the parent item in the DetailTableDataBind handler (HouseID for example) and bind the relevant data to display it in the child table.

I hope this explanation makes sense for your case.

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Tim]

More progress to report. 

I can create an artificial intermediate table (2nd level table) for each of the rooms.  However, I could not get different third-level tables for each room.  They always take the shape of the first row in the intermediate table.

I can get it to work pretty close to the way I want by doing as you suggest, and sequentially adding the <DetailTables>...</DetailTables> to represent each room, except that they don't have expand/collapse controls.  Are you implying somehow I can force them to do so?  If so, then I would be elated!

My markup is structured as shown below.

Thanks,
Tim

<MasterTableView DataSourceID="..." CommandItemDisplay="Top" DataKeyNames="ID">
  <NoRecordsTemplate>
    ...
  </NoRecordsTemplate>
  <CommandItemTemplate>
    ...
  </CommandItemTemplate>
  <DetailTables>
    <telerik:GridTableView Name="KITCHEN" Width="100%" AutoGenerateColumns="true">
    </telerik:GridTableView>
    <telerik:GridTableView Name="LIVINGROOM" Width="100%" AutoGenerateColumns="true">
    </telerik:GridTableView>
    <telerik:GridTableView Name="BATHS" Width="100%" AutoGenerateColumns="true">
    </telerik:GridTableView>
  </DetailTables>
  <Columns>
    .. master / outer table columns
  </Columns>
</MasterTableView>

[Sebastian]

Hello Tim,

My original idea was to set your custom item template for the master table in the following way:

<MasterTableView DataSourceID="..." CommandItemDisplay="Top" DataKeyNames="ID">
  <NoRecordsTemplate>
    ...
  </NoRecordsTemplate>
  <CommandItemTemplate>
    ...
  </CommandItemTemplate>
  <ItemTemplate>
    <table>
     <tr>
      table with the house row info goes here
     </tr>
     <tr>
      <td style="width:15%">
        <asp:ImageButton id="ExpandButton1" runat="server" CommandName="ExpandCollapse" CommandArgument="Bathrooms" />
      </td>
      <td style="width:85%">
        Bathrooms
      </td>
     </tr>
     ........
      similar button + text row definitions go here
     ........
    </table>
  </ItemTemplate>
</MasterTableView>

Next, specify single GridTableView definition with auto-generated columns in the following way:

<DetailTables>
    <telerik:GridTableView Width="100%" AutoGenerateColumns="true" />
 </DetailTables>

Then, wire the ItemCommand event of RadGrid and detect the expand collapse action taking advantage of the event bubbling mechanism of the control and store the CommandArgument value of the button which raised the event.  Finally, inside the DetailTableDataBind event which will be raised subsequently retrieve the command argument saved previously and populate the detail table based on it.

Alternatively (if you prefer) replace the ItemTemplate defined for the master table with standard columns adding them through the Columns collection of the MasterTableView.

I hope this clarification is helpful. Let me know if I am missing something.

Best regards,
Stephen
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center