Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.3k views
in Technique[技术] by (71.8m points)

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

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...