Forum


23:55

02/03/2010

Does anyone know how to trigger an event when the value of a select box changes in a subgrid with inline editting? I need something equivalent to onChange, but that doesnt seem to work with jqgrid selects. The reason i ask is i need to change the options for another select box based on the new value in the first box. Any help would be greatly appreciated.. Thanks
13:22

Moderators
30/10/2007

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
19:13

Moderators
30/10/2007

Hello,
IMHO, this should work.
Publishing the rest of code maybe will clarify the problem
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
21:20

02/03/2010

Thanks for taking a look.
Here is the complete grid declaration:
jQuery("#timelinetable").jqGrid({
datatype: "local",
height: 500,
colNames:['Grid','ReOrder','Override ID', 'Notes', 'Variable affected', 'Operation to Perform', 'Value for Operation', 'Type of Value Used'],
colModel:[
{name:'id',index:'id', width:55},
{name:'reorder', index:'reorder', width:70, sorttype:"int",editable:true},
{name:'cutid',index:'cutid', width:100, sorttype:"int", editable: false},
{name:'notes', index:'notes', width:200, editable:true},
{name:'var',index:'var', width:180, editable: true, edittype:"select", editoptions:{value:"evicttime:evicttime;bktime:bktime;collectime:collecttime;redemptime:redemptime;reotime:reotime;fctime:fctime;tottime:tottime;taxfactor:taxfactor;fhalimit:fhalimit;fcsaleflag:fcsaleflag;fcstartflag:fcstartflag"}},
{name:'oper',index:'oper', width:180, editable: true, edittype:"select", editoptions:{value:"set:set;multiply:multiply;divide:divide;add:add;subtract:subtract"}},
{name:'val',index:'val', width:180, editable: true},
{name:'typeval',index:'typeval', width:180, editable: true, edittype:"select", editoptions:{value:"double:double;string:string;var:var"}}
],
onSelectRow: function(id){
if(id && id!=lastsel){
if(lastsel!=0){
jQuery("#timelinetable").saveRow(lastsel, false, 'clientArray');
jQuery("#timelinetable").restoreRow(lastsel);
timeoverrides[lastsel]=jQuery("#timelinetable").getRowData(lastsel);
}
jQuery("#timelinetable").editRow(id, true);
lastsel=id;
}
},
subGrid: true,
imgpath: 'jqgrid/themes/basic/images',
caption: "Timeline Override Configuration",
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id;
subgrid_table_id = subgrid_id+"_t";
$("#"+subgrid_id).html("<table id='"+subgrid_table_id+"' class='scroll'></table>");
jQuery("#"+subgrid_table_id).jqGrid({
datatype: "local",
colNames: ['ID', 'Condition Variable','Condition','Value for Condition','Type of Value Used'],
colModel: [
{name:'id',index:'id', width:55},
{name:"condvar",index:"condvar",width:150, editable: true, edittype:"select", editoptions:{value:"bkflag:bkflag;bkchapter:bkchapter;proptype:proptype", dataEvents :[{type:'change', fn:function(e){
alert("yo");
var thisval = $(e.target).val();
alert(thisval);
lookupField(thisval, subgrid_table_id, row_id);
}}]}
},
{name:"condition",index:"condition",width:150, editable: true, edittype:"select",editoptions:{value:"equal:equal;notequal:notequal;greater:greater;greaterequal:greaterequal;less:less;lessequal:lessequal"}},
{name:"condval",index:"condval",width:150, editable: true}, //edittype:"select", editoptions:{value:"true:true;false:false"}},
{name:"condtypeval",index:"condtypeval",width:150,editable:true, edittype:"select", editoptions:{value:"double:double;string:string;var:var"}}
],
onSelectRow: function(id){
if(id && (id!=lastsel2 || row_id!=lastsel2row)){
if(lastsel2!=0 && lastsel2row!=0){
var tempgrid = "#timelinetable_"+lastsel2row+"_t";
jQuery(tempgrid).saveRow(lastsel2, false, 'clientArray');
jQuery(tempgrid).restoreRow(lastsel2);
timeconditions[lastsel2row][lastsel2]=jQuery(tempgrid).getRowData(lastsel2);
}
jQuery("#"+subgrid_table_id).editRow(id, true);
lastsel2=id;
lastsel2row=row_id;
}
},
loadui:"disable",
height: 100,
imgpath: 'jqgrid/themes/basic/images',
caption: "Conditions for Override "+timeoverrides[row_id].cutid+" "
});
insertTimeConditionData(row_id, subgrid_table_id);
},
subGridRowColapsed: function(subgrid_id, row_id){
var subgrid_table_id = subgrid_id+"_t";
for(var i = 0; i<timeconditions[row_id].length; i++){
jQuery("#"+subgrid_table_id).saveRow(i, false, 'clientArray');
jQuery("#"+subgrid_table_id).restoreRow(i);
timeconditions[row_id][i]=jQuery("#"+subgrid_table_id).getRowData(i);
}
lastsel2=0;
lastsel2row=0;
},
loadui:"disable"
});
Everything else works great, i just can't get the dataEvent in the subgrid to fire.
Thanks again,
Jeff
21:14

Moderators
30/10/2007

Hello,
Just simple question. Which version of jqGrid is used? I see imgpath options, which point me that 3.4 or less is used. Is this right?
The dataEvents is used from 3.5 version.
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 715
Currently Online:
45 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66