Forum


Hello all,
I'm fairly new to jqgrid. I've used it in the past for a simple grid. Now the past comes back to haunt me.
The users want a column to contain a select dropdown. This part I can handle.
The problem is that the select options will change based on the value of another cell in the next column.
For example,
In one column, the select option will be "Approve" & "Disapprove".
In the next column, the value of the cell is "Proposal in Review". This value will occasionally change to "Letter of Intent in Review or the cell will be blank".
I wish to dynamically change the select to "Approve Proposal", "Disapprove Proposal", "Approve LOI", "Disapprove LOI" or no select option.
Currently my grid is this...
I set the options before the grid, then call the variable when I need it.
var colApproveDisapprove = {value:":Click Here ;1:Approve;0:Disapprove"};
In the grid...
var lastsel;
var colApproveDisapprove = {value:":Click Here ;1:Approve;0:Disapprove"};
$(document).ready(function(){
jQuery("#list").jqGrid({
scrollrows : true,
url:'_getGridApplicationData.php?nd='+new Date().getTime(),
datatype: "json",
colNames:['App. ID','User ID','Created Date','Project Title','Total Amt.','Files','Actions', 'Status'],
colModel:[
{name:'applicationId',index:'applicationId', width:75, align:"center"},
{name:'userId',index:'userId', width:75},
{name:'createdDate',index:'createdDate', editable:false, editoptions:{readonly:true}, width:100},
{
name:'projectTitle',
index:'projectTitle',
width:180,
align:"left",
formatter: 'showlink',
formatoptions:
{
target:"_new",
baseLinkUrl:'applicationInformationForm.php',
addParam:'&action=view',
idName:'applicationId'
}
},
{
name:'totalAmountRequested',
index:'totalAmountRequested',
width:90,
align:"right",
editable:false,
editoptions:{readonly:true},
formatter:'currency',
formatoptions:
{
thousandsSeparator:","
}
},
{ //Files
name:'loiAttached',
index:'loiAttached',
align:"center",
width:100
},
{ // Actions
name:'action',
index:'action',
align:"center",
width:150,
editable:true,
edittype:"select",
editoptions:colApproveDisapprove
},
{
name:'applicationStatus',
index:'applicationStatus',
align:"center",
width:140,
editable:false,
editoptions:{readonly:true}
}
],
cellurl:"_editAdminGrid.php",
cellSubmit:'remote',
pager: jQuery('#pager'),
rowNum:10,
rowList:[10,20,30],
imgpath:'images',
sortname: 'applicationId',
viewrecords: true,
sortorder: "asc",
height:300,
cellEdit:true,
caption: "Grant Applications",
footerrow:true,
userDataOnFooter:true,
beforeEditCell:function( applicationId, applicationStatus, val, iRow, iCol ){
if (val == ''){
return "";
}else{
return val;
}
}
}).navGrid('#pager',
{ view:false, edit:false, add:false, del:false, search:false},
{height:200, reloadAfterSubmit:true }, //edit options
{height:200, jqModal:false, closeOnEscape:true} //view options
)
});
The value of the "ApplicationStatus" is determined prior to JSON encoding in "_getGridApplicationData.php", then sent to the grid.
I'm thinking about using the "beforeEditCell" event like...
beforeSaveCell : function(rowid,celname,value,iRow,iCol) {
if( applicationStatus == 'LOI in review' )
{ return “new value”; } // here's where I get lost. How do I set the options of the select?
}
Thank you for any help.
JohnM
It's not who I am underneath, but what I do that defines me.
I've changed my thinking.
Instead of changing select options based on the value of another cell in the next column, I'm changing the select options based on the value of the current cell.
I'm still having problems trying to set the select options prior to displaying the grid.
It's not who I am underneath, but what I do that defines me.
13:49

01/09/2008

John,
This may be considered more of a hack but I use this to update the values of another cell as the value in the current cell changes:
onSelectRow: function(id){
.......
var idID = '#'+id+'_sector';
$(idID).bind("change", function(){
updateSLHTML( $(idID).val(),id );
});
......
},
The updateSLHTML method looks like this:
// Changes the LocId inner HTML when location/sector changes
function updateSLHTML(Ltype,Lid){
var idID = '#'+Lid+'_locId';
if(Ltype == 'L')
$(idID).html(colLocationsHTML);
else
$(idID).html(colSectorsHTML);
}
In this case I store preformatted HTML for the cell and just update the cell inner HTML with the new values. This *can* be done dynamically as well, you just have to convert your select data into HTML.
The basic concept is: Bind a change event to the cell from within the onSelectRow method and then update the inner HTML of the target cell with new content.
This seems to work fine, so far
Pete
Most Users Ever Online: 715
Currently Online:
191 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