Related
Using latest version of free jqgrid.
I am using the below code for my jqgrid.
I have some issues and question:
1) When I go to next page and previous page not sure what happens but my grid items keep moving up and down.
2) When I add/edit an item for form field I want the grid to refresh and get updated from the server but this does not happens and again my newly added data is lost in the grid as mentioned in my point1. I tried to add navOptions: { reloadGridOptions: { fromServer: true } } but still nothing.
3) When the user clicks on edit button on my pager it opens the user form field. I want the submit button to show edit instead of "Add" which it shows currently.
Here is my code below:
<script type="text/javascript">
$(function () {
"use strict";
var $grid = $("#list");
$grid.jqGrid({
url: '#Url.Action("GetData", "Home")',
datatype: "json",
mtype: 'Get',
colNames: ['Id', 'Name', 'Sex', 'Address'],
loadonce: true,
height: '100%',
autowidth: true,
emptyrecords: "No Users found.",
colModel: [
{ name: 'empid', index: 'empid', editable: true, editrules: { required: true}},
{ name: 'fname', index: 'fname', editable: true, editrules: { required: true}}, //currently these are texbox, but I want this to be label which gets filled based on the empid
{ name: 'lname', index: 'lname', editable: true, editrules: { required: true}},
{ name: 'address', index: 'address', editable: true, editrules: { required: true}}
],
cmTemplate: { autoResizable: true, editable: true },
autoResizing: { compact: true, resetWidthOrg: true },
iconSet: "fontAwesome",
guiStyle: "bootstrap",
rowNum: 10,
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
autoencode: true,
sortable: true,
pager: true,
rownumbers: true,
sortname: "empid",
sortorder: "desc",
pagerRightWidth: 150,
inlineEditing: {
keys: true
},
searching: {
loadFilterDefaults: false,
closeOnEscape: true,
searchOperators: true,
searchOnEnter: true,
caption: "Search",
Find: "Search"
},
editurl:'#Url.Action("GetDetails", "Home")',
formEditing: {
reloadGridOptions: { fromServer: true },
reloadAfterSubmit: true,
width: 460,
closeOnEscape: true,
closeAfterEdit: true,
closeAfterAdd: true,
closeAfterDelete: true,
savekey: [true, 13],
addCaption: "Add",
editCaption: "Edit",
bSubmit: "Add"
},
formDeleting: {
width: 320,
caption: 'Delete'
},
navOptions: { reloadGridOptions: { fromServer: true } }
}).jqGrid("navGrid")
.editGridRow("new", properties);
});
</script>
The first two items above I was able to resolve using below code:
navOptions: { reloadGridOptions: { fromServer: true } }
But the 3rd item I am still not able to resolve where I am not able to change the text of the Add button to change it to edit when the edit toolbar button is clicked
I am using free version (latest) of jqgrid with MVC c#.
I have form fields setup. When the user clicks add in the footer button (add) it shows a modal popup with all the form fields.
I want my first textbox in the form field to autocomplete, ie when they start typing their empployee number in the textbox, I should query my mvc controller and fetch the data and then prefill if there is a match. Once that prefills I also want to update 2 more label on the form, firstname & lastname. Also the button should be disabled until the correct id is fetched in the employee textbox.
Not sure how should I go about this. I can share my sample grid that I have used.
Thanks
<script type="text/javascript">
$(function () {
"use strict";
var $grid = $("#list");
$grid.jqGrid({
url: '#Url.Action("GetData", "Home")',
datatype: "json",
mtype: 'Get',
colNames: ['Id', 'Name', 'Sex', 'Address'],
loadonce: true,
height: '100%',
autowidth: true,
colModel: [
{ name: 'empid', index: 'empid', editable: true, editrules: { required: true}},
{ name: 'fname', index: 'fname', editable: true, editrules: { required: true}}, //currently these are texbox, but I want this to be label which gets filled based on the empid
{ name: 'lname', index: 'lname', editable: true, editrules: { required: true}},
{ name: 'address', index: 'address', editable: true, editrules: { required: true}}
],
cmTemplate: { autoResizable: true, editable: true },
autoResizing: { compact: true, resetWidthOrg: true },
iconSet: "fontAwesome",
rowNum: 10,
rowList: [5, 10, 20, "10000:All"],
viewrecords: true,
autoencode: true,
sortable: true,
pager: true,
rownumbers: true,
sortname: "uid",
sortorder: "desc",
pagerRightWidth: 150,
inlineEditing: {
keys: true
},
formEditing: {
reloadGridOptions: { fromServer: true },
reloadAfterSubmit: true,
width: 310,
closeOnEscape: true,
closeAfterEdit: true,
closeAfterAdd: true,
closeAfterDelete: true,
savekey: [true, 13]
}
caption: "MyData"
}).jqGrid("navGrid")
.editGridRow("new", properties);
});
Updated:
If there is also option to use onkeyup, mouseover etc on the textbox so that I can validate whats entered in the textbox and then also update other textbox based on this value
I have done this by using keyup event instead of using autocomplete.
Relevant code as below:
colModel: [
{
name: 'empid', index: 'empid', editable: true, , editrules: { required: true },
editoptions:
{
dataEvents: [
{
type: 'keyup',
fn: function (e) {
$.ajax({
url: //call to my method in my mvc controller,
data: "empid=" + $(this).val(),
type: "GET",
success: function (data) {
//validate and populate other fields here
}
else {
}
},
error: function (passParams) {
// code here
}
});
}
}
]
}
]
I am new to jqGrid. I am working on creating a grid with edit functionality to each row. I was able to successfully create the grid and edit the rows. But i found that when there i space in my name column(editable column) in the grid. the edit doesn't work. The row remains disabled if i click on pencil icon.
For Example: the edit works if name is like 'test' but fails when name is 'test run'.
$(this.tableElement).jqGrid('GridUnload');
$(this.tableElement).jqGrid({
url: url1,
editurl: urledit,
mtype: 'POST',
datatype: 'json',
postData: {
id: ID
},
colNames: [
' Name',
' ID',
'QuoID',
''
],
colModel: [
{ name: 'Name', id: 'Name', width: 50, sorttype: 'text', sortable: true, editable: true },
{ name: 'ID', id: 'ID', hidden: true, editable: true },
{ name: 'QuoID', id: 'QuoID', hidden: true, editable: true },
{
name: 'Actions', index: 'Actions', width: 30, height: 120, formatter: 'actions',
formatoptions: {
keys: true,
onEdit: function (rowid)
{ alert(rowid); }
}
},
],
rowNum: 25,
rowList: [25, 50, 100],
sortname: 'PackageID',
sortorder: "desc",
firstsortorder: 'desc',
loadonce: !GetFeatureToggle("MultiplePackages"),
sortable: true,
viewrecords: true,
caption: "Packages",
width: 450,
height: 200,
hidegrid: false,
loadComplete: function (data) {
if (_this.firstLoad == true) {
setTimeout(function () { $(_this.elements.list).jqGrid('setGridParam', { page: 1 }).trigger("reloadGrid"); }, 1);
_this.firstLoad = false;
}
}
I have a jqGrid.
my function is --
$("#grid").jqGrid({
url: "/Log/GetLogs",
datatype: 'json',
mtype: 'Get',
colNames: ['LogID', 'Agency Billing Code', 'License Number', 'Equipement Number', 'Year', 'Make', 'Model', 'Color', 'Begin Miles', 'End Miles'],
colModel: [
{ key: true, hidden: true, name: 'ID', index: 'ID' },
{ key: false, name: 'Year', index: 'Year', editable: false },
{ key: false, name: 'Make', index: 'Make', editable: false },
{ key: false, name: 'Model', index: 'Model', editable: false },
{ key: false, name: 'Color', index: 'Color', editable: false },
{ key: false, name: 'Miles', index: 'Miles', editable: true, cellvalue: "" },
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Log List',
emptyrecords: 'No Records',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false
});
When the grid loads, database is returning the value of "Miles" but I don't want to show that. I just want to show 0, and when I edit the miles values it should map to Miles in my object.
Please let me know how can I achieve that?
Thanks..
To accomplish what you need you need to have a formatter and unformatter for the miles column. You have not specified on how you will be editing the grid row(Inline, form Edit, custom...etc) but I created inline edit as an example for you.
Here is a the complete solution in jsfiddle if you want to play with it. for editing just click the row and the miles will show its original value when on edit but show 0 on non edit mode. For more details on how formatting works see Here
var mileformatter= function (cellval, options, rowObject) {
return "<span data-val='"+cellval+"'>0</span>";
}
var mileUnFormat= function (cellvalue, options, cell) {
return $('span', cell).attr('data-val');
}
"use strict";
var mydata = [
{ID:"1", Year: "1933", Make: "Nissan",Model:"Model1", Color: "White",Miles:1222},
{ID:"2", Year: "2008", Make: "Toyota",Model:"Model2" , Color: "Gray",Miles:3000},
];
$("#list").jqGrid({
data: mydata,
datatype: "local",
mtype: 'Get',
colModel: [
{ key: true, hidden: true, name: 'ID', index: 'ID' },
{ key: false, name: 'Year', index: 'Year', editable: false },
{ key: false, name: 'Make', index: 'Make', editable: false },
{ key: false, name: 'Model', index: 'Model', editable: false },
{ key: false, name: 'Color', index: 'Color', editable: false },
{ key: false, formatter:mileformatter,unformat:mileUnFormat, name: 'Miles', index: 'Miles', editable: true, cellvalue: "" },
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Log List',
emptyrecords: 'No Records',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false,
onSelectRow: function (id) {
jQuery('#list').editRow(id, true);
}
});
Here is an edited answer for what you are looking for and a new jsfiddle link to play with Note that I removed the unformatter and also added beforeSaveRow function.
var onEdit=false;
var mileformatter= function (cellval, options, rowObject) {
if(onEdit==true)
{
return cellval;
onEdit=false;
}
return 0;
}
"use strict";
var mydata = [
{ID:"1", Year: "1933", Make: "Nissan",Model:"Model1", Color: "White",Miles:1222},
{ID:"2", Year: "2008", Make: "Toyota",Model:"Model2" , Color: "Gray",Miles:3000},
];
$("#list").jqGrid({
data: mydata,
datatype: "local",
mtype: 'Get',
colModel: [
{ key: true, hidden: true, name: 'ID', index: 'ID' },
{ key: false, name: 'Year', index: 'Year', editable: false },
{ key: false, name: 'Make', index: 'Make', editable: false },
{ key: false, name: 'Model', index: 'Model', editable: false },
{ key: false, name: 'Color', index: 'Color', editable: false },
{ key: false, formatter:mileformatter, name: 'Miles', index: 'Miles', editable: true, cellvalue: "" },
],
pager: jQuery('#pager'),
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
viewrecords: true,
caption: 'Log List',
emptyrecords: 'No Records',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
multiselect: false,
onSelectRow: function (id) {
jQuery('#list').editRow(id,
{
"keys": true,
oneditfunc: function () {
},
"successfunc": function () {
alert('successfunc');
},
"url": null,
"extraparam": {},
"aftersavefunc": function () {
alert('aftersavefunc');
},
"errorfunc": null,
"afterrestorefunc": null,
"restoreAfterError": true,
"beforeSaveRow": function (options, rowid) {
onEdit=true;
jQuery("#list").saveRow(id, false);
return false;
}
});
}
});
You can customize the SaveRow as follows and put the post url of your own.
saveparameters = {
"successfunc" : null,
"url" : "yoururl",
"extraparam" : {},
"aftersavefunc" : null,
"errorfunc": null,
"afterrestorefunc" : null,
"restoreAfterError" : true,
"mtype" : "POST"
}
jQuery("#grid_id").jqGrid('saveRow',rowid, saveparameters);
When i use "loadonce" set to be "true",my problem is searching or filtering works ,but pagination doesn't work.If i change loadonce to be false,searchong can't work,but pagination works.
How do I make sure I set the data type to be json during the pagination alone.
$grid = $("#list"),
numberTemplate = {
formatter: 'number',
align: 'right',
sorttype: 'number',
editrules: {
number: true,
required: true
},
searchoptions: {
sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge', 'nu', 'nn', 'in', 'ni']
}
};
var myDelOptions = {
onclickSubmit: function (rp_ge, rowid) {
// we can use onclickSubmit function as "onclick" on "Delete" button
// alert("The row with rowid="+rowid+" will be deleted");
// delete row
grid.delRowData(rowid);
$("#delmod" + grid[0].id).hide();
if (grid[0].p.lastpage > 1) {
// reload grid to make the row from the next page visable.
// TODO: deleting the last row from the last page which number is higher as 1
grid.trigger("reloadGrid", [{
page: grid[0].p.page
}]);
}
return true;
},
processing: true
};
$.extend($.jgrid.inlineEdit, {
keys: true
});
$grid.jqGrid({
url: $('#contextPath').val() +"/globalcodes/getList?masterCodeSysid="+$('#Sysid').val(),
datatype: 'json',
colNames: ['Sequence', 'Detail Code', 'Code Description', 'Status', 'Cross Referrences', '', ''],
colModel: [ {
name: 'seqNumber',
width: 50,
editable: false,
search:true
}, {
name: 'dtlCode',
width: 50,
editable: true,
searchoptions:{sopt:['cn','eq','ne']}
}, {
name: 'codeDesc',
width: 200 ,
searchoptions:{sopt:['cn','eq','ne']}
}, {
name: 'statusFlag',
width: 150,
edittype:"select",
formatter : 'select',
editoptions:{value:"Y:Active;N:Inactive"},
searchoptions:{sopt:['cn','eq','ne']}
}, {
name: 'crossReferrenced',
width: 100,
editable: false,
searchoptions:{sopt:['cn','eq','ne']}
},{
name: 'act',
index: 'act',
width: 55,
align: 'center',
search: false,
sortable: false,
formatter: 'actions',
searchoptions:{sopt:['cn','eq','ne']} ,
editable: false,
formatoptions: {
keys: true, // we want use [Enter] key to save the row and [Esc] to cancel editing.
onEdit: function (rowid) {
$('#add_detail_code').attr('disabled','disabled').addClass("btnDisabled").removeClass("btnNormalInactive");
},
onSuccess: function (jqXHR) {
$grid.setGridParam({ rowNum: 10 }).trigger('reloadGrid');
},
afterSave: function (rowid) {
$('#add_detail_code').removeAttr('disabled').addClass("btnNormalInactive").removeClass("btnDisabled");
},
afterRestore: function (rowid) {
$('#add_detail_code').removeAttr('disabled').addClass("btnNormalInactive").removeClass("btnDisabled");
},
delOptions: myDelOptions
}
},{
name: 'dtlCodeSysid',
hidden: true
}],
cmTemplate: {
editable: true
},
jsonReader: {id:'dtlCodeSysid',
},
rowList: [5, 10, 20],
pager: '#detailCodePager',
gridview: true,
ignoreCase: true,
rowNum:10,
rownumbers: false,
sortname: 'col1',
loadonce:true,
viewrecords: true,
sortorder: 'asc',
height: '100%',
deepempty: true,
editurl: $('#contextPath').val() +"/globalcodes/saveMasterCodeDetails?masterCodeSysId="+$('#masterCodeSysid').val(),
//caption: 'Usage of inlineNav for inline editing',
});
$grid.jqGrid('filterToolbar', {
searchOperators: true
});
$grid.jqGrid('navGrid', '#detailCodePager', {
add: false,
edit: false,
del: false,
search:false,
refresh:true
});
You don't posted any code which you use, so I try to guess. Probably you implemented pagination on the server side and returns only one page of data in case of usage loadonce: true option. Correct usage of loadonce: true on the server side would be returning all data, the data need be just correctly sorted based on sorting parameters sent by jqGrid. By the way the format of returned data from the server could be just array of items instead of wrapping results in { "total": "xxx", "page": "yyy", "records": "zzz", "rows" : [...]}. In case of usage loadonce: true option the data from total, page and records will be ignored and calculated based on the size of array returned data.