jqGrid column with checkboxes

Question

I am facing a problem with jqGrid.I have a list of documents in a jqGrid. First Column DocID, second is DocName, now I want two more columns with checkboxes in them so user can subscribe to those documents. Therefore I need Column 3 and Column 4 with checkboxes so user can check any number of check boxes and then every click of checkboxes I need to make a AJAX call with document ID so I can save the option for that user that the user is subscribed to that specific document.

I could make the two columns with checkboxes and I used the enabled them with the formatter but now I can't go further, I need to get the rowID on click of a checkbox and the document ID of the row where the checkbox was clicked.

HERE IS MY Grid Code.

jQuery("#doc").jqGrid({
    url: urlDoc + docID,
    datatype: 'json',
    mtype: 'GET',
    colNames:[<?php echo (buildCSV(array(_(''), _('Document ID'), _('Document Name'), _('Subscribe'), _('Copy Locally')))); ?>],
    colModel:[
            {name:'fld_doc2comp_status',index:'fld_doc2comp_status', width:1, editable: false, align:"left", hidden:true},
            {name:'fld_comp_documentid',index:'fld_comp_documentid', width:70, editable: true, align:"left", sortable:false,
                 editrules:{required:true}, formoptions:{label:'<?php echo (_('Document ID') . ' *');?>'} },
            {name:'fld_documentname',index:'fld_documentname', editable: true, align:"left", sortable:false,
            editrules:{required:true}, formoptions:{label:'<?php echo (_('Document Name') . ' *');?>'} },
            {name:'fld_subscribe',index:'fld_subscribe', editable: true, formatter:'checkbox', edittype:"checkbox", formatoptions:{disabled:false}, sortable:false, width:60, align:"center"},
            {name:'fld_local',index:'fld_local', editable: true, formatter:'checkbox', edittype:"checkbox", formatoptions:{disabled:false}, sortable:false, width:60, align:"center"}
    ],
    loadComplete: function() {
        jQuery('#doc').setSelection(jQuery('#doc').getDataIDs()[0],true);
        $('.ui-jqgrid-titlebar-close').remove();
    },
    onSelectRow: function(id){
        docID=id;
    },
    width:650,
    height:430,
    rowNum:100,
    viewrecords: true,
    sortable: true,
    sortname: 'fld_comp_documentid',
    sortorder: 'asc',
    pager:"#docpgr",
    pgbuttons:true,
    pginput:true,
    editurl: urlDoc + docID,
    caption: '<?php echo _('Document');?>'
});

I want to save the fld_subscribe and fld_local fields in the database on the main screen and not via edit record screen. I need the user to be able to change the fld_local and fld_subscribe for any document by simpling clicking on the checkbox.

Looking forward to your quick reply guys.

score 1 · Answer 1 · edited May 23 '17 at 09:59

I recommend you to look at the answer which shows how to bind the click on the checkbox to your event handler. The demo uses Tree Grid, but the code work exactly in the same way with any jqGrid.

By the way, the this inside of the loadComplete is DOM of the <table>. It has rows property. The first row of jqGrid is the hidden empty row. So the id of the first visible row will be this.rows[1].id. You can validate that this.rows.length > 1 and then use this.rows[1].id instead of jQuery('#doc').getDataIDs()[0].

jqGrid column with checkboxes

1 Answers1