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 === ' ' ? '' : 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
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 firstcustom_element
function (in your case it'sradioelem
function) will be called inside of$.jgrid.createEl
. Thencustom_value
will be called additionally in case ofrowid !== "_empty"
(not for Add form). See the lines of code for details.The problem is that
custom_element
hasvalue
parameter. So it can set the value in the custom control and callcustom_element
and additional calling ofcustom_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):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.