javascript - radio button column mutually exclusive within all grid rows for this radio column using JqGrid?

Question

How to create a grid with one special column of radio buttons in such a way if user click on this column of a particular row then only this radio button gets selected like if there is a radio group spread across this column of grid vertically ??

I am looking for this solution in JqGrid (jquery) specifically .

Thanks.

Answer 1

If I understand you correct you can just use custom formatter. If all the buttons which you included has the same name attribute you will have the behavior which you need

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

After creating the column with radio buttons you will receive many other questions how to synchronize other functionality of jqGrid with the radio buttons. In the following example I show you how you can check the radio button on selecting the row:

beforeSelectRow: function (rowid, e) {
    var radio = $(e.target).closest('tr').find('input[type="radio"]');
    radio.attr('checked', 'checked');
    return true; // allow row selection
}

See the demo here.