JQGrid Radio Button select one row
I have a JqGrid with a RadioButton for each row like this.
...
{ name: 'select', label: 'select', width: 50, formatter:radio}
and function for radio format:
function radio(value, options, rowObject){
var radioHtml = '<input type="radio" value=' + value + ' name="radioid" />';
return radioHtml;
}
when i try to select a singler from jqgrid i.ee., the radio button that is only selectable with this function:
$(function () {
$("#<%=editButton.ClientID%>").click(function () {
var ids = $("#table").jqGrid('getCol', 'select', true);
alert(ids)
for (var i = 0; i < ids.length; i++) {
//alert(ids[i].id)
if (ids[i].id != '') {
var idx = $("#table").jqGrid('getCell', ids[i].id, 'select');
}
// alert(idx);
}
});
});
Gets all the rows available in the grid, not one selected row.
This same function works well if flutter is a checkbox, but not for radio. Is there something missing?
UPDATE:
colModel: [
{ name: 'select', label: 'select', width: 50,
formatter: function radio(cellValue, option) {
return '<input type="radio" name="radio_' + option.gid + '" />';
}
},
{ name: 'code', label: 'Branch Code', width: 250 },
{ name: 'name', label: 'Branch Name', width: 250 },
{ name: 'status', label: 'Group Status', width: 250 },
],
Function Click Handler:
$("#<%=editButton.ClientID%>").click(function () {
alert('M');
var $selRadio = $('input[name=radio_' + $table[0].id + ']:checked'), $tr;
alert('I');
if ($selRadio.length > 0) {
$tr = $selRadio.closest('tr');
if ($tr.length > 0) {
alert("The id of selected radio button is " + $tr.attr('id'));
}
} else {
alert("The radio button is not selected");
}
});
source to share
It seems to me that your current code is $("#<%=editButton.ClientID%>").click
too complex. You can do what you need in an easier way.
First of all, I recommend using a name
button attribute <radio>
that depends on the grid id (see answer ), It could be like
formatter: function (cellValue, option) {
return '<input type="radio" name="radio_' + option.gid + '" />';
}
You can get the id of the selected radio button with the following code
$("#<%=editButton.ClientID%>").button().click(function () {
var $selRadio = $('input[name=radio_' + $grid[0].id + ']:checked'), $tr;
if ($selRadio.length > 0) {
$tr = $selRadio.closest('tr');
if ($tr.length > 0) {
alert("The id of selected radio button is " + $tr.attr('id'));
}
} else {
alert("The radio button is not selected");
}
});
See demos that demonstrate this:
source to share
I wanted a simpler solution, so I came up with this way that uses the built-in multi selector rather than adding another col to the grid.
var gridSelector = $("#myGrid");
multiselect : true,
beforeSelectRow: function(rowid, e)
{
$(gridSelector).jqGrid('resetSelection');
return (true);
},
beforeRequest : function() {
$('input[id=cb_myGrid]', 'div[id=jqgh_myGrid_cb]').remove();
},
loadComplete : function () {
$('input[id^="jqg_myGrid_"]').attr("type", "radio");
},
source to share