Feature Req: Ability to use CFGrid in Tabbed Panels.

Currently, there is no way to use a data grid in a tabbed
panel in cold fusion ... this is really sad. I hope in the future,
you can do such a thing ..
Now this may be a little misleading. But as if CF 8.0.1, if
you place a CF grid into a spry panel, you cannot see any data
until you click on a column header to sort by that column. At that
time, the grid will expand to show all columns, and rows of data.
Until then, cfgrid refuses to show anything.

> Currently, there is no way to use a data grid in a
tabbed panel in cold fusion
Really? What makes you say that?
[code]
<cfscript>
// mock-up some data
q = queryNew("id,firstName,lastName");
queryAddRow(q); querySetCell(q, "id", 1); querySetCell(q,
"firstName",
"Adam"); querySetCell(q, "lastName", "Cameron");
queryAddRow(q); querySetCell(q, "id", 2); querySetCell(q,
"firstName",
"Jane"); querySetCell(q, "lastName", "Smith");
queryAddRow(q); querySetCell(q, "id", 3); querySetCell(q,
"firstName",
"Bob"); querySetCell(q, "lastName", "Brown");
queryAddRow(q); querySetCell(q, "id", 3); querySetCell(q,
"firstName",
"Sarah"); querySetCell(q, "lastName", "Williams");
</cfscript>
<cfform method="post" action="#CGI.script_name#"
format="flash">
<cfformgroup type="tabnavigator">
<cfformgroup type="page" label="Grid Tab">
<cfgrid name="myGrid" format="Flash" query="q"
selectmode="edit"/>
</cfformgroup>
<cfformgroup type="page" label="Another Tab">
<cfinput type="text" name="someText" />
</cfformgroup>
</cfformgroup>
<cfinput type="submit" name="submit" value="Submit" />
</cfform>
<cfif structKeyExists(form, "fieldNames")>
<cfdump var="#form#">
</cfif>
[/code]
Seems to work OK to me. Am I misreading your statement?
Adam

Similar Messages

  • Can you use anchors with tabbed panels???

    Im trying to use anchors with tabbed panels but they dont seem to work.  I need to be able to link to specific tabs and specific areas within those tabs, but I haven't been able to find a way to do this.  Does anyone know or have a work around?

    Yes, that is an improvement in Muse, check release notes here, http://forums.adobe.com/message/5104247 - Widget Improvements
    The selected tab in Design view for the Tabbed panel widget will now be selected/active when previewing, exporting or publishing the site to Business Catalyst.
    - Abhishek Maurya

  • Difficultly using functions of tabbed panels

    Hello everyone I have a problem. I am not sure how well I can
    explain this because I am a beginner programmer. Anyway here goes.
    I have oscommerce that I an modifying to suit my business
    needs.
    I put in a set of tabbed panels that are created off of
    values coming from a Mysql dbase.
    When a user makes changes to these tabbed panels I need to
    pull the changes they made from the tabbed panels.
    I got all the panels built and radio buttons made on each
    tab. If a user selects one of the radio buttons I can successfully
    update the dbase accordingly.
    However I need to know which tab the user clicks on. I
    believe that I can use the function getCurrentTabIndex() to do
    this.
    But I am not sure where in my code that this needs to be.
    Can anyone help me out?
    thanks

    quote:
    Originally posted by:
    karozans
    Hello everyone I have a problem. I am not sure how well I can
    explain this because I am a beginner programmer. Anyway here goes.
    I have oscommerce that I an modifying to suit my business
    needs.
    I put in a set of tabbed panels that are created off of
    values coming from a Mysql dbase.
    When a user makes changes to these tabbed panels I need to
    pull the changes they made from the tabbed panels.
    I got all the panels built and radio buttons made on each
    tab. If a user selects one of the radio buttons I can successfully
    update the dbase accordingly.
    However I need to know which tab the user clicks on. I
    believe that I can use the function getCurrentTabIndex() to do
    this.
    But I am not sure where in my code that this needs to be.
    Can anyone help me out?
    thanks
    well im actually working on the same thing atm. atleast the
    same concept.
    I have add a function on the tabs, so when they click it
    fires the check function;
    <div class="TabbedPanels" id="tp1">
    <ul class="TabbedPanelsTabGroup">
    <li onclick="loadContent();">tab0
    </li>
    <li onclick="loadContent();">tab1
    </li>
    <li onclick="loadContent();">tab2
    </li>
    <li onclick="loadContent();">tab3
    </li>
    </ul>
    ^ like that.
    function loadContent(){
    // other function code like updatecontent that i have heere
    setTimeout('checkTab();',0); // this is what its all about ..
    function checkTab(){
    var curIndex = tp1.getCurrentTabIndex();
    if(curIndex == 0){ // if its pannel nr 0
    do something
    }else if(curIndex == 1){ // if its pannel nr 1
    do something when user comes to pannel 1
    }else if (curIndex > 1 ){
    they press a pannel greater than pannel 1, it will fire
    this;
    maby it will help u out.. atleast it works for me :)
    i use that code to show and hide certain buttons on the page.

  • Using Images for Tabbed Panels

    I'm trying to use button images that I created in photopshop as the background for the tabs of my tabbed panel widget in dreamweaver. I tried this by inserting the folling code into the css (note bold line):
    .TabbedPanelsTab {
    position: relative;
    top: 1px;
    float: left;
    padding: 4px 10px;
    margin: 0px 1px 0px 0px;
    font: bold 0.9em sans-serif;
    background-image:url(images/tabs.gif);
    list-style: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    color: #FFF;
    I also tried using  background:url(images/tabs.gif) in place of background-image:url(images/tabs.gif) but it still won't work. What do I need to know about using images for my tabs?

    Have a look here
    http://www.adobe.com/devnet/dreamweaver/articles/spry_widgets_design.html

  • Can I use Spry Tabbed Panels to create a multi page form?

    I'm trying to setup a multi page form and have been unsuccessful using PHP Sessions.
    Would it be possible to use the Spry Tabbed  Panels in DW CS3 and divide the different sections of the form in the  panels?  My thought is to have the Form Element around the main Tab  Div and the submit button at the end of the form.  Would this work?
    If so, is there a way to have a "Next" button that will activate  the next Tab so that the user can easily tab through each form field and easily go to the next tab to help with usability?

    Beth, thank you!  I was able to get the tabs to advance using your suggested
             on the right: "Next Panel"  
    <a href="#" onclick="TabbedPanels1.showPanel(2); return false;">Next Panel</a>
    In order to make it more graphical, I added a Next Button as suggested in the "Open Tabs Programatically" info at http://labs.adobe.com/technologies/spry/articles/tabbed_panel/index.html
    <button onclick="TabbedPanels1.showPanel(0)" >open first  panel</button>
    <button onclick="TabbedPanels1.showPanel('tabID')">open   panel</button>
    <script type="text/javascript">
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
    </script>
    When I add the above code, when I clicked on the Next Button, it would submit the form.  After looking at the Text Code, I noticed the Button Code did not have the ;return false; in the code so once I added that, the buttons now work as I want them to.
    Take a look at http://www.soleproductions.com/oakley/tabform.php
    Now that I have the basic setup, I can begin to setup the actual Online Application.
    Thanks again for everyone's help.  I guess I was looking for the WISIWIG way to do it since I'm not very good at hand coding.

  • Content Rotator vs. Tabbed Panels

    Hey Guys,
    I've got the following HTML/Spry content rotator:
    http://www.glmmrs.com/temp/contentrotator.html
    As it stands now, it rotates by itself and cycles through the
    tabs without any problems. If I turn off the "cycle.start()"
    function call in the body tag, I can correctly click through the
    1-5 tabs and view the content independently without a problem.
    However I cannot get both to work together Clicking on the tab
    links when the content is rotating throws everything off, and I
    haven't been able to get it to work correctly. I have the following
    JS which handles the cycling of the content here:
    http://www.glmmrs.com/temp/spry/customSpry.js
    And the clicking of the panels independently is handled
    within:
    http://www.glmmrs.com/temp/spry/SpryTabbedPanels.js
    So my question is - how can I get these two to work together?
    Any suggestions would be greatly appreciated.
    Thank you.

    Hi kfratomatic84,
    I'm planning on integrating the content rotating feature into
    the next version of the tabbed panels. I've written an extension
    for the 1.6.1 version of the SpryTabbedPanels.js that gives folks
    the same functionality. Rather than using the rotator I posted a
    long time ago, try using this in conjunction with your
    SpryTabbedPanels.js and SpryEffect.js:
    http://www.shinarp.com/SprySamples/tabbedpanels/tabbed_panel_sample3_files/SpryTabbedPanel sExtensions.js
    You can see how to start the content rotating here:
    http://www.shinarp.com/SprySamples/tabbedpanels/tabbed_panel_sample3.htm
    If you click on a tab while the content is rotating, it
    automatically stops the rotation, and you will have to restart it
    with a call to tp.start() if you want it to continue.
    --== Kin ==--

  • Placing an image in a tabbed panel content area, it shows up on all three panels

    This is crazy.  It should be so simple. But sometimes this happens to me. Like today.
    I have many pages that use a simple tabbed panel feature with three tabs.
    Each content area has a text frame and an image frame.
    Sometimes when I try to place an image into the content area of the first tab, the image shows up on all three content areas.  I have tried and tried placing the image, making very sure I am in the "content area" on not just on the page.  But nevertheless, the image seems to be "stuck" on the page, in front of the accordian feature, and therefore showing on all three tabs.
    How am I not targeting the placement of those images correctly? There just aren't that many options for me to screw up, it's a simple tabbed panel, that's all!
    Help please.
    Barbara

    Are you using the latest version of Muse/Air?
    The borders of the Content Area of a tab gets highlighted as soon as you drag over an element over it so it is very unlikely that something like this could happen. However, I believe it could be due to messed up Layers configuration as the only way I could reproduce this problem is through moving the image into a layer above a layer that contains the Tabbed panel or in case of just one layer, you might have the image at the very top.
    Thanks,
    Vinayak

  • Spry Validation in Tabbed Panel

    I've created a form that has a number of sections which I
    have separated out using a spry tabbed panel. So far, so good.
    On one of the panels, however, is a select box that is
    required, so I have used a spry validation widget to look after it.
    Now, if the select box hasn't been used then and the submit button
    is clicked while one of the other panels is open, because the
    validation widget halts the form it makes it look as though nothing
    has happened. The warning message is only visible when the correct
    panel is open.
    My question is this: how do I either (a) force the panel with
    the error on to reopen or (b) make the error message show up
    elsewhere on the page so that it is visible? I tried positioning it
    absolutely above the whole panel but it still only shows up when
    the relevant panel is oen.

    I have actually added multiple tabbed panels inside of tabbed
    panels as well as collapsible panels inside of tabbed panels and
    vise versa. This works across all browsers (IE 6 & 7, FF 2,
    Safari 2 & 3).
    The key for me was to use <div style="clear: both"> (I
    put a comment here to satisfy IE6) </div> at the bottom of
    the tab, before the closing of the tab since I was using a lot of
    floating within the tabbed panels.
    If you share some code, I'm sure someone could give you a
    more specific answer.

  • ??Spry Tabbed panels funny in Firefox

    Hello, I am using the Spry tabbed  panels in Dreamweaver CS4 and when I render in firefox there is a large  amount of space at the bottom as if the tabbed panels are allowing space  for each subsequent tab - even though the text is in the next tab.
    http://www.patternsoftheweb.net/1.htm
    The page  link above shows the problem. How do I get rid of the extra space?
    Thank you  for your help!

    I think your are referring to the css attribute: outline:none;
    Added outline:none; to the css rule and it should be gone.

  • Spry Tabbed Panels Keep Shifting

    I have built a page using the Spry Tabbed Panels. I have one
    set inside of another. The problem is when you click a main tab and
    then a secondary tab and then roll over the main tabs again the
    width changes on the secondary tab. I have no idea why it does
    this. Here is the link:
    http://www.pco2.com/v/vspfiles/downloadables/spry/Tabbed_Page_3.html
    Thanks in advance.

    I would have to say that I am not sure it is a good idea to
    be using the tabs spry function as a navigation system. It is not
    what it was intended for. This puts your entire web site on one
    HTML page. If you lots of images, this could be a rather large
    download. Downloading an entire web site before you can see just
    one page is not very efficient. You are better off, IMHO, to use
    the SPRY tabs sparingly and where they are conducive to the content
    and not as site navigation.
    My $0.02

  • Spry Tabbed Panels - Contribute Error Message

    I created a Web site using  Dreamweaver CS4 that uses a Spry Tabbed Panels.  It works fine, but so  far it fails when it is pulled into Contribute CS5.  I've read the posts  about allowing Spry Widget editing in Contribute, so I've turned on  that capability.
    When I try to launch the Spry Widget Properties from within Contribute, I get this error:
    "This  tabbed panel is missing its content.  Contact your administrator to add  the missing content panel, or delete this panel and insert a new one."
    I've tried creating new generic pages with new Spry tabbed panels, but they always fail with this message.
    Here is a sample page:
    http://www.dougriderconsulting.com/zmcpa/incentives.html
    Any ideas?  Thanks!

    The page http://www.dougriderconsulting.com/zmcpa/incentives.html mentioned here has no issues.
    If there are any missing  codes DW also shows the error as <missing content panel>  or <missing tab> when the Tabbed Panel widget is selected.
    In Contribute the same pops up as a message.
    The issue in page http://www.dougriderconsulting.com/zmcpa/education_in_muskingum_county.html posted in Contribute Blogs is re-solved http://blogs.adobe.com/contribute/2010/06/spry_widget_rendering.html#more-33.

  • Spry tabbed panels and "The tag: "li" doesn't have an attribute: "tabindex" ..."

    Hi,
    I've been using the DW CS4 "Spry Tabbed Panels" on a few pages. When I validate the website (with DW tool for that), I get the following messages for each use of the tabbed panels: The tag: "li" doesn't have an attribute: "tabindex" in currently active versions. [XHTML 1.0 Transitional].
    Should I worry about this? I'd like to have a code as clean and XHTML valid as possible. Is there a way to fix this so the message doesn't come up anymore?
    Emilie
    Example of code this message is linked to:
    <div class="TabbedPanels" id="TabbedPanelsADMS">
      <ul id="TabUL" class="TabbedPanelsTabGroup">
        <li id="TabLI1" class="TabbedPanelsTab" tabindex="0">About</li>
        <li id="TabLI2" class="TabbedPanelsTab" tabindex="0">Assets</li>
        <li id="TabLI3" class="TabbedPanelsTab" tabindex="0">Input</li>
        <li id="TabLI4" class="TabbedPanelsTab" tabindex="0">Output</li>
        <li id="TabLI5" class="TabbedPanelsTab" tabindex="0">Support</li>
        <li id="TabLI6" class="TabbedPanelsTab" tabindex="0">Purchase</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <!-- TabLI About -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI About -->
        </div>
        <!-- TabLI Assets -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI Assets -->
        </div>
        <!-- TabLI Input -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI Input -->
        </div>
        <!-- TabLI Output -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI Output -->
        </div>
        <!-- TabLI Support -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI Support -->
        </div>
        <!-- TabLI Purchase -->
        <div class="TabbedPanelsContent">
          <!-- end #TabbedPanelsContent TabLI Purchase -->
        </div>
        <!-- end #TabbedPanelsContentGroup -->
      </div>
      <!-- end #TabbedPanelsADMS -->
    </div>

    Should I worry about this? I'd like to have a code as clean and XHTML valid as possible. Is there a way to fix this so the message doesn't come up anymore?
    If validation is important to you, you need to remove tabindex. Should you worry about it? Not really. Sometimes it makes sense to ignore validation to achieve a particular goal, which is why Spry widgets use tabindex in a technically invalid way.
    The explanation as to why Spry does that can be found here: http://blogs.adobe.com/spryteam/2007/03/spry_widgets_and_tab_index.html.

  • Spry Tabbed Panels - not correct in IE but correct in Chrome and MF

    Hi,
    I'm having problems with an extension I used for a client, so I want to use the Spry tabbed panels form dreamweaver, but they in IE8 it puts all the content under each other in the first tab ??
    In Chrome and MF its correct. Do you know about this problem or is it because I did something wrong?
    see: www.zorgfilosofie.nl/index2
    The other pages where made with an extension but with that script my client can't edit with contribute. That's why I want to implement Dreamweaver Spry Tabbed Panels.
    Thanks for answering!
    Carla

    Hello there from down under J
    Het was mooi weer, maar vandaag regent het.
    Toch zijn hier in deze kamer veel zonnestralen, want het probleem is opgelost!
    I searched the whole evening for alternative but it did’t work with templates.
    With the js files the problem is solved.
    I don’t understand why the js file was not correct, because I just bought CS5.5
    Where do I have to put de file so the problem will not happen again when I make another site?
    Thanks a lot!
    Best regards and take some sun with you!
    Carla
    Van: altruistic gramps [email protected]
    Verzonden: woensdag 5 oktober 2011 2:16
    Aan: Carla Leliveld
    Onderwerp: Spry Tabbed Panels - not correct in IE but correct in Chrome and MF
    Re: Spry Tabbed Panels - not correct in IE but correct in Chrome and MF
    created by altruistic gramps <http://forums.adobe.com/people/altruistic+gramps>  in Spry Framework for Ajax - View the full discussion <http://forums.adobe.com/message/3954185#3954185

  • Remembering which tabbed panel I left

    I have a web page that uses several Spry tabbed panels to display different sub-sets of volunteers who have applied to volunteer at an airshow. Alongside each volunteer is a link to a page that allows an administrator to edit the volunteer information, that is the user could have started from any one of 4 tabs and gone to the same page to edit the volunteer info. When the edit is complete it returns to the original web page and opens the default tab, I'd like it to return to the original web page and open the tab it left. I have read http://foundationphp.com/tutorials/spry_url_utils.php and think I understand it, but before I can do that I need to pass the tab number from the original page to the edit page, and then when the edit is complete pass that back to the original page.
    I think I know how to pass the tab number to the edit page - I'd add &tab=x to the link URL (where "x" is the tab number I'm leaving). The problem I'm having is figuring out how to access that parameter in the edit page and then send it back when the edit is complete.
    To see what I mean look at www.hollisterairshow.com/login.php and use username "q" and password "q" without the quotes, this will take you to the Control Panel or "original web page" I referred to above. Look at any/all of the "Volunteer" tabs and you'll see they all provide a link to an "editvolunteer.php" page. When the edit is complete I'd like the user to be returned to the Control Panel and in the tab they were in.
    Thanks for any suggestions,
    Tony

    Hi Tony,
    You will need to use cookies for this. Normally I point to Arnout Kazemier's page for this but it has been down for some time now.
    Dooza(Steve) seems to have found a solution, just not sure what, but have a look here http://forums.adobe.com/message/3281366#3281366
    If you send Steve a PM he will probably help you out.
    Ben
    PS: in case you need it, the following is SpryCookie.js
    Spry.Utils.Cookie = function(type /* string*/, name /* string */, value /* string or number */, options /* object */){
         var     name = name + '=';
         if(type == 'create'){
              // start cookie string creation
              var str = name + value;
              // check if we have options to add
              if(options){
                   // convert days and create an expire setting
                   if(options.days){
                        var date = new Date();
                        str += '; expires=' + (date.setTime(date.getTime() + (options.days * 86400000 /* one day 24 hours x 60 min x 60 seconds x 1000 miliseconds */))).toGMTString();
                   // possible path settings
                   if(options.path){
                        str += '; path=' + options.path                   
                   // allow cookies to be set per domain
                   if(options.domain){
                        str += '; domain=' + options.domain;
              } else {
                   // always set the path to /
                   str += '; path=/';
              // set the cookie
              document.cookie = str;
         } else if(type == 'read'){
              var c = document.cookie.split(';'),
                   str = name,
                   i = 0,
                   length = c.length;
              // loop through our cookies
              for(; i < length; i++){
                   while(c[i].charAt(0) == ' ')
                        c[i] = c[i].substring(1,c[i].length);
                        if(c[i].indexOf(str) == 0){
                             return c[i].substring(str.length,c[i].length);
              return false;
         } else {
              // remove the cookie, this is done by settings an empty cookie with a negative date
              Spry.Utils.Cookie('create',name,null,{days:-1});

  • Spry Tabbed Panels and Master/ Detail Page Set interraction

    Hi,
    I have created a feedback form and am using a Spry Tabbed Panel to allow users to review all responses to one question and then all responses to the next question in different tabs, there are 6 tabs in all. In each tab I have created a Master/ Detail Page set - well actually just the Master appears in the tab. This is working fine. I allow up to 20 responses to be shown on each tab, after which the user selects First/Previous/Next/Last. When they do this the screen refreshes and the tabbed panel display goes back to the default tab, clicking on the tab previously used correctly displays whichever of First/Previous/Next/Last the user selected. I'd like the display to remain on the user's current tab when they select First/Previous/Next/Last.
    The page in question is here http://www.hollisterairshow.com/feedback-results2.php, then scroll about half way down the page and select one of the tabs.
    Thanks.
    Tony

    Hi Tony,
    Look at the following, blue coded is comment only, red coded is what has to be added to your existing code and orange coded is added by the SpryDataSet creator if done properly. Where the orange part starts, thats where you place your cursor when creating the dataset.
        <p> </p>
       <div id="TabbedPanels1" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">All feedback</li>
            <li class="TabbedPanelsTab" tabindex="0">Suggestions for improvement</li>
            <li class="TabbedPanelsTab" tabindex="0">What did you like the most</li>
            <li class="TabbedPanelsTab" tabindex="0">What did you like the least</li>
            <li class="TabbedPanelsTab" tabindex="0">What else would you like to see</li>
            <li class="TabbedPanelsTab" tabindex="0">Any other comments</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">
              <table border="1" align="center" id="allFeedback"> .... start feedback table tag (line 763)
                <tr>
                  <td width="80"><strong>Feedback Number</strong></td>
                  <td><strong>Days attended</strong></td>
                  <td><strong>Arrived by</strong></td>
                  <td><strong>Arrival arrangements</strong></td>
                  <td><strong>Expectations met</strong></td>
                  <td><strong>Ticket price</strong></td>
                  <td><strong>Zip code</strong></td>
                </tr>
    .................... rest of table probably your PHP repeat area
                  </tr>
              </table> .... end feedback table tag    
              <div spry:region="dsAllFeedback">
                <table>        
                   <tr>
                    <th spry:sort="Feedback_Number">Feedback Number</th>
                    <th spry:sort="Days_attended">Days attended</th>
                    <th spry:sort="Arrived_by">Arrived by</th>
                    <th spry:sort="Arrival_arrangements">Arrival arrangements</th>
                    <th spry:sort="Expectations_met">Expectations met</th>
                    <th spry:sort="Ticket_price">Ticket price</th>
                    <th spry:sort="Zip_code">Zip code</th>
                  </tr>
                  <tr spry:repeat="dsAllFeedback" spry:setrow="dsAllFeedback" spry:odd="row_odd" spry:even="row_even" spry:hover="row_hover" spry:select="row_select">
                    <td>{Feedback_Number}</td>
                    <td>{Days_attended}</td>
                    <td>{Arrived_by}</td>
                    <td>{Arrival_arrangements}</td>
                    <td>{Expectations_met}</td>
                    <td>{Ticket_price}</td>
                    <td>{Zip_code}</td>
                  </tr>
                </table>
              </div>
              <br />
              <table border="0">
    I hope this helps.
    Ben

Maybe you are looking for