Skip navigation
Currently Being Moderated

"Please Wait Message" Slider with cfgrid

Jun 3, 2008 1:36 PM

Some of my cfgrid type=html results are taking a long time and an impatient user will likely wander if they need to hit the submit button again. I've seen how to implement a standard "Please Wait Message" with flushing periodic results, but how do I do it in this datagrid environment with an AJAX-based cfgrid with CF8.01? My users all use IE 6.
 
Replies
  • Currently Being Moderated
    Jun 3, 2008 4:38 PM   in reply to BrianO
    Okay, I can't get this to show as my queries don't take long.

    But if you add this to the init function at the bottom

    grid.loadMask = true;

    It is supposed to display a "loading" mask

    Ken
     
    |
    Mark as:
  • Currently Being Moderated
    Jun 3, 2008 6:28 PM   in reply to BrianO
    ensure that where you have the following code in the init function
    var grid = ColdFusion.Grid.getGridObject('dataGrid');

    The variable name is the same as used in the loadMask call.

    I placed mine under the code where I added a button to the footer bar.
    If you still have problems post your init function


    Ken
     
    |
    Mark as:
  • Currently Being Moderated
    Jun 4, 2008 4:26 PM   in reply to BrianO
    Try the following

    function submitSearch(){
    //refresh grid with new parameters
    setpermissions('test');
    //don't refresh the grid here do it in the customizeGrid function
    //ColdFusion.Grid.refresh("searchGrid", true);
    customizeGrid();
    }


    //But don't use the coldfusion refresh, use the following instead
    ds.load({params:{start:0, limit:<cfoutput>#intShowRows#</cfoutput>}});

    //I also do the mask after the reconfigure, as I do the reconfigure in custom column renderers

    grid.reconfigure(grid.getDataSource(),cm);

    // add a Please Wait Message on submittals
    grid.loadMask = true;

    Ken
     
    |
    Mark as:
  • Currently Being Moderated
    Jun 4, 2008 8:52 PM   in reply to BrianO
    Here is a working example, there is a grid page and a cfc for the grid data. As it is an example from the online docs it should just work for you.
    Note that there is no need to rebuild the paging toolbar each time, all you want to do is hide/show the column.
    If this is not what you want email me your pages with an explination of what you want to achieve and I will see what I can do.
    info at scarecrowapplications.com

    grid page
    <html xmlns=" http://www.w3.org/1999/xhtml">
    <head>
    <cfset intShowRows = 5>
    <script>

    initDIA = function(){
    var grid = ColdFusion.Grid.getGridObject('searchGrid');
    var cm = grid.getColumnModel();
    var gridFoot = grid.getView().getFooterPanel(true);
    ds = grid.getDataSource();

    // add a paging toolbar to the grid's footer
    var paging = new Ext.PagingToolbar(gridFoot, ds, {
    pageSize: <cfoutput>#intShowRows#</cfoutput>,
    displayInfo: true,
    displayMsg: 'Displaying records {0} - {1} of {2}',
    emptyMsg: "No records to display"
    });

    // add a Please Wait Message on submittals
    grid.loadMask = true;


    //setstartuppermissions();
    customizeGrid();
    //setFocus();
    }

    function customizeGrid(){
    var grid = ColdFusion.Grid.getGridObject('searchGrid');
    var cm = grid.getColumnModel();

    //load the grid
    ds.load({params:{start:0,limit:<cfoutput>#intShowRows#</cfoutput>}});

    //returns true if the particular radio button is selected
    var booDocumentImaging = document.frmSearchGrid.strsearchdb[0].checked;
    var booFilenet = document.frmSearchGrid.strsearchdb[1].checked;

    // Now show/hide grid columns and data details based on default or user choice
    if (booDocumentImaging) {
    //document.getElementById('divFilenetFields').style.display = 'none';
    //document.getElementById('divDocumentImagingFields').style.display = 'block';
    //setHidden(colIndex, hidden)
    cm.setHidden(0,true);
    }
    // If true then Filenet was selected
    else if (booFilenet) {
    //document.getElementById('divFilenetFields').style.display = 'block';
    //document.getElementById('divDocumentImagingFields').style.display = 'none';
    // Filenet does not need the ability to add an attachment
    //document.getElementById('btnaddAttachment').disabled='true';
    //setHidden(colIndex, hidden)
    cm.setHidden(0,false);
    }
    }

    </script>
    </head>

    <body>
    <cfform name="frmSearchGrid">
    <cfinput type="radio" name="strsearchdb" value="1" onClick="customizeGrid()">
    <cfinput type="radio" name="strsearchdb" value="0" onClick="customizeGrid()">

    <cfgrid format="html" name="searchGrid" pagesize="5" sort="true" autowidth="true"
    bind="cfc:places.getData({cfgridpage},{cfgridpagesize},
    {cfgridsortcolumn},{cfgridsortdirection})">
    <cfgridcolumn name="Emp_ID" display=true header="eid" />
    <cfgridcolumn name="FirstName" display=true header="Name"/>
    <cfgridcolumn name="Email" display=true header="Email" />
    </cfgrid>
    </cfform>
    <cfset ajaxOnLoad("initDIA") />

    </body>
    </html>

    cfc page (places.cfc)
    <cfcomponent>
    <cffunction name="getData" access="remote" output="false">
    <cfargument name="page">
    <cfargument name="pageSize">
    <cfargument name="gridsortcolumn">
    <cfargument name="gridsortdirection">
    <cfquery name="team" datasource="cfdocexamples">
    SELECT Emp_ID, FirstName, EMail
    FROM Employees
    <cfif gridsortcolumn neq "" or gridsortdirection neq "">
    order by #gridsortcolumn# #gridsortdirection#
    </cfif>
    </cfquery>
    <cfreturn QueryConvertForGrid(team, page, pageSize)>
    </cffunction>
    </cfcomponent>

    Ken
     
    |
    Mark as:
  • Currently Being Moderated
    Jun 5, 2008 5:21 PM   in reply to BrianO
    If you go to the ext docs in your cf cfide folder CFIDE/scripts/ajax/ext/examples/grid/paging.html
    Then select examples and demos, then grid, then paging and remote datasets you will see the loading message that should be displayed.
    I'm thinking that it may not work because you need to link to some js files or css files.

    Trying this now.

    Ken
     
    |
    Mark as:
  • Currently Being Moderated
    Apr 14, 2010 10:34 AM   in reply to BrianO

    You can turn on the loadMask by editing ext-all.js in cfide/

    scripts/ajax/ext. look for loadmask:false and change it to true.

     

    I don't normally recomend making any edits to anything in the cfide directory. Please back it up or create your own copy. Since this is something that I always want on all my grids, this works for me. Adobe should really build this in as well as some better (more obvious pageing options). I understand I could work with the ExtJS without the grid, but I need to know that anyone who works on this page can make updates without being a js expert. Thats the great thing about tags like CFGrid.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points