jqGrid Radio Button select single row

Question

I have JqGrid with RadioButton per each row like this.

  ...
 { name: 'select', label: 'select', width: 50, formatter:radio}

and function for radio formatter:

function radio(value, options, rowObject){
   var radioHtml = '<input type="radio" value=' + value + ' name="radioid" />';
   return radioHtml;
}

when I try to select a singlerow from the jqgrid i.ee., radio button which is only selected using 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);
       }
   });
 });

Am getting all the rows available in the grid rather than single selected row.

The same function works well if formatter is 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");
            }
        });

Answer 1

It seems to me that your current code from $("#<%=editButton.ClientID%>").click is too complex. You can do what you need in more simple way.

First of all I recommend you to use the name attribute of the <radio> button which is depend on the id of the grid (see the answer). It could be like the following

formatter: function (cellValue, option) {
    return '<input type="radio" name="radio_' + option.gid + '"  />';
}

You can get the id of 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 the demo which demonstrate this: