• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 263
  • Last Modified:

ColdFusion How can I indent my table results with related records?

How can I indent my table results:

                                        Search results:
                                                                           Ordered 40  Received 45
                      (show related records                    Overage   Return 5
                         under main record with indent)                            

How can I implement a + for the viewer to click, to view the related records? (normally hidden)
2 Solutions
Jack LeachProprietorCommented:
I haven't used ColdFusion with an Access database, and am unsure quite how those two work together, but what you're suggestion sounds like a Treeview control.  Have you looked into one?  ASP.NET has a nice implementation of a web-hostable treeview, but I'm unsure of others offhand.
Rodrigo MuneraSr. Software EngineerCommented:
It's pretty simple, and usually handled with CSS and possibly jQuery.

I'm assuming you're starting with a query? When you're outputting the query data you would want to group the data and tag the sub-data with a named class or set of classes. A table might not be your best way of displaying this data since the data might not be tabular in nature.

So, let's say you have a query with customers and their orders. Each customer has a unique customer ID and each order has a unique order ID, your query would order the data by customerID and then by orderID. then you can nest your outputs by group and hide/show them on demand.

<!-- Make sure you have a query library in the <head> of your document for the .toggle() function to work -->
  <cfoutput query="orders" group="CustomerID">
    <tr><td>#customerID# #name# etc... <button onclick="$('##Customer_#CustomerID#').toggle();"> + </button></td></tr>
      <cfoutput group="OrderID">
        <tr id="Customer_#CustomerID#" class="hidden"><td>#OrderID# #OrderDate# etc...
          <cfoutput group="OrderItems">
            <div><td>#itemID# #Units# #Total# etc...</td></div>

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now