Using jQuery UI Spinner in jqGrid
Hi I am using jQuery UI Spinner in jqGrid for NofQ column. I can see the spinner in the add / edit edit form but the problem is with the edit form. When I submit to create a new post in the edit form, the current value in the Spinner does not go backwards. if I remove the spinner and replace the default textbox, then I can see the entered value at the back end of the code when submitting. please rate the jqGrid script below
var js = document.createElement("script");
js.type = "text/javascript";
var lastSel = -1;
var grid = jQuery("#list");
var defaultvalue = {
'0': 'Select'
};
editSettings = {
recreateForm: true,
jqModal: false,
reloadAfterSubmit: false,
closeOnEscape: true,
savekey: [true, 13],
closeAfterEdit: true
},
addSettings = {
editData: { TestID: testId },
recreateForm: true,
jqModal: false,
reloadAfterSubmit: true,
savekey: [true, 13],
closeOnEscape: true,
closeAfterAdd: true,
width: 700,
url: paramFromView.AddUrl,
beforeShowForm: function (form) {
$("#tr_NoOfQ", form).show();
$("#NoOfQ.FormElement", form).width(35);
$("#NoOfQ.FormElement", form).height(10);
$("#NoOfQ.FormElement", form).spinner('option', 'min', 1);
$("#NoOfQ.FormElement", form).spinner('option', 'max', 15);*/
}
},
delSettings = {
jqModal: false,
url: paramFromView.AddUrl,
delData: {
ID: function () {
var sel_id = grid.jqGrid('getGridParam', 'selrow');
var value = grid.jqGrid('getCell', sel_id, 'ID');
return value;
},
TestID: testId
}
},
jQuery("#list").jqGrid({
url: paramFromView.Url + '/' + testId,
datatype: "json",
jsonReader: { repeatitems: false, root: "rows", page: "page", total: "total", records: "records" },
colNames: ['DetailDataID', 'Category', 'SubCategory', 'ID', 'NoOfQ'],
colModel: [
{ name: 'DetailDataID', index: 'id', hidden: true, width: 5 },
{ name: 'Category', width: 80, editable: true, edittype: 'select', editoptions: { value: defaultvalue } },
{ name: 'ID', hidden: true, width: 100 },
{
name: 'NoOfQ', index: 'NoOfQ', width: 15, editable: true, summaryType: 'sum'
}
],
rowNum: 20,
rowList: [10, 20, 30],
height: 300,
width: 700,
pager: '#pager',
loadonce: false,
viewrecords: true
}).jqGrid('navGrid', '#pager', { edit: false }, editSettings, addSettings, delSettings);
source to share
The problem is in the jqGrid line of code
$(frmtb+" > tbody > tr > td > .FormElement").each(function() { ... }
which uses the element td > .FormElement
in the selector. The problem is that spinner
wraps the original element <input>
inside an element <span>
and td > .FormElement
does not find that element.
To solve the problem without changing the jqGrid code, you can use edittype: "custom" . You can remove all calls spinner
from beforeShowForm
and use the following column definition instead NoOfQ
:
{
name: "NoOfQ",
width: 15,
editable: true,
edittype: "custom",
editoptions: {
custom_element: function (value, options) {
return '<input type="text" value="' + value + '"/>';
},
custom_value: function (elem, operation, value) {
if (operation === "get") {
return $(elem).val();
} else if (operation === "set") {
$(elem).val(value);
} else {
return "";
}
},
dataInit: function (elem) {
$(elem).find(">input").spinner({
min: 1,
max: 15
});
}
}
}
He should fix this problem. The demo results are shown below:
$(function () {
"use strict";
var mydata = [
{ myid: "10", invdate: "2007-10-01", name: "test1", note: "note1", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ myid: "20", invdate: "2007-10-02", name: "test1", note: "note2", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ myid: "30", invdate: "2007-09-01", name: "test3", note: "note3", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ myid: "40", invdate: "2007-10-04", name: "test2", note: "note4", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ myid: "50", invdate: "2007-10-31", name: "test2", note: "note5", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ myid: "60", invdate: "2007-09-06", name: "test3", note: "note6", amount: "400.00", tax: "30.00", closed: false, ship_via: "FE", total: "430.00" },
{ myid: "70", invdate: "2007-10-04", name: "test3", note: "note7", amount: "200.00", tax: "10.00", closed: true, ship_via: "TN", total: "210.00" },
{ myid: "80", invdate: "2007-10-03", name: "test1", note: "note8", amount: "300.00", tax: "20.00", closed: false, ship_via: "FE", total: "320.00" },
{ myid: "90", invdate: "2007-09-01", name: "test3", note: "note9", amount: "400.00", tax: "30.00", closed: false, ship_via: "TN", total: "430.00" },
{ myid: "100", invdate: "2007-09-08", name: "test2", note: "note10", amount: "500.00", tax: "30.00", closed: true, ship_via: "TN", total: "530.00" },
{ myid: "110", invdate: "2007-09-08", name: "test2", note: "note11", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" },
{ myid: "120", invdate: "2007-09-10", name: "test3", note: "note12", amount: "500.00", tax: "30.00", closed: false, ship_via: "FE", total: "530.00" }
],
$grid = $("#list"),
initDateEdit = function (elem) {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
},
initDateSearch = function (elem) {
var $self = $(this);
setTimeout(function () {
$(elem).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showWeek: true,
showButtonPanel: true,
onSelect: function () {
if (this.id.substr(0, 3) === "gs_") {
// call triggerToolbar only in case of searching toolbar
setTimeout(function () {
$self[0].triggerToolbar();
}, 100);
}
}
});
}, 100);
},
numberTemplate = {formatter: "number", align: "right", sorttype: "number",
editrules: {number: true},
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge", "nu", "nn", "in", "ni"] }};
$grid.jqGrid({
datatype: "local",
data: mydata,
colNames: ["Client", "Date", "Closed", "Shipped via", "Notes", "Tax", "Amount", "Total"],
colModel: [
{ name: "name", align: "center", editable: true, width: 65, editrules: {required: true} },
{ name: "invdate", width: 80, align: "center", sorttype: "date",
formatter: "date", formatoptions: { newformat: "d-M-Y" }, editable: true, datefmt: "d-M-Y",
editoptions: { dataInit: initDateEdit },
searchoptions: { sopt: ["eq", "ne", "lt", "le", "gt", "ge"], dataInit: initDateSearch } },
{ name: "closed", width: 70, align: "center", editable: true, formatter: "checkbox",
edittype: "checkbox", editoptions: {value: "Yes:No", defaultValue: "Yes"},
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;true:Yes;false:No" } },
{ name: "ship_via", width: 105, align: "center", editable: true, formatter: "select",
edittype: "select", editoptions: { value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN" },
stype: "select", searchoptions: { sopt: ["eq", "ne"], value: ":Any;FE:FedEx;TN:TNT;IN:IN" } },
{ name: "note", width: 60, sortable: false, editable: true, edittype: "textarea" },
{ name: "tax", width: 52, editable: true, template: numberTemplate, hidden: true },
{ name: "amount", width: 75, editable: true, template: numberTemplate,
edittype: "custom",
editoptions: {
custom_element: function (value, options) {
return '<input type="text" value="' + value + '"/>';
},
custom_value: function (elem, operation, value) {
if (operation === "get") {
return $(elem).val();
} else if (operation === "set") {
$(elem).val(value);
} else {
return "";
}
},
dataInit: function (elem) {
$(elem).find(">input").spinner({
min: 1,
max: 15
});
}
}},
{ name: "total", width: 60, template: numberTemplate }
],
rowNum: 10,
localReader: { id: "myid" },
rowList: [5, 10, 20],
pager: "#pager",
toppager: true,
gridview: true,
autoencode: true,
ignoreCase: true,
sortname: "name",
viewrecords: true,
sortorder: "desc",
rownumbers: true,
shrinkToFit: false,
height: "auto"
});
// set your defaults for Advanced Searching or filterToolbar
$.extend($.jgrid.search, {
multipleSearch: true,
multipleGroup: true,
recreateFilter: true,
closeOnEscape: true,
closeAfterSearch: true,
closeAfterReset: true,
searchOnEnter: true,
showQuery: true,
overlay: 0,
stringResult: true,
defaultSearch: 'cn'
});
$grid.jqGrid("navGrid", "#pager", {add: false, edit: true, del: false, search: false, refresh: false, view: true, cloneToTop: true});
$grid.jqGrid("editGridRow", "120", {
beforeSubmit: function (postdata) {
alert("postdata=" + JSON.stringify(postdata));
}
}); // edit some row
});
<link href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css" rel="stylesheet"/>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css" rel="stylesheet"/>
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/js/jquery.jqGrid.min.js"></script>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
Alternatively, you can change the above selector frmtb+" > tbody > tr > td > .FormElement"
in the jqGrid code to frmtb + ">tbody>tr>td .FormElement"
.
One final note: you must correct any syntax errors in your code: remove */
, include var
before editSettings
, replace ,
at the end of initialization delSettings
(just before jQuery("#list").jqGrid({...});
) before ;
, etc. You should consider adding key: true
to the definition ID
(which tells you to use the property value ID
as the rowid) or just remove the unneeded hidden column 'ID'
(don't forget to remove the corresponding item from colName
) and use jsonReader: { repeatitems: false, id: "ID" }
.
UPDATED . I have described the problem with my suggestion in the bug report . The main jqGrid code is now captured by Tony (see here ). Therefore, the next version of jqGrid (version higher than 4.6.0) should not describe the described problem.
source to share