I have a jqGrid, and one column should have a default value when adding a new row. I have followed the documentation, but the value never appears.
This is the column from the colModel:
{name: 'Lt', index: 'Lt', width: 25, editable: true, editoptions: {defaultValue: 'N'}}
And this is how I call addRowData:
$("#grid").addRowData(-1,
{ Datum: $.datepicker.formatDate("yy-mm-dd", new Date()) }, "first", true)
As far as I can see, I’m doing it by the book!
Complete grid def:
$("#dagbok_grid").jqGrid({
datatype: 'json',
mtype: 'GET',
colNames: [
'a',
'b',
'c',
'd',
'e',
'f',
'g',
'h',
'i',
'j',
'k',
'l',
'm',
'n',
'o',
'p',
'q',
'r',
's'],
colModel: [
{ name: 'a', index: 'a', width: 30, formatter: 'checkbox', edittype: 'checkbox', editable: true },
{ name: 'b', index: 'b', width: 30, formatter: 'checkbox', edittype: 'checkbox', editable: true },
{ name: 'c', index: 'c', width: 70, formatter: 'date', editable: true, editrules: { required: true }, editoptions: { dataInit: function (elem) { $(elem).datepicker(); } } },
{ name: 'd', index: 'd', width: 65, editable: true, formatter: 'date', formatoptions: { srcformat: 'H:i:s', newformat: 'ShortTime' }, editrules: { time: true} },
{ name: 'e', index: 'e', width: 80, edittype: 'select', editable: true, formatter: 'select' },
{ name: 'f', index: 'f', width: 100, editable: true, edittype: 'textarea', editoptions: {rows: '7'} },
{ name: 'g', index: 'g', width: 80, editable: true, edittype: 'textarea', editoptions: { rows: '7'} },
{ name: 'h', index: 'h', width: 80, editable: true, editrules: { maxValue: 50} },
{ name: 'i', index: 'i', width: 120, edittype: 'select', editable: true, formatter: 'select' },
{ name: 'j', index: 'j', width: 200, edittype: 'select', editable: true, formatter: 'select' },
{ name: 'k', index: 'k', width: 70, edittype: 'select', editable: true, formatter: 'select' },
{ name: 'l', index: 'l', width: 70, editable: true, editrules: { maxValue: 10} },
{ name: 'm', index: 'm', width: 25, editable: true, editoptions: { defaultValue: 'N'} },
{ name: 'n', index: 'n', width: 70, editable: true, editrules: { integer: true, maxValue: 999999 }, formatter: formatPosition, unformat: unformatPosition },
{ name: 'o', index: 'o', width: 25, editable: true, editrules: { custom: true, custom_func: chkLongitudTecken} },
{ name: 'p', index: 'p', width: 80, editable: true, editrules: { integer: true, maxValue: 999999 }, formatter: formatPosition, unformat: unformatPosition },
{ name: 'q', index: 'q', width: 80, edittype: 'select', editable: true, formatter: 'select' },
{ name: 'r', index: 'r', width: 100, editable: true, editrules: { maxValue: 50} },
{ name: 's', index: 's', width: 65, edittype: 'select', editable: true, formatter: 'select' },
],
sortname: 'c',
sortorder: 'desc',
shrinkToFit: false,
viewrecords: true,
gridview: true,
onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#dagbok_grid').saveRow(lastsel);
lastsel = id;
}
jQuery('#dagbok_grid').editRow(id, true);
},
height: 400,
editurl: '@Url.Action("SaveGridRow")',
caption: 'my grid'
});
I also later on add select-values to some cols:
$.ajax({
type: 'GET',
url: '@Url.Action("GetGridComboValues")',
async: false,
success: function (data) {
var grid = $("#dagbok_grid");
grid.setColProp("e", { editoptions: { value: data.kallor} });
grid.setColProp("i", { editoptions: { value: data.rubriker} });
grid.setColProp("j", { editoptions: { value: data.verksamheter} });
grid.setColProp("k", { editoptions: { value: data.opPadrag, dataEvents: [{ type: 'change', fn: function (e) {
$.ajax({
type: "GET",
url: '@Url.Action("GetVerksamhetskod")',
data: { "opPadragId": e.currentTarget.value },
dataType: 'json',
success: function (data) {
var selr = jQuery('#dagbok_grid').jqGrid('getGridParam', 'selrow');
jQuery("#dagbok_grid").jqGrid('setCell', selr, "l", data);
}
});
}
}]
}
});
grid.setColProp("q", { editoptions: { value: data.medier} });
grid.setColProp("s", { editoptions: { value: data.regioner} });
}
});
Add and delete code
$("#toolbarAddButton")
.button()
.click(function () {
$("#dagbok_grid").addRowData(-1, { Datum: $.datepicker.formatDate("yy-mm-dd", new Date()) }, "first", true)
});
$("#toolbarDeleteButton").click(function () {
var radid = $("#dagbok_grid").jqGrid("getGridParam", "selrow");
if (radid != null) {
var su = $("#dagbok_grid").jqGrid("delRowData", radid);
$("#dagbok_grid").jqGrid("delGridRow", radid, { url: '@Url.Action("DeleteGridRow")', reloadaftersubmit: false });
}
})
Save executes when the user press entering while in edit mode.
First of all you defined
editoptions: { defaultValue: 'N'}. You can read in the documentation of the editoptionsWhat you want is that default value will be set during filling the grid body and not during editing. For the purpose exist
defaulValueformatter option, but it will be used only for some predefined formatters (see the documentation).You can solve the problem either by usage of custom formatter or, if you use
addRowDatamethod directly, by adding explicit the value ofLtcolumn.I don’t recommend to use low-level method
addRowDatawhich is slow and will be mostly used in wrong way. You used for example-1as the rowid. If you would execute the same statement more as one time you will have id duplicates which is error and can follow to very strange effects. If you want that jqGrid generate the unique ids itself you should useundefinedas the rowid parameter.