Custom formatter in jqGrid which calls jQuery function

Question

I have a jqGrid with a custom formatter that returns two checkboxes:

jQuery(function($){
    $("#gridAgenda").jqGrid({
    ...
    colModel: [
        ...,
        "asiste",
        ...
    ],
    colModel:[
        ...,  
        {name:'asiste',formatter:asisteFormater},
        ...
    ]
    ...
});
}
function asisteFormater (cellvalue, options, rowObject) {
    return "Sí<input type='checkbox' id='asisteSi'/> No<input type='checkbox' id='asisteNo'/>";
}

$("#asisteSi").click(function () {
    ...
}

But I want to call a jQuery function when any of the two checkboxes are checked, to evaluate which one was checked and calling an ajax function. I think the problem is, that asisteSi does not exist until the jqGrid is created, so I cannot do this.

Can someone help me?

score 2 · Answer 1 · answered Oct 28 '14 at 11:22

Finally I've solved this way:

gridComplete: function () {
        var rowData = $("#gridAgenda").getRowData();             
        for (var i = 0; i < rowData.length; i++) 
        {               
            var asisteSi="#asisteSi"+rowData[i].id;
            var asisteNo="#asisteNo"+rowData[i].id;             
            $(asisteSi).click(function(){           
                var actualSi = "#"+this.id;
                var actualNo = actualSi.replace("asisteSi","asisteNo");                 
                if($(actualSi).prop('checked')){
                    $(actualNo).prop('checked', false);                 
                }
                //TODO:llamada ajax
            });             
            $(asisteNo).click(function(){           
                var actualNo = "#"+this.id;
                var actualSi = actualNo.replace("asisteNo","asisteSi");
                if($(actualNo).prop('checked')){
                    $(actualSi).prop('checked', false);                     
                }
                //TODO:llamada ajax                 
            });
         }
}

The problem was that $(asisteSi) had the last value when do click, so I had to get the current Id

meskobalazs · Accepted Answer · 2014-10-27T15:50:09.350

You should put the callback attachment into the gridComplete option of the grid definition, just like this:

$('#gridAgenda').jqGrid({
    ...
    gridComplete: function () {
        $("#asisteSi").click(function () {
            // do your deed
        });
    }
});

Supplemental

By the way, if there are multiple rows in the grid, you should not use asisteSi as your id, because it won't be unique in the page, and that causes undefined behaviour.

Custom formatter in jqGrid which calls jQuery function

2 Answers2

Linked