Skip to main content
Inspiring
January 22, 2011
Answered

<cfoutput> Horizontal grouping

  • January 22, 2011
  • 2 replies
  • 885 views

Greetings,

I am attempting to display data grouped and horizontally and am not doing so

well. The code displayed in Example 1, displays the data grouped as intended.

However, part 2 displays the information verically.

The code displayed in Example 2, displays the data horizontally when not

in a grouped setting. However, when I insert code from Example 2 into

Example 1 (part 2) I get an Error: Invalid tag configuration - A query driven

cfoutput tag is nested inside a cfoutput tag that also has a query attribute.

I understand what the error message is indicating, but am wondering if what

I am attempting to do is even possible -- or -- am I missing something with

the code I have that is not making it function as desired?

Thanks in advance for assistance and/or insight to a solution.

Leonard B

-- Desired Display --

January

output --- output --- output

output --- output --- output

February

output --- output --- output

output --- output --- output

===== Example 1 =====

<cfoutput query="rs_results" group="shift_date_mm">
<!--- Begin - Part 1 --->
<div class="h5Arial" style="clear: both; padding: 10px 0px 0px 0px">
<cfif shift_date_mm eq 1>January
<cfelseif shift_date_mm eq 2>February
<cfelseif shift_date_mm eq 3>March
<cfelseif shift_date_mm eq 4>April
<cfelseif shift_date_mm eq 5>May
<cfelseif shift_date_mm eq 6>June
<cfelseif shift_date_mm eq 7>July
<cfelseif shift_date_mm eq 8>August
<cfelseif shift_date_mm eq 9>September
<cfelseif shift_date_mm eq 10>October
<cfelseif shift_date_mm eq 11>November
<cfelseif shift_date_mm eq 12>December</cfif>
</div>
<!--- End - Part 1 --->
<!--- Begin - Part 2 --->
<div style="clear: both; padding: 5px 0px 0px 0px">
<cfoutput>
<div class="arial14" style="clear: both;">
#dateformat(shift_date_ff,"mm/dd/yyyy-ddd")# - Station: #station#</div>
</cfoutput>
</div>
<!--- End - Part 2 --->
</cfoutput>

===== Example 2 =====

<cfset loctotalrecordcount1 = rs_results.recordcount>
<cfset locmaxrows1 = ceiling(loctotalrecordcount1 / 3)>
<cfset locstartrow1 = 1>

<div style="clear: both; padding: 25px 0px 0px 50px;">

<div style="clear: both; float: left; width: 225px">
<!--- -------------------- --->                   
<cfoutput query="rs_results" startrow="#locstartrow1#" maxrows="#locmaxrows1#">
<div class="arial14">&##149; <a href="shift_assignments_by_name.cfm?search_date=#dateformat(shift_date_ff,"yyyy-mm-dd")#" class="link1" onfocus="blur()">#dateformat(shift_date_ff,"mm/dd/yyyy - ddd")# &mdash; Station: #station#</a></div>
<cfset locstartrow1 = locstartrow1 + 1>
</cfoutput>
<!--- -------------------- --->
</div>
<div style="float: left; width: 225px">
<!--- -------------------- --->
<cfoutput query="rs_results" startrow="#locstartrow1#" maxrows="#locmaxrows1#">
<div class="arial14">&##149; <a href="shift_assignments_by_name.cfm?search_date=#dateformat(shift_date_ff,"yyyy-mm-dd")#" class="link1" onfocus="blur()">#dateformat(shift_date_ff,"mm/dd/yyyy - ddd")# &mdash; Station: #station#</a></div>
<cfset locstartrow1 = locstartrow1 + 1>
</cfoutput>    
<!--- -------------------- --->
</div>
<div style="float: left; width: 225px">
<!--- -------------------- --->
<cfoutput query="rs_results" startrow="#locstartrow1#" maxrows="#locmaxrows1#">
<div class="arial14">&##149; <a href="shift_assignments_by_name.cfm?search_date=#dateformat(shift_date_ff,"yyyy-mm-dd")#" class="link1" onfocus="blur()">#dateformat(shift_date_ff,"mm/dd/yyyy - ddd")# &mdash; Station: #station#</a></div>
</cfoutput>    
<!--- -------------------- --->
</div>
</div>

    This topic has been closed for replies.
    Correct answer existdissolve

    "Horizontal" doesn't really have anything to do with ColdFusion--it's going to be in how you layout out the results from your query using HTML and CSS. Looking at your first "vertical" example, the results are each output within a <div> tag. HTML <div>s are, by nature, block level elements, meaning that they will take up the entire line and produce the "stacking" that you are seeing.

    In the second example, you have some wrapping div's floated, which breaks the <div>s out of block level behavior and will cause them to "float" next to each other.

    So if you are getting the data grouping that you desire in Example 1, but can't get them to "visually" appear how you'd like, the answer is going to be what combination of HTML and CSS you are using to lay them out.

    Off topic, have you ever looked into the <cfswitch> tag?  It would be a perfect candidate for the 11 elseif's you have at the front of your code, just to make the logic a bit more readable.

    Hope this helps.

    2 replies

    existdissolve
    existdissolveCorrect answer
    Inspiring
    January 22, 2011

    "Horizontal" doesn't really have anything to do with ColdFusion--it's going to be in how you layout out the results from your query using HTML and CSS. Looking at your first "vertical" example, the results are each output within a <div> tag. HTML <div>s are, by nature, block level elements, meaning that they will take up the entire line and produce the "stacking" that you are seeing.

    In the second example, you have some wrapping div's floated, which breaks the <div>s out of block level behavior and will cause them to "float" next to each other.

    So if you are getting the data grouping that you desire in Example 1, but can't get them to "visually" appear how you'd like, the answer is going to be what combination of HTML and CSS you are using to lay them out.

    Off topic, have you ever looked into the <cfswitch> tag?  It would be a perfect candidate for the 11 elseif's you have at the front of your code, just to make the logic a bit more readable.

    Hope this helps.

    Leonard_BAuthor
    Inspiring
    January 25, 2011

    existdissolve,

    Thanks for turning on the light for me in regards to <div>'s, guess I was

    just to tunnel focused on things.

    Took your advice and changed to <cfswitch> and re-did the html and css

    and came up with exactly what I was trying to accomplish for the project.

    Thanks again for flipping the switch on for me.

    Leonard B

    Community Expert
    January 22, 2011

    I'm not sure how you're trying to put those two examples together, but you can't nest one CFOUTPUT with a QUERY attribute within another CFOUTPUT with a QUERY and a GROUP attribute.

    Dave Watts, CTO, Fig Leaf Software

    http://www.figleaf.com/

    http://training.figleaf.com/

    Dave Watts, Eidolon LLC