13 Replies Latest reply: Apr 14, 2010 10:34 AM by matthunnell RSS

    "Please Wait Message" Slider with cfgrid

    BrianO Community Member
      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.
        • 1. Re: "Please Wait Message" Slider with cfgrid
          The ScareCrow Community Member
          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
          • 2. Re: "Please Wait Message" Slider with cfgrid
            BrianO Community Member
            When I call it at the bottom of the page via my init (that gets the object grid and then i define grid.loadMask = true;) I get "error: Object doesn't support this property or method".
            • 3. Re: "Please Wait Message" Slider with cfgrid
              The ScareCrow Community Member
              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
              • 4. Re: "Please Wait Message" Slider with cfgrid
                BrianO Community Member
                I believe I did. Here's the code. Functions without the line "grid.loadMask = true;"

                <HTML>
                <HEAD>
                <cfajaximport tags="cfform,cfdiv,cftextarea,cflayout-tab,cflayout-border,cfinput-datefield,cfgrid" />
                ...
                <script type="text/javascript" >
                <cfajaxproxy cfc="#strcomponentpath#" jsclassname="diaproxy" />
                diaproxy = new diaproxy();
                diaproxy.setCallbackHandler(handleResult);

                function initDIA(){
                //set page permissions
                setstartuppermissions();
                //the grid will be empty, but will have the default layout
                customizeGrid();
                // Set the focus to the first search field for those that prefer to not use a mouse
                setFocus();
                }

                function setFocus(){
                var objFirstField = document.frmSearchGrid.strsearchdb[0];
                objFirstField.focus();
                }

                <!--- this function is called when the Search button is clicked --->
                function submitSearch(){
                //refresh grid with new parameters
                setpermissions('test');
                ColdFusion.Grid.refresh("searchGrid", true);
                customizeGrid();
                }
                <!--- this function is called to refresh grid (hiding columns and customizing grid footer) --->
                function customizeGrid(){
                <!--- Create a new paging tool bar in the grid footer and display the record count in it. --->
                // get the grid component
                var grid = ColdFusion.Grid.getGridObject("searchGrid");
                // Create a reference to the column model.
                var cm = grid.getColumnModel();
                // create a reference to the grid footer
                var gridFoot = grid.getView().getFooterPanel(true);
                // get the datasource
                var ds = grid.getDataSource();
                // add a new paging toolbar to the grid's footer
                var paging = new Ext.PagingToolbar(gridFoot, ds, {
                // this pageSize is the same value as in the cfgrid
                pageSize: <cfoutput>#intShowRows#</cfoutput>,
                displayInfo: true,
                // this will display all the record information for you
                displayMsg: 'Displaying records {0} - {1} of {2}',
                emptyMsg: "No records to display"});
                //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(18,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(18,false);
                ...
                }
                else {
                }
                // add a Please Wait Message on submittals
                grid.loadMask = true;
                grid.reconfigure(grid.getDataSource(),cm);
                }
                ...
                </script>
                </HEAD>
                <BODY class="bodyclass" onLoad="" onUnload="">
                ...
                <cfform name="frmSearchGrid" id="frmSearchGrid" format="html" method="post" >
                ...
                <cfgrid name="searchGrid"
                autowidth="false"
                width="585"
                format="html"
                pagesize="#intShowRows#"
                preservePageOnSort="true"
                striperows="true"
                striperowcolor="##e0e0e0"
                sort="true"
                sortascendingbutton="true"
                sortdescendingbutton="true"
                colheaderbold="true"
                bindonload="false"
                bind="cfc:#strcomponentpath#.readdiadocumentgrid({cfgridpage},{cfgridpagesize},{cfgridsor tcolumn},{cfgridsortdirection},{frmSearchGrid:strsearchdb@none},{frmSearchGrid:strsearchme tadata@none},{frmSearchGrid:dtedateRangeFrom@none},{frmSearchGrid:dtedateRangeTo@none},{fr mSearchGrid:strDocImageRights},{frmSearchGrid:strdoctype@none},{frmSearchGrid:strdocsubjec t@none})">

                <cfgridcolumn name="diadocno" header="docno" width="70" />
                <cfgridcolumn name="diadocumentdate" header="doc date" width="75" />
                ...
                </cfgrid>
                ...
                </cfform>
                <cfset ajaxOnLoad("initDIA") />
                ...
                </BODY>
                • 5. Re: &quot;Please Wait Message&quot; Slider with cfgrid
                  BrianO Community Member
                  It is also probably worth noting that the grid initially is configured without data and then the user clicks the search button that has an onclick event called submitSearch found in the above code and this loads the data and customizes the toolbar. Wandering if this might be a contributor, I changed the logic as a test to load the grid on page load, but I get the same error.

                  Also, the standard grid footer has a refresh button/animated status icon, but is not consistent, nor that clear as to its function and is hard to see (bad contrast with the default properties).

                  As an aside the total records diaplayed is incorrect if the number is below the number of displayed rows, e.g., 0 records returned it says: "Displaying records 1-5 of 5".

                  I'm such a complainer :-)
                  • 6. Re: &quot;Please Wait Message&quot; Slider with cfgrid
                    The ScareCrow Community Member
                    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
                    • 7. Re: &quot;Please Wait Message&quot; Slider with cfgrid
                      BrianO Community Member
                      Same error. Upon debug I see it is dying in the Ext.grid.Grid=function(A,B){...{this.loadMask.destroy();...

                      Here was my revised code:

                      function initDIA(){
                      setstartuppermissions();
                      customizeGrid();
                      setFocus();
                      }
                      function customizeGrid(){
                      var grid = ColdFusion.Grid.getGridObject("searchGrid");
                      var cm = grid.getColumnModel();
                      var gridFoot = grid.getView().getFooterPanel(true);
                      var ds = grid.getDataSource();
                      ds.load({params:{start:0,limit:<cfoutput>#intShowRows#</cfoutput>}});
                      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"});
                      var booDocumentImaging = document.frmSearchGrid.strsearchdb[0].checked;
                      var booFilenet = document.frmSearchGrid.strsearchdb[1].checked;
                      if (booDocumentImaging) {
                      cm.setHidden(18,true);
                      ... }
                      else if (booFilenet) {
                      cm.setHidden(18,false);
                      ... }
                      else {
                      }
                      grid.reconfigure(grid.getDataSource(),cm);
                      grid.loadMask = true;
                      }
                      • 8. &quot;Please Wait Message&quot; Slider with cfgrid
                        The ScareCrow Community Member
                        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
                        • 9. Re: &quot;Please Wait Message&quot; Slider with cfgrid
                          BrianO Community Member
                          Good to know of the paging toolbar.
                          1) This fails as is. I get it to 'function' if I make the ds and cm variables global in the init and remove the grid and cm variable definitions from customizeGrid(). However,
                          2) I still don't see any message. What will it look like and where is it supposed to show up? Does it need to be defined? I tried grid.loadMask.msg = "Please wait."; but that did nothing.
                          3) Also emptyMsg: "No records to display" does not work at all. The footer shows "Displaying records 1-5 of 5".
                          • 10. Re: &quot;Please Wait Message&quot; Slider with cfgrid
                            The ScareCrow Community Member
                            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
                            • 11. Re: &quot;Please Wait Message&quot; Slider with cfgrid
                              BrianO Community Member
                              I eliminated unnecessary stuff down to the following, but I'm still having trouble integrating it with CF implementation. I tried referencing these required references, but still no go.

                              <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " http://www.w3.org/TR/html4/strict.dtd">
                              <html>
                              <head>
                              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
                              <title>Paging Grid Example</title>

                              <link rel="stylesheet" type="text/css" href="../../CFIDE/scripts/ajax/ext/resources/css/ext-all.css" />
                              <script type="text/javascript" src="../../CFIDE/scripts/ajax/ext/adapter/ext/ext-base.js"></script>
                              <script type="text/javascript" src="../../CFIDE/scripts/ajax/ext/ext-all.js"></script>
                              <script type="text/javascript" src="../../CFIDE/scripts/ajax/ext/examples/grid/paging.js"></script>
                              </head>
                              <body>
                              <div id="topic-grid" style="border:1px solid #99bbe8;overflow: hidden; width: 665px; height: 300px;position:relative;left:0;top:0;"></div>
                              </body>
                              </html>
                              • 12. Re: &quot;Please Wait Message&quot; Slider with cfgrid
                                BrianO Community Member
                                To be clear, the above works. I just cannot implement the masking call into my Coldfusion-based grid.
                                • 13. Re: &quot;Please Wait Message&quot; Slider with cfgrid
                                  matthunnell Community Member

                                  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.