jqGrid custom edittype (radio button column) custom element not firing set event on edit

Question

I have a jqGrid which needs to have radio buttons in a column of a row while editing. Following is my code:

function BindPreclosingDocs(response) {
    var previouslyselectedRow;
    var preclosingtable = $('#preclosing');
    preclosingtable.jqGrid({
        datatype: 'jsonstring',
        datastr: JSON.stringify(response.ServiceModel),
        colNames: ['', 'Documents Received', 'Comments', 'SubDocument', 'NA'],
        colModel: [
        { name: 'Documents', index: 'Documents', align: 'left', sortable: false, editable: false, width: 240 },
        { name: 'DocsReceived', index: 'DocsReceived', align: 'center', sortable: false, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" }, formatter: "checkbox", width: 140 },
        { name: 'Comments', index: 'Comments', align: 'center', sortable: false, editable: true, edittype: "textarea", editoptions: { rows: "3", cols: "16" }, width: 180 },
        { name: 'SubDocument', index: 'SubDocument', editable: false, width: 1 },
        { name: 'NA', index: 'NA', editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue} }
        ],
        rowNum: response.ServiceModel.PreClosing.length,
        pager: '#preclosingpagerdiv',
        viewrecords: true,
        sortorder: "asc",
        sortname: 'Documents',
        jsonReader: {
            root: "PreClosing",
            repeatitems: false,
            id: 'ConfigId'
        },
        shrinkToFit: false,
        height: 'auto',
        grouping: true,
        groupingView: {
            groupField: ['SubDocument'],
            groupColumnShow: [false],
            plusicon: 'ui-icon-circle-triangle-s',
            minusicon: 'ui-icon-circle-triangle-n'
        },
        loadComplete: function () {
            HideGroupHeaders(this);                
        },
        onSelectRow: function (id) {
            preclosingtable.jqGrid('saveRow', previouslyselectedRow, false, 'clientArray');
            previouslyselectedRow = SetJQGridRowEdit(id, previouslyselectedRow, preclosingtable);
        }
    });
    preclosingtable.setGridWidth('710');
};


//RowSelect 
function SetJQGridRowEdit(id, previousid, grid) {
    if (id && id !== previousid) {
        grid.jqGrid('restoreRow', previousid);
        grid.jqGrid('editRow', id, true);
        previousid = id;
        return previousid;
    }
};

//Build radio button
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);
        }
    }
};

my formatter and unformatter code is as follows

dynamicText: function (cellvalue, options, rowObject) {
        if (cellvalue == 'R') {
            return 'Received';
        }
        else if (cellvalue == 'N') {
            return 'NA';
        }
        else {
            return '';
        }
    }

$.extend($.fn.fmatter.dynamicText, {
    unformat: function (cellValue, options, elem) {
        debugger;
        var text = $(elem).text();
        return text === '&nbsp;' ? '' : text;
    }
});

Issue I am having is, when I select a row and check an edit button it doesn't fire set in radiovalue function. It fires get in radiovalue function while creating radio button when a row is selected. Any help so that I can set a value to the radio button?!

Thanks

score 3 · Accepted Answer · edited May 23 '17 at 12:04

3

I think that you are right. There are difference in usage of custom_value callback in different editing modes.

If form editing is used and some editable column has edittype: 'custom' then first custom_element function (in your case it's radioelem function) will be called inside of $.jgrid.createEl. Then custom_value will be called additionally in case of rowid !== "_empty" (not for Add form). See the lines of code for details.

The problem is that custom_element has value parameter. So it can set the value in the custom control and call custom_element and additional calling of custom_value with "set" is not really required.

Another editing modes (inline editing and cell editing) just create custom control. The callback custom_value will be never called with "set" parameter.

I confirm that the documentation about custom control is too short. I suppose that you can just remove the part of your code radiovalue for part 'set'. I think that the following code will good work too (even in case of form editing):

function radiovalue(elem, operation, value) {
    if (operation === 'get') {
        return $(elem).val();
    }
}

One remark: If you will try usage of custom controls you should don't forget to use recreateForm: true option. As an example of usage custom control in inline editing, form editing and searching you will find here. The reference to the demo you will find in the answer.

edited May 23 '17 at 12:04

Community

1
1

answered Mar 29 '13 at 00:29

Oleg

220,925
34
403
798

Thanks Oleg for reply. I am not using form edititng here. I am editing a row inline on select row. Issue that I am having is, once I select a row, I get the radio button group. Now I select second radio button with value 'N'. When select other row, as I do a save to clientArray, I expect the previously edited row's column to update NA columns value to NA. But it updates it as 'Received'. It updates it to 'Received' even when I don't select any option from radio buttons. – fcmaine Mar 29 '13 at 13:55
@SrinivasPotluri: You are welcome! Your question was "why custom element not firing set event on edit". I answered you that it's fired only in form editing. What you ask in your last comment it's *new question*. I suppose that you have some problems because you call `restoreRow` instead of `saveRow` or just because you use radio button in editing mode instead of usage custom formatter. To understand the problem you should post new question **with test data** and where you describe detailed the test case, expected results and the results of the demo. – Oleg Mar 29 '13 at 14:30
I've also added code example on jsfiddle at [link](http://jsfiddle.net/srinivaspotluri/xx7Jg/3/) – fcmaine Mar 29 '13 at 14:31
@SrinivasPotluri: Your demo has many problems. You should the implementation of custom editing controls and probably the custom formatter too. It's really better if you open **new question** because all the problem has nothing common with your original question about calling `custom_value` with `"set"` parameter. The main idea of the changes which you need to do you can see [here](http://jsfiddle.net/xx7Jg/8/). Comments will be **not used by searching engine**. So to help people with the same problems you should open new question. – Oleg Mar 29 '13 at 15:41
Thanks again. Adding and 'saveRow' instead of 'restoreRow' from your demo worked perfectly for me. I get data from a service and not local and As I went on to implement jqGrid on jsFiddle, I made few mistakes as I was looking at what I have and recreating it with data: local. I mark this as answer as it is appropriate for the question I asked at that time. I'll open a new question and point here and your demo as an answer. – fcmaine Mar 29 '13 at 19:36
@SrinivasPotluri: You are welcome! The reason of dividing different problems in separate questions is the goal to help other people with the same problem. Searching engine can't good index cumulative questions. But the most important that your problem is solved now. Congratulation! – Oleg Mar 29 '13 at 20:20

jqGrid custom edittype (radio button column) custom element not firing set event on edit

1 Answers1

Linked