jqGrid custom radiobutton

by srinivaspotluri

HTML

<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<table id="preclosing">
</table>
<div id="preclosingpagerdiv"></div>
<input type="button" id="updatebtn" value="Update">
    <div id="preclosingsuccess" class="successmsgdiv">
        Successfully updated.
    </div>

CSS

.successmsgdiv
{
	color:Green;
	display:none;
	font-size:small;
}

JavaScript

var data={"DOCS":[{"ConfigId":1,"Documents":"A", "DocsReceived":true, "Comments":"", "NA":""}, {"ConfigId":2, "Documents":"B", "DocsReceived":true, "Comments":"", "NA":"N"}, {"ConfigId":3, "Documents":"C", "DocsReceived":true, "Comments":"", "NA":"R"}]}

var previouslyselectedRow;
        $.extend($.fn.fmatter, {
    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;
        }
    });

        var preclosingtable = $('#preclosing');
        preclosingtable.jqGrid({
            datatype: 'local',
            data: data.DOCS,
            colNames: ['', 'Documents Received', 'Comments', 'NA'],
            colModel: [
            { name: 'Documents', index: 'Documents', align: 'left', sortable: false, editable: false, width: 20 },
            { 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: 'NA', index: 'NA', editable: true, formatter: 'dynamicText', width: 150, edittype: 'custom', editoptions: { custom_element: radioelem, custom_value: radiovalue} }
            ],
            rowNum: data.DOCS.length,
            //rowList: [10, 20, 30],
            pager: '#preclosingpagerdiv',
            viewrecords: true,
            sortorder: "asc",
            sortname: 'Documents',
          ...