jqGrid custom element radio button column not returning selected value after edit on saveRow

Question

I have a jqGrid which gets json data from a service. I have to add radio buttons to a column when in edit mode. This has to be inline edit. I need to update records in batch. I have created a custom element and custom value to show radio buttons on selectRow in jqGrid. The issue I have is that I can't get the value of the selected radio button.Instead it always returns the value of first radio button. Code can be found link

Following is code that creates custom element

function radioelem(value, options) {
    var receivedradio = '<input type="radio" name="receivednaradio" value="R"';
    var breakline = '/>Received<br>';
    var naradio = '<input type="radio" name="receivednaradio" value="N"';
    var endnaradio = '/>NA<br>';
    if (value == 'Received') {
        var radiohtml = receivedradio + ' checked="checked"' + breakline + naradio + endnaradio;
        return radiohtml;
    }
    else if (value == 'NA') {
        var radiohtml = receivedradio + breakline + naradio + ' checked="checked"' + endnaradio;
        return radiohtml;
    }
    else {
        return receivedradio + breakline + naradio + endnaradio;
    }
};

function radiovalue(elem, operation, value) {
    if (operation === 'get') {
        return $(elem).val();
    } else if (operation === 'set') {
        if ($(elem).is(':checked') === false) {
            $(elem).filter('[value=' + value + ']').attr('checked', true);
        }
    }
};

Answer 1

The main problem in you code is that your implementation of custom_element (the function radioelem) returns HTML fragment which is not one element. radioelem returns

<input type="radio" ... value="R"/><input type="radio" ... value="R"/>

as string. It consists from two input elements. So custom control failed in the case. You will be able to understand the problem if you examine the code how jqGrid use it. Look at the lines of jqGrid code which I rewrite in simplified form as following

var celm = options.custom_element.call($t,vl,options);
if(celm) {
    celm = $(celm).addClass("customelement").attr({id:options.id,name:options.name});
    $(elem).empty().append(celm);
}

jqGrid uses $(celm) where celm is the string returned from the custom_element function. In your case $(celm) will be jQuery wrapper of two <input> elements. I mean that $(celm) === 2. So instead of setting class "customelement" on one custom element the code $(celm).addClass("customelement") will add class "customelement" to both <input> elements. The next call (call of attr) set the same id on both <input> elements. How you know ids maust be unique, but the code do produces id duplicates.

To be exactly your implementation of custom_element (the function radioelem) returns even more complex HTML fragment

<input type="radio" ... value="R"/><br/><input type="radio" ... value="R"/><br/>

If you examine the code which produce jqGrid at the end from the HTML fragment you will see very funny and very wrong HTML fragment like below

<input name="NA" class="customelement" id="2_NA" type="radio" value="R">
Received
<br class="customelement" id="2_NA" name="NA">
<input name="NA" class="customelement" id="2_NA" type="radio" value="N">
NA
<br class="customelement" id="2_NA" name="NA">

Probably you didn't seen ever before so strange <br/> elements. You can see that the code fragment contains 4 elements with the same id="2_NA". After that you should be not wonder that the custom control works not as expected.

To fix the problem you need just place the code which you returned before inside of <span>...</span> or inside of <div>...</div>:

function radioelem(value, options) {
    var receivedradio = '<input type="radio" name="receivednaradio" value="R"',
        breakline = '/>Received<br>',
        naradio = '<input type="radio" name="receivednaradio" value="N"',
        endnaradio = '/>NA<br>';

    if (value === 'Received') {
        return "<span>" + receivedradio + ' checked="checked"' + breakline + naradio + endnaradio + "</span>";
    }
    if (value === 'NA') {
        return "<span>" + receivedradio + breakline + naradio + ' checked="checked"' + endnaradio + "</span>";
    }
    return "<span>" + receivedradio + breakline + naradio + endnaradio + "</span>";
}