adamjford adamjford - 1 month ago 13x
Javascript Question

jqGrid: one radio button per row

I'm trying to setup a column in a jqGrid that has one radio button per row in it, to allow the user to set a single row as the "primary" child of the parent. The following code, however, merely renders empty cells.

I imagine the cells are not being put into 'edit mode' or whatever, which is confusing to me because there's an editable checkbox column on the same grid which just works as desired.

(There's a navButton at the bottom of the grid that saves the state of the grid if that's relevant.)

var createRadioButton = function(value) {
return $("<input type='radio' />", {
name: mySubGridID,
checked: value

var extractFromRadioButton = function(elem) {
return $(elem).val();

url: '/GetData',
datatype: 'json',
colModel: [
{ label: 'Selected', name: 'selected', index: 'selected', editable: true, edittype: 'custom', editoptions:
custom_element: createRadioButton,
custom_value: extractFromRadioButton

Thanks for any help!


You try to use edittype: 'custom'. This work only in a edit mode (inline editing or form editing). If I correct understand your question you try to add radio button which are displayed in all rows in the corresponding column. So you should use better custom formatter (see here an example). You can bind click event in the loadComplete (see here an example).

I am not sure that I understand why you need to use radio button. If you want use radio buttons only for row selection probably you should consider to use multiselect:true instead. Some small behavior of selection you can change inside of onSelectRow or beforeSelectRow event handler if needed.