I have been struggling with some issues for a while now on jquery grid.
The first one is ... if my current row is currently being edited, if clicked outside of row, i dont want it to cancel my editing and select the new row. My current code is:
beforeSelectRow : function(id){
if($('tr#'+id).is('[editable="1"]') == '1'){
return false;
}
else if ($('tr#'+id).is('editable') != '1') {
return true;
}
}
How can i make it to work?
Also, i have a column with checkboxes [ department head column with yes or no values]. If i have a single checked checkbox, i want it to pop a alert when i click a new box and not leave edit.
At the moment i managed to make a little code for aftersavefunc, that will alert and change the Yes to a No if another box is checked but its not what i need as it acts after the row has been saved.
var checkboxCol = grid.getCol('HeadDepartament');
var numberOfCheckedBoxes=[];
for(k=0;k<ids.length;k++){
if(checkboxCol[k] == 'Yes'){
numberOfCheckedBoxes.push(checkboxCol[k]);
if (numberOfCheckedBoxes.length >1){
grid.setCell(id, 'sefDepartament', 'No');
alert('Please deselect the other checked box first');
numberOfCheckedBoxes = 0;
}
}
}
Update [ by oleg's request] :
$(function(){
var mydata = [
{id:0, nume:'Razvan', prenume:'Ciprian',username:'Razvan.Ciprian',email: 'Razvan.Ciprian@test.com','sefDepartament':'No',position: 'position 1',joinYear:'17-11-2015'},
{id:1, nume:'Jijel', prenume:'Codru',username:'Jijel.Codru',email: 'Jijel.Codru@test.com','sefDepartament':'No',position: 'position 5',joinYear:'18-11-2015'},
{id:2, nume:'Ionica', prenume:'Drumlung',username:'Ionica.Drumlung',email: 'Ionica.Drumlung@test.com','sefDepartament':'Yes',position: 'position 2',joinYear:'19-11-2015'},
{id:3, nume:'Rodent', prenume:'Dumitrache',username:'Rodent.Dumitrache',email: 'Rodent.Dumitrache@test.com','sefDepartament':'No',position: 'position 4',joinYear:'20-11-2015'}];
var grid = $('#grid');
var newId=0;
var newIdGeneratorFunction = function(){
return newId++ ;
};
var checkboxFormatFunc = function(cellvalue, options ,rowObject){
if(cellvalue == 'Yes')
return 'Yes';
else return 'No';
};
var afterSaveFunction = function(id){
var checkboxCol = grid.getCol('sefDepartament');
var ids = grid.jqGrid('getDataIDs');
var k;
var firstFoundId ;
var numberOfCheckedBoxes=[];
// Number of Checked Boxes Function begins;
for(k=0;k<ids.length;k++){
if(checkboxCol[k] == 'Yes'){
numberOfCheckedBoxes.push(checkboxCol[k]);
if (numberOfCheckedBoxes.length >1){
grid.setCell(id, 'sefDepartament', 'No');
alert('Please deselect the other checked box first');
numberOfCheckedBoxes = 0;
}
}
};
// Number of Checked Boxes Function ends;
};
var colModelSettings = [
{name:'id', label:'id',key: true,hidden: true,formatter: newIdGeneratorFunction , width:10,sorttype:'number',editable: false},
{name:'nume',label:'Nume',width:90, align: 'center',editable:true,searchoptions: {sopt: ['eq','bw','ew','cn']}, editrules:{required:true}, editoptions: {defaultValue: ' '},formatter: 'text'},
{name:'prenume',label:'Prenume',width:100,editable:true,searchoptions: {sopt: ['eq','bw','ew','cn']},align: 'center',editrules:{required:true},editoptions: {defaultValue: ' '},formatter: 'text'},
{name:'username',label:'Username',searchoptions: {sopt: ['eq','bw','ew','cn']},width:125,align: 'center' },
{name:'email',label:'Email',width:135,searchoptions: {sopt: ['eq','bw','ew','cn']},align: 'center'},
{name:'sefDepartament',label:'Sef Departament',width:90,editable:true,align: 'center', stype:"select", searchoptions:{sopt: ['eq','ne'],value: "Yes:Yes;No:No"},formatter: checkboxFormatFunc,edittype:'checkbox',editoptions: { value:'Yes:No', defaultValue: 'No' }},
{name:'position',label:'Position',editable:true,stype: 'select',formatter: 'select',searchoptions: {sopt: ['eq','ne'],value: ' : ;position 1:position 1;position 2:position 2;position 3:position 3;position 4:position 4;position 5:position 5'},
align: 'center',edittype:'select',editoptions:{defaultvalue: 'P0: ',value: ' : ;position 1:position 1;position 2:position 2;position 3:position 3;position 4:position 4;position 5:position 5'},width: 75},
{name:'joinYear',label:'joinYear',editable:true,sorttype:'date',stype: 'datepicker',align: 'center',width: 70,
searchoptions:{sopt: ['eq','ne'],dataInit: function (elem) {
$(elem).datepicker(
{ dateFormat:'dd-mm-yy',
showButtonPanel: true }
)}},
editoptions:{size:20,defaultValue: ' ',
dataInit: function (elem) {
$(elem).datepicker(
{ showButtonPanel: true,
dateFormat:'dd-mm-yy',}
)}}},
{name:'experience', label:'Experience',searchoptions:{sopt: ['eq','bw','ew','cn']}, editable:false, editoptions:{defaultValue: ' '},align: 'center',width: 60},
{name:'actiuni',label: 'Actiuni',formatter: 'actions', formatoptions: {onEdit: onEditActionFunction,afterSave:afterSaveFunction},editable: false,sortable: false,search: false,width: 60 }
];
grid.jqGrid({
pager: '#pager',
data: mydata ,
datatype: 'local',
editurl:'clientArray',
height: 250,
loadonce: true,
viewrecords: true,
scrollOffset:0,
sortorder: 'asc',
caption:'Employee List' ,
autowidth: true,
colModel: colModelSettings,
beforeSelectRow : function(id){
if($('tr#'+id).is('[editable="1"]') == '1'){
return false;
}
else if ($('tr#'+id).is('editable') != '1') {
return true;
}
}
});
grid.jqGrid('navGrid', '#pager', {edit:false, add:false, save:false, cancel:false, search:true, searchtext: 'Search', refresh:true, del:false});
grid.jqGrid('inlineNav','#pager',
{
edit:true,
edittext: 'Edit',
save:true,
savetext: 'Save',
cancel: false,
add:true,
cancel: true,
canceltext: 'Cancel',
cancelicon: 'ui-icon-cancel',
addicon:'ui-icon-plus',
addtext: 'Add New Row',
addedrow: 'last',
addParams: {
position: 'last',
addRowParams: {
aftersavefunc : afterSaveFunction,
keys: true,
}
},
aftersavefunc : afterSaveFunction,
},
});
});
Update 2: I managed to block selecting a different row and leaving edit while editing the current row with this function:
beforeSelectRow : function(id){
var idsArray = grid.jqGrid('getDataIDs');
var i;
for(i=0;i<idsArray.length;i++){
if($('#'+idsArray[i]).is('[editable="1"]') ){
grid.editRow(idsArray[i],true);
return false;
}};
return true;}
