Custom formatter in jqGrid that calls jQuery function
I have a custom formatted jqGrid 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 the jQuery function when either of the two checkboxes is checked to evaluate which one was checked and call the ajax function. I think the problem is that asisteSi does not exist before the jqGrid is created, so I cannot do that.
Can anyone help me?
You have to put your callback binding in the gridComplete
grid definition parameter like this:
$('#gridAgenda').jqGrid({
...
gridComplete: function () {
$("#asisteSi").click(function () {
// do your deed
});
}
});
Background
By the way, if there are multiple lines in the grid, you shouldn't use asisteSi
as your id, because it won't be unique on the page and causes undefined behavior.
Finally, I solved it like this:
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 on click, so I had to get the current Id