I am creating a new jqgrid with these fields and features:
Deployment id’,’Branch’, ‘Release Name’,’Client id’,’# of hosts’,’Comments’,’Actions
-I have multiselect option on TRUE.
-I have edit/delete action in each row
-I have my navbar on bottom with the ADD/Search option.
My actions are:
when I ADD a new record I can add BRANCH field and Comment only (Thats works)
When I EDIT a record I can modify only COMMENT (that works too)
My problem is about MULTISELECT option…
If I click on EDIT button and the MULTISELECT is uncheck everything works fine.. means only COMMENT is allowed to modify.
but
If the row is selected in the Multiselect column the BRANCH field became Editable.
In addition I want to block other actions while I am editing one particularly row (means do not be able to Check/Uncheck EDIT/Delete another rows)
Can someone help to me to do that?
Thank
ps: I was trying with different code/examples I found here without success. I don’t publish it for now to avoid more confusion.
var lastSel;
$(function(){
$("#list").jqGrid({
data: mydata,
datatype: "local",
colNames:['Deployment id','Branch', 'Release Name','Client id','# of hosts','Comments','Actions'],
colModel:[
{name:'deployment_id',index:'deployment_id',align:"right", sorttype:"int", width:120},
{name:'branch',index:'branch',align:"center", formatter:branchColor,editable: true,edittype:"select",editrules:{required:true},editoptions:{value:"option 1:option1;option2:option2"}},
{name:'release_name',index:'release_name',align:"center"},
{name:'client_id',index:'client_id',align:"right", sorttype:"int", width:60},
{name:'num_hosts',index:'num_hosts',align:"right", sorttype:"int", width:60},
{name:'comments',index:'comments',align:"center", editable: true,edittype:"textarea", editoptions:{rows:"2",cols:"20"}},
{name:'myac', width:80, fixed:true, sortable:false, resize:false, formatter:'actions',formatoptions:{keys:true}}
],
rowList : [20,30,50],
pager: '#pager',
sortname: 'deployment_id',
viewrecords: true,
recordpos: 'right',
sortorder: "asc",
sortable: true,
multiselect: true,
shrinkToFit :true,
viewrecords: true,
onSelectRow: function(id){
//alert("id:"+id);
if (id == null) {
id = 0;
if(id && id!==lastSel){
//$('#list').jqGrid('restoreRow',lastSel);
//$('#list').jqGrid('editRow',id,false);
$("#jqg_list_" + id).attr("disabled","disabled");
lastSel=id;
}
}
else {
var grId = $("#list").jqGrid('getGridParam','selrow');
if(grId){
$("#" + grId + "_branch").attr("disabled","disabled");
$("#" + grId + "_branch").removeClass("editable");
}
}
},
});
// to modify The tool bar on bottom
$("#list").jqGrid('navGrid','#pager',{edit:false, edittitle: 'Modify a Deployment',
add:true, addtitle: 'Add a new Deployment',
del:true, deltitle: 'Delete a Deployment',
nav:{ addCaption: 'Columns'}
},
{// edit option
beforeShowForm: function(form) {
$('#branch', form).attr("disabled","disabled");
},
//seems to be is not qworking
beforeSelectRow: function(rowid, e) { return false; },
},
{// add option
beforeShowForm: function(form) {
$('#branch option[value=""]', form).text('Select a branch')
$('#branch option[value=""]', form).attr("selected", "selected");
$('#branch', form).attr("disabled","");
var ids;
ids = $("#list").getGridParam('selarrrow');
if(ids){
alert('array: ['+ids+']');
alert('id in array[0]: '+ids[0]);
}
},
addCaption: "Add a Deploymet"
},
{// delette option
},
{// Search option
multipleSearch:true
},
{// view option
}
);
Finally I got it the answer testing a lot.. and I want to share that.. could be useful for some else.
Basically I delete the OnSelectRow function and I modified the formatoptions:{}adding the tag onEdit
I add the example/DEMO running in this link: DEMO ONLINE