Inspiring

Question

"Please Wait Message" Slider with cfgrid

Forum|Forum|17 years ago
June 3, 2008
7 replies
4639 views

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.

This topic has been closed for replies.

B

BrianOAuthor

Inspiring

To be clear, the above works. I just cannot implement the masking call into my Coldfusion-based grid.

A

Anonymous

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.

B

BrianOAuthor

Inspiring

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".

T

The_ScareCrow

Inspiring

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

B

BrianOAuthor

Inspiring

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>

B

BrianOAuthor

Inspiring

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;
}

T

The_ScareCrow

Inspiring

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

B

BrianOAuthor

Inspiring

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 :-)

T

The_ScareCrow

Inspiring

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

B

BrianOAuthor

Inspiring

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();
}


function submitSearch(){
//refresh grid with new parameters
setpermissions('test');
ColdFusion.Grid.refresh("searchGrid", true);
customizeGrid();
}

function customizeGrid(){

// 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},{cfgridsortcolumn},{cfgridsortdirection},{frmSearchGrid:strsearchdb@none},{frmSearchGrid:strsearchmetadata@none},{frmSearchGrid:dtedateRangeFrom@none},{frmSearchGrid:dtedateRangeTo@none},{frmSearchGrid:strDocImageRights},{frmSearchGrid:strdoctype@none},{frmSearchGrid:strdocsubject@none})">

<cfgridcolumn name="diadocno" header="docno" width="70" />
<cfgridcolumn name="diadocumentdate" header="doc date" width="75" />
...
</cfgrid>
...
</cfform>
<cfset ajaxOnLoad("initDIA") />
...
</BODY>

B

BrianOAuthor

Inspiring

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".

T

The_ScareCrow

Inspiring

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

T

The_ScareCrow

Inspiring

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

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded