jqGrid: one radio button per row

Question

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
    }).get();
}

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

$("#grid").jqGrid({
    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!

score 2 · Accepted Answer · edited May 23 '17 at 10:27

2

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.

edited May 23 '17 at 10:27

Community

1
1

answered Jan 07 '11 at 00:19

Oleg

220,925
34
403
798

Looks like a custom formatter is the way to go. I'll give it a shot. I can't use multiselect as having more than one row "selected" is invalid. Selecting isn't the kind of UI metaphor I want to use for this anyway, as it's not really selecting the row, per se, but the user setting one of the rows (which is the many part of a one-to-many relationship) as the "primary" child of the parent, so I want to make that more explicit with a radio button. – adamjford Jan 07 '11 at 15:20
1

@adamjford: In another question http://stackoverflow.com/questions/4625152/possible-jquery-jqgrid-problem-in-ie8 one uses also custom formatter. If I understand you correct it is very close to what you want. See demo: http://www.ok-soft-gmbh.com/jqGrid/AtticusRel.htm. – Oleg Jan 07 '11 at 15:25
Oh, sweet, that'll be useful. Thanks! – adamjford Jan 07 '11 at 15:27

score 0 · Answer 2 · answered Dec 06 '12 at 21:50

I had this same problem with the formatter and had to set a width on the radio button as it was getting set wider than the cell for some reason.

function radioButtonFormatter(cellValue, options, rowObject) {
    var radioHtml = '<input style="width:25px" type="radio" value=' + cellValue + ' name="radioid"></input>';
    return radioHtml;
}

score 0 · Answer 3 · answered Sep 21 '16 at 20:29

I needed a simpler solution so I came up with this method which uses the built-in multiselect rather than adding a col to the grid.

...

var gridSelector = $("#myGrid");
//jqGrid code snippet, methods below:
multiselect : true, //Must be true to allow for radio button selection
beforeSelectRow: function(rowid, e)
{
    // Allow only one selection
    $(gridSelector).jqGrid('resetSelection');
    return (true);
},
beforeRequest : function() {
    //Remove multi-select check box from grid header
    $('input[id=cb_myGrid]', 'div[id=jqgh_myGrid_cb]').remove();
},
loadComplete : function () {
    //Convert grid check boxes to radio buttons
    $('input[id^="jqg_myGrid_"]').attr("type", "radio");
},

...

Cheers,

jqGrid: one radio button per row

3 Answers3