jqGrid prevent selection of new row if current is selected && alert onclick on checkbox

Question

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;}

Answer 1

I recommend you to try to use free jqGrid . It's the fork of jqGrid, which I develop since almost one year. It allows to simplify your code dramatically using the inline editing of inlineNav and formatter: "actions" which you use. All the options and callbacks of inline editing you can place directly in jqGrid options inside of inlineEditing option. I described the idea in the wiki article . Look at the demo which demonstrates it.

To customize selection or rows you can use beforeSelectRow which just returns false if you need to prevent selection. It's the correct way.