Thanks Azadi, i have tried adding this to my code but no joy still displays the first page, so i must have missed something. my code is attached.
basically i have 2 bound selects which control the returned data in the grid.
I looked at the page source in the browser and cant seem to find the ajax reload at the bottom, i have attached that aswell
stu
cfm source--------------------------------------------------------
<cfajaximport/>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Auctioneer Loader</title>
<script type="text/javascript">
var startPage = 4; //the page you want to reset your cfgrid to.
//IMPORTANT: the grid's page index is 0-based!
//so if you want to start at page 5 you have to set startPage to 4 above!!!
var pageSize = 10; // this should equal the value of pagesize attribute of your cfgrid!!!
setGridToPage = function() {
mygrid = ColdFusion.Grid.getGridObject('Auctioneers'); // get grid object.
//IMPORTANT: change mygrid1 above to your cfgrid's actual name (the name attribute of cfgrid)
ds = mygrid.getDataSource(); //get the grid's data store
ds.load({params:{start:startPage*pageSize, limit:pageSize}}); //reload data store at page 5
//technically, we are not setting a page number - we are reloading data store to show records from page 5
cm = mygrid.getColumnModel(); //get grid's column model
mygrid.reconfigure(ds,cm); //reconfigure the grid to show page 5
}
</script>
</head>
<body bgcolor="#ffffff">
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<cfform method="get" name="myform" preloader="no" id="myformid">
<cfinput type="hidden" name="selprov" value="#url.selprov#">
<cfinput type="hidden" name="seldisp" value="#url.seldisp#">
<table width="675" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="140" class="bodytextbold">Select by Province:</td>
<td width="140" class="bodytext"><cfselect name="province"
bind="cfc:Auctioneers.getProvinces({selprov})"
bindonload="true" /></td>
<td width="140" class="bodytextbold">Select by Discipline:</td>
<td width="220" class="bodytexttext"><cfselect name="discipline"
bind="cfc:Auctioneers.getDisciplines({seldisp})"
bindonload="true" /></td>
</tr>
<td></td>
<tr>
</tr>
</table>
<br />
<cfgrid name="Auctioneers" bindonload="true" appendkey="yes" griddataalign="left" gridlines="yes" rowheaderalign="left" colheaderalign="left" bgcolor="##bbbbbb" selectcolor="##bbbbbb" selectmode="browse" enabled="yes" visible="yes"
format="html"
bind="cfc:Auctioneers.getAuctioneers({cfgridpage},
{cfgridpagesize},
{cfgridsortcolumn},
{cfgridsortdirection},
{province},
{discipline})"
pagesize="10" preservepageonsort="false"
striperows="yes" selectonload="false" textcolor="##000000" autowidth="false">
<cfgridcolumn name="auctioneer_1" header="Auctioneer" headeralign="left" dataalign="left" width="225" bold="no" italic="no" select="no" display="yes" headerbold="yes" headeritalic="no" textcolor="##000000"/>
<cfgridcolumn name="auctioneer_sel" header="" headeralign="left" dataalign="center" width="80" bold="no" italic="no" select="no" display="yes" headerbold="yes" headeritalic="no" textcolor="##000000"/>
<cfgridcolumn name="auctioneer_2" header="Contact Details" headeralign="left" dataalign="left" width="195" bold="no" italic="no" select="no" display="yes" headerbold="yes" headeritalic="no"/>
<cfgridcolumn name="auctioneer_3" header="Disciplines" headeralign="left" dataalign="left" width="172" bold="no" italic="no" select="no" display="yes" headerbold="yes" headeritalic="no" textcolor="##000000"/>
</cfgrid>
</cfform>
<cfset ajaxonload('setGridToPage')>
</body>
</html>
source in browser -----------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><script type="text/javascript">_cf_loadingtexthtml="<img alt=' ' src='/CFIDE/scripts/ajax/resources/cf/images/loading.gif'/>";
_cf_contextpath="";
_cf_ajaxscriptsrc="/CFIDE/scripts/ajax";
_cf_jsonprefix='//';
</script><script type="text/javascript" src="/CFIDE/scripts/ajax/messages/cfmessage.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/package/cfajax.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/yui/animation/animation-min.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/ext-core.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/util.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/widget-core.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/data/data.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/dragdrop/dragdrop.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/form/form.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/button/button.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/source/widgets/View.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/source/widgets/MenuButton.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/toolbar/toolbar.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/grid/grid.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/ext/package/grid/edit-grid.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/ajax/package/cfgrid.js"></script>
<link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/resources/ext/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/CFIDE/scripts/ajax/resources/cf/cf.css" />
<script type="text/javascript" src="/CFIDE/scripts/cfform.js"></script>
<script type="text/javascript" src="/CFIDE/scripts/masks.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Auctioneer Loader</title>
<script type="text/javascript">
var startPage = 4; //the page you want to reset your cfgrid to.
//IMPORTANT: the grid's page index is 0-based!
//so if you want to start at page 5 you have to set startPage to 4 above!!!
var pageSize = 10; // this should equal the value of pagesize attribute of your cfgrid!!!
setGridToPage = function() {
mygrid = ColdFusion.Grid.getGridObject('Auctioneers'); // get grid object.
//IMPORTANT: change mygrid1 above to your cfgrid's actual name (the name attribute of cfgrid)
ds = mygrid.getDataSource(); //get the grid's data store
ds.load({params:{start:startPage*pageSize, limit:pageSize}}); //reload data store at page 5
//technically, we are not setting a page number - we are reloading data store to show records from page 5
cm = mygrid.getColumnModel(); //get grid's column model
mygrid.reconfigure(ds,cm); //reconfigure the grid to show page 5
}
</script>
<script type="text/javascript">
ColdFusion.Ajax.importTag('CFAJAXPROXY');
</script>
<script type="text/javascript">
_cf_bind_init_1257493396063=function()
{
ColdFusion.Bind.register([['selprov','myformid','change']],{'bindTo':'province','bindToAttr':'value','cfc':'/auctioneers.cfc','cfcFunction':'getProvinces','bindExpr':[['selprov','selprov','myformid','value']]},ColdFusion.Bind.cfcBindHandler,true);
};ColdFusion.Event.registerOnLoad(_cf_bind_init_1257493396063);
</script>
<script type="text/javascript">
_cf_bind_init_1257493396064=function()
{
ColdFusion.Bind.register([['seldisp','myformid','change']],{'bindTo':'discipline','bindToAttr':'value','cfc':'/auctioneers.cfc','cfcFunction':'getDisciplines','bindExpr':[['seldisp','seldisp','myformid','value']]},ColdFusion.Bind.cfcBindHandler,true);
};ColdFusion.Event.registerOnLoad(_cf_bind_init_1257493396064);
</script>
<script type="text/javascript">
ColdFusion.Ajax.importTag('CFGRID');
</script>
<script type="text/javascript">
ColdFusion.objectCache['Auctioneers'] = new ColdFusion.Grid.Actions('cfgrid1257493396065');
_cf_GRIDTAG_initAjaxGrid_1257493396066=function()
{
var _cf_gridColModel = [{header:'Auctioneer','colName':'AUCTIONEER_1','name':'AUCTIONEER_1','dataIndex':'AUCTIONEER_1',sortType:Ext.grid.DefaultColumnModel.asUCString,sortable:true,width:225},{header:'','colName':'AUCTIONEER_SEL','name':'AUCTIONEER_SEL','dataIndex':'AUCTIONEER_SEL',sortType:Ext.grid.DefaultColumnModel.asUCString,sortable:true,width:80},{header:'Contact Details','colName':'AUCTIONEER_2','name':'AUCTIONEER_2','dataIndex':'AUCTIONEER_2',sortType:Ext.grid.DefaultColumnModel.asUCString,sortable:true,width:195},{header:'Disciplines','colName':'AUCTIONEER_3','name':'AUCTIONEER_3','dataIndex':'AUCTIONEER_3',sortType:Ext.grid.DefaultColumnModel.asUCString,sortable:true,width:172},{header:'CFGRIDROWINDEX','colName':'CFGRIDROWINDEX','name':'CFGRIDROWINDEX','dataIndex':'CFGRIDROWINDEX',sortType:Ext.grid.DefaultColumnModel.asUCString,sortable:true,hidden:true}];
_cf_CFGRID_getData_1257493396067=function( _cf_gridDataProxy, cfgridpage, cfgridpagesize, cfgridsortcolumn, cfgridsortdirection, _cf_grid_errorhandler, _cf_callback, _cf_scope, _cf_arg,_cf_reader)
{
ColdFusion.Bind.cfcBindHandler(null, {'bindTo':ColdFusion.Grid.loadData,'bindToAttr':'true','errorHandler':_cf_grid_errorhandler,'cfc':'/auctioneers.cfc','cfcFunction':'getAuctioneers','bindExpr':[['page',cfgridpage],['pageSize',cfgridpagesize],['gridsortcolumn',cfgridsortcolumn],['gridsortdir',cfgridsortdirection],['filter','province','','value'],['filter2','discipline','','value']], 'bindToParams': { '_cf_gridDataProxy':_cf_gridDataProxy, '_cf_scope':_cf_scope, '_cf_reader':_cf_reader, '_cf_gridname':'Auctioneers', '_cf_grid_errorhandler':_cf_grid_errorhandler, '_cf_callback':_cf_callback, '_cf_arg':_cf_arg }});
};
var _cf_gridDataModel = new Ext.data.Store({proxy:new ColdFusion.Grid.ExtProxy(_cf_CFGRID_getData_1257493396067,null), reader:new ColdFusion.Grid.ExtReader(_cf_gridColModel), remoteSort:true, sortInfo:true});
ColdFusion.Grid.init('Auctioneers','__CFGRID__myform__Auctioneers','myformid',true,false,true,false,_cf_gridColModel,_cf_gridDataModel,true,true,true,'#cfgrid1257493396065 .x-grid-col-0{color:#000000;} #cfgrid1257493396065 .x-grid-hd-0{color:#0B333C;font-weight:bold;} #cfgrid1257493396065 .x-grid-col-1{color:#000000;} #cfgrid1257493396065 .x-grid-hd-1{color:#0B333C;font-weight:bold;} #cfgrid1257493396065 .x-grid-col-2{color:#000000;} #cfgrid1257493396065 .x-grid-hd-2{color:#0B333C;font-weight:bold;} #cfgrid1257493396065 .x-grid-col-3{color:#000000;} #cfgrid1257493396065 .x-grid-hd-3{color:#0B333C;font-weight:bold;} #cfgrid1257493396065 .x-grid-col-4{color:#000000;} #cfgrid1257493396065 .x-grid-hd-4{color:#0B333C;} #cfgrid1257493396065 .x-grid-row-selected{background-color:#bbbbbb !important;color:white} #cfgrid1257493396065 .x-grid-row{background-color:#bbbbbb;} ',10,false,false,null,null,{'appendKey':true,colInfo:[null,null,null,null,null]},null,null,[['province','','change'],['discipline','','change']]);
};ColdFusion.Event.registerOnLoad(_cf_GRIDTAG_initAjaxGrid_1257493396066);
</script>
<script type="text/javascript">
<!--
_CF_checkmyform = function(_CF_this)
{
//reset on submit
_CF_error_exists = false;
_CF_error_messages = new Array();
_CF_error_fields = new Object();
_CF_FirstErrorField = null;
//display error messages and return success
if( _CF_error_exists )
{
if( _CF_error_messages.length > 0 )
{
// show alert() message
_CF_onErrorAlert(_CF_error_messages);
// set focus to first form error, if the field supports js focus().
if( _CF_this[_CF_FirstErrorField].type == "text" )
{ _CF_this[_CF_FirstErrorField].focus(); }
}
return false;
}else {
return true;
}
}
//-->
</script>
<script type="text/javascript">
ColdFusion.Event.registerOnLoad(setGridToPage,null,false,true);
</script>
</head>
<body bgcolor="#ffffff">
<link href="/css/styles.css" rel="stylesheet" type="text/css">
<form name="myform" id="myformid" action="/dsp_auctioneers.cfm?selprov=All&seldisp=All" method="get" preloader="no" onsubmit="return _CF_checkmyform(this)"> <input name="selprov" id="selprov" type="hidden" value="All" /> <input name="seldisp" id="seldisp" type="hidden" value="All" />
<table width="675" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="140" class="bodytextbold">Select by Province:</td>
<td width="140" class="bodytext"><select name="province" id="province">
</select></td>
<td width="140" class="bodytextbold">Select by Discipline:</td>
<td width="220" class="bodytexttext"><select name="discipline" id="discipline">
</select></td>
</tr>
<td></td>
<tr>
</tr>
</table>
<br />
<div id="cfgrid1257493396065" style="border: 1px solid #cccccc; overflow: hidden;">
</div> <div><input type="hidden" name="__CFGRID__myform__Auctioneers" value="" /></div>
</form>
</body>
</html>
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59: 60: 61: 62: 63: 64: 65: 66: 67: 68: 69: 70: 71: 72: 73: 74: 75: 76: 77: 78: 79: 80: 81: 82: 83: 84: 85: 86: 87: 88: 89: 90: 91: 92: 93: 94: 95: 96: 97: 98: 99: 100: 101: 102: 103: 104: 105: 106: 107: 108: 109: 110: 111: 112: 113: 114: 115: 116: 117: 118: 119: 120: 121: 122: 123: 124: 125: 126: 127: 128: 129: 130: 131: 132: 133: 134: 135: 136: 137: 138: 139: 140: 141: 142: 143: 144: 145: 146: 147: 148: 149: 150: 151: 152: 153: 154: 155: 156: 157: 158: 159: 160: 161: 162: 163: 164: 165: 166: 167: 168: 169: 170: 171: 172: 173: 174: 175: 176: 177: 178: 179: 180: 181: 182: 183: 184: 185: 186: 187: 188: 189: 190: 191: 192: 193: 194: 195: 196: 197: 198: 199: 200: 201: 202: 203: 204: 205: 206: 207: 208: 209: 210: 211: 212: 213: 214: 215: 216: 217:
by: azadisaryevPosted on 2009-11-05 at 17:02:34ID: 25755843
it's definitaly possible - after all, it's CF! :)
it involves a bit of javascript and ajaxonload() cf function.
pay attention to comments in js code below!
1) add <cfajaximport/> at the top of your page to ensure all required js libraries are properly loaded. this is important.
2) add this js to the <head> section of your page:
<script type="text/javascript">
var startPage = 4; //the page you want to reset your cfgrid to.
//IMPORTANT: the grid's page index is 0-based!
//so if you want to start at page 5 you have to set startPage to 4 above!!!
var pageSize = 10; // this should equal the value of pagesize attribute of your cfgrid!!!
setGridToPage = function() {
mygrid = ColdFusion.Grid.getGridObj
//IMPORTANT: change mygrid1 above to your cfgrid's actual name (the name attribute of cfgrid)
ds = mygrid.getDataSource(); //get the grid's data store
ds.load({params:{start:sta
//technically, we are not setting a page number - we are reloading data store to show records from page 5
cm = mygrid.getColumnModel(); //get grid's column model
mygrid.reconfigure(ds,cm);
}
</script>
3) add this as the last line before the closing </body> tag in your page:
<cfset ajaxonload('setGridToPage'
voila!
Azadi