We Keep Coding

Empty Edit/Add windows on jQGrid for MVC

Although the jQGrid loads properly on the website, clicking the edit and add buttons brings up a window where I can't add the database information. It only shows the submit and cancel buttons on the bottom left.
I'm currently using this function for jQGrid:
$('#StudentGrid').jqGrid({
url: '#Url.Action("GetStudent", "Admin")',
editurl: '#Url.Action("GetStudent", "Admin")',
mtype: 'GET',
datatype: 'json',
iconSet: "fontAwesome",
caption: 'Database',
autoresizeOnLoad: true,
autoResizing: { compact: true },
prmNames: { page: "CurrentPage", rows: "PageSize" },
jsonReader: {
repeatitems: false,
id: "StudentId",
root: "rows",
page: "page",
total: "total",
records: "records"
},
hidegrid: false,
autowidth: true,
//width: 1250,
/*height: 800,*/
top:100,
gridView: true,
loadonce: true,
rowNum: 10,
scrollrows: true,
autoresizeOnLoad: true,
autoResizing: { compact: true },
viewrecords: true,
pager: '#pager',
pgbuttons: true,
colNames: ["StudentId", "Name", "Grade"],
colModel: [
{
name: 'studentId',
index: 'studentId',
editoptions: { readonly: 'readonly' },
width: 25,
hidden: false,
sortable: false
},
{
name: 'name',
index: 'name',
editoptions: { size: 25, maxlength: 20 },
hidden: false,
sortable: true,
width: 25,
align: "center"
},
{
name: 'grade',
index: 'grade',
hidden: false,
sortable: true,
width: 25,
align: "center"
}
],
postData: {
StudentId: $("studentId").val(),
Name: $("name").val(),
Grade: $("grade").val()
},
loadError: function (request, textStatus, errorThrown) {
handleError('An error occured trying to load the Database.', request, textStatus, errorThrown);
},
gridComplete: function () {
},
selectTimeout: 0, //for wait to prevent from onSelectRow event firing when actually it is a double click
onSelectRow: function (rowid, status, e) {
clearTimeout(this.selectTimeout);
this.selectTimeout = setTimeout(
function () {
if (status) {//select
;
}
else { //deselect
$('#StudentGrid').jqGrid("resetSelection");
}
},
250);
},
ondblClickRow: function (rowid, iRow, iCol, e) {
}
}).jqGrid('navGrid', '#pager', {
add: true,
del: true,
edit: true,
search: false,
refresh: false,
addfunc: function (id) {
updateRow("new");
},
editfunc: function (id) {
updateRow("edit");
},
delfunc: function (id) {
deleteRow(id);
}
}).jqGrid('gridResize', { minWidth: 1024, maxWidth: 2048, minHeight: 300, maxHeight: 450 });
Both the edit and add buttons use the following function:
//Add new record to grid or edit existing record.
function updateRow(id) {
var oper;
var rowData;
if (id == 'new') {
//add requested, set jqgrid value
oper = 'add';
}
else {
//edit requested, set jqgrid value
oper = 'edit';
//Get jqgrid row id
var rowId = $('#StudentGrid').getGridParam("selrow");
//Re-asign id to rowId
id = rowId
//Set row data
rowData = $('#StudentGrid').jqGrid('getRowData', rowId);
}
// Display the edit dialog below to the grid
var position = getDialogPosition();
$('#StudentGrid').editGridRow(id, {
top: position.top,
left: position.left,
width: 900,
height: 'auto',
mtype: 'POST',
modal: true,
autoresizeOnLoad: true,
autoResizing: { compact: true },
recreateForm: true,
closeAfterAdd: true,
closeAfterEdit: true,
reloadAfterSubmit: true,
ajaxOptions: { cache: false },
editData: {
StudentId: $("studentId").val(),
Name: $("name").val(),
Grade: $("grade").val()
},
onInitializeForm: function (form) {
$('input', form).keypress(
function (e) {
var key = e.charCode ? e.charCode : e.keyCode ? e.keyCode : 0;
if (key == 13) {
e.preventDefault();
}
});
},
afterSubmit: function (response, postdata, formid) {
//if action canceled
var retObj = JSON.parse(response.responseText);
if (retObj && retObj.CancelAction > 0) {
alert(retObj.Message);
}
$("#StudentGrid").jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid");
return [true, '', false]; // no error and no new rowid
},
afterComplete: function (response, postdata, formid) {
//Set fields to only readonly
$('#studentId').attr('readonly', 'readonly');
$("#StudentGrid").jqGrid("setGridParam", { datatype: "json" }).trigger("reloadGrid");
checkForError('An error occured trying to save Student record.', response, null, null, formid);
},
beforeShowForm: function (form) {
//Remove readonly - need to be editable when adding a new code value record to grid/db code values table
if (id == 'new') {
$('#studentId').removeAttr('readonly');
}
},
successfunc: function (data) {
return true;
},
beforeSubmit: function (postdata, formid) {
return [true];
}
});
}
The HTML for the table is:
<table style="width:90%;margin:5px;">
<tr style="vertical-align:top;">
<td>
<div style="margin-top:5px;"></div>
<div class="textborder">
<span>Student Database</span>
</div>
<table id="StudentId"></table>
<div id="pager"></div>
</td>
</tr>
</table>
This is my first time trying to use jQGrid, so are there any parts of the code I'm missing?

Not sure, but you should set your fields as editable. this is the property in colModel -> editable : true like this:
colModel: [
{
name: 'name',
index: 'name',
editable : true,
editoptions: { size: 25, maxlength: 20 },
hidden: false,
sortable: true,
width: 25,
align: "center"
},
....
Check the docs for editing

After row saved call back in jqgrid

I need to able to tap into an event after row has been updated, I use inline editing. There is a beforeSend event in ajaxRowOptions but no matching after.
How do I implement an after save callback?
Here is my grid:
$('#myGrid').jqGrid({
datatype: 'local',
jsonReader: common.jqgrid.jsonReader('Code'),
editurl: common.getServerPath() + 'myAjax/updateSomething/',
ajaxRowOptions: {
beforeSend: function (jqXhr, settings) {
//something here
}
}
},
mtype: 'POST',
pager: '#myPager',
colNames: ['Method', 'Type', 'Package', 'Disc %'],
colModel: [
{
name: 'Code',
index: 'Code',
width: 25,
sortable: false
},
{
name: 'MethodType',
index: 'MethodType',
width: 10,
sortable: false,
align: 'center'
},
{
name: 'ProfNo',
index: 'ProfNo',
width: 15,
sortable: false,
align: 'center'
},
{
name: 'Discount',
index: 'Discount',
width: 15,
sortable: false,
edittype: 'text',
align: 'right',
editable: true,
editrules: {
number: false,
custom: true,
custom_func: validateDiscount
}
}],
scroll: true,
hidegrid: false,
altRows: true,
altclass: 'gridAltRowClass',
height: 330,
scrollOffset: 0,
width: 770,
rowNum: 500,
footerrow: true,
userDataOnFooter: true
});
and
validateDiscount: function (value) {
if (isNaN(value)) {
return [false, 'Discount must be a number.'];
}
else {
var numValue = parseFloat(Number(value).toFixed(2));
if (numValue >= 100.00) {
return [false, 'is not a valid value. Discount must be a number less than 100.'];
}
}
return [true, ''];
},

Not loading json data in jqgrid

Why json data not loading in jqgrid ?
I am using ASP.net with C# with JQGrid using javascript & AJAX
Here is my code below :
public string Alarm_Main()
{
SqlConnection con = new SqlConnection(ConnString);
DataTable dt = new DataTable();
con.Open();
string query = "select * from MST_ALARM_TYPE";
SqlDataAdapter da = new SqlDataAdapter(query, con);
DataSet ds = new DataSet();
da.Fill(ds);
con.Close();
return JsonConvert.SerializeObject(ds.Tables[0]);
}
In file : DataService.aspx the code is given below :
<script>
$(function () {
$("#list").jqGrid({
url: 'DataService.asmx/Alarm_Main',
datatype: 'json',
mtype: 'POST',
serializeGridData: function (postData) {
alert(JSON.stringify(postData));
return JSON.stringify(postData);
},
ajaxGridOptions: { contentType: "application/json;charset=utf-8;" },
loadonce: true,
jsonReader: {
page: function (obj) { return 1; },
total: function (obj) { return 1; },
records: function (obj) { return obj.d.length; },
root: function (obj) { return obj.d; },
repeatitems: false,
id: "0"
},
colNames: ['', '알람코드', '등록날짜', '알람명', '등록자', ''],
colModel: [
{ name: 'myradio', width: 30, search: false, fixed: true, align: 'center', resizable: false, sortable: false, frozen: true, formatter: function (cellValue, option) { return '<input type="radio" name="radio_' + option.gid + '"/>'; }, frozen: true },
{ name: 'alarm_type_code', index: 'alarm_type_code', align: 'center', width: 200, frozen: true, sorttype: 'number' },
{ name: 'regist_date', index: 'regist_date', width: 200, editable: true, frozen: true, align: 'center', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "Y-m-d", newformat: "Y-m-d" } },
{ name: 'alarm_type_name', index: 'alarm_type_name', width: 200, frozen: true },
{ name: 'regist_name', index: 'regist_name', width: 200, frozen: true },
{ name: 'myac', width: 50, search: false, fixed: true, sortable: false, resizable: false, fommatter: 'action', formatoptions: {keys:true}}
],
rowNum: 10,
rowList: [5, 10, 20, 50],
width: '100%',
pager: '#pager',
gridview: true,
rownumbers: false,
sortable: true,
multiselect: true,
scrollOffset: 0,
cellEdit: true,
sortorder: 'desc',
caption: '그리드 제목',
height: '100%',
shrinkToFit: true,
loadonce: true
});
jQuery("#list").jqGrid('setFrozenColumns');
jQuery("#list").trigger('reloadGrid');
jQuery("#list").jqGrid('navGrid', '#pager', { excel: true, add: true, edit: true, view: true, del: true, search: true, refresh: true },
{ closeAfterAdd: true, reloadAfterSubmit: false, closeOnEscape: true },
{ closeAfterAdd: true, reloadAfterSubmit: false, closeOnEscape: true },
{ reloadAfterSubmit: false, closeOnEscape: true },
{ multipleSearch: true, multipleGroup: true, showQuery: true, closeOnEscape: true, onSearch: function () { } }, { closeOnEscape: true });
jQuery("#list").jqGrid('bindKeys', { "onEnter": function (rowid) { alert("You enter a row with id:" + rowid) } });
jQuery("#list").jqGrid('navButtonAdd', '#pager', { caption: "Excel", onClickButton: function () { jquery("#list").jqGrid('excelExport', { url: 'D:\\' }); } });
jQuery("#list").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: true, defaultSearch: "cn" });
});
</script>
I can't see anything on my screen.
What can be the issue ?

Below is example , how to use ado.net with jqgrid, i hope this will help you.
Controller"
public ActionResult GetCustomer(int rows, string sidx, string sord, int page)
{
List<Customer> _customerList = new List<Customer>();
DataTable dt = new DataTable();
string strConString = #"Data Source=gen5win10;Initial Catalog=AsifDb;Integrated Security=True";
using (SqlConnection con = new SqlConnection(strConString))
{
con.Open();
SqlCommand cmd = new SqlCommand("Select * from Customer", con);
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.SelectCommand = cmd;
DataSet ds = new DataSet();
da.Fill(ds);
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
Customer cobj = new Customer();
cobj.CustomerId = Convert.ToInt32(ds.Tables[0].Rows[i]["CustomerId"].ToString());
cobj.ID = Convert.ToInt32(ds.Tables[0].Rows[i]["CustomerId"].ToString());
cobj.Name = ds.Tables[0].Rows[i]["Name"].ToString();
cobj.Phone = ds.Tables[0].Rows[i]["Phone"].ToString();
cobj.Address = ds.Tables[0].Rows[i]["Address"].ToString();
cobj.Date = Convert.ToDateTime(ds.Tables[0].Rows[i]["Date"].ToString());
_customerList.Add(cobj);
}
}
int pageIndex = Convert.ToInt32(page) - 1;
int pageSize = rows;
var Results = _customerList.Select(
a => new
{
a.ID,
a.Name,
a.Phone,
a.Address,
a.Date,
});
int totalRecords = Results.Count();
var totalPages = (int)Math.Ceiling((float)totalRecords / (float)rows);
if (sord.ToUpper() == "DESC")
{
Results = Results.OrderByDescending(s => s.ID);
Results = Results.Skip(pageIndex * pageSize).Take(pageSize);
}
else
{
Results = Results.OrderBy(s => s.ID);
Results = Results.Skip(pageIndex * pageSize).Take(pageSize);
}
var jsonData = new
{
total = totalPages,
page,
records = totalRecords,
rows = Results
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
HTML:
<link href="~/Scripts/jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.css" rel="stylesheet" />
<link href="~/Scripts/Guriddo_jqGrid_JS_5.2.0/css/ui.jqgrid.css" rel="stylesheet" />
<script src="~/Scripts/Guriddo_jqGrid_JS_5.2.0/js/jquery-1.11.0.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1/jquery-ui-1.12.1/jquery-ui.js"></script>
<script src="~/Scripts/Guriddo_jqGrid_JS_5.2.0/js/i18n/grid.locale-en.js"></script>
<script src="~/Scripts/Guriddo_jqGrid_JS_5.2.0/js/jquery.jqGrid.min.js"></script>
<h2>Customers</h2>
<br>
<script type="text/javascript">
$(document).ready(function () {
$('#sample').jqGrid({
datatype: 'Json',
url: '/Customer/GetCustomer',
type: 'POST',
colNames: ['ID', 'Name', 'Phone', 'Address', 'Date'],
colModel:
[
{key:true , name: 'ID', index: 'ID', editable: false },
{name: 'Name', index: 'Name', editable: true ,editoptions: {maxlength: 15 },editrules:{ required: true, }, },
{ name: 'Phone', index: 'Phone', editable: true, editoptions: { maxlength: 15, },editrules: { required: true, },},
{name: 'Address', index: 'Address', editable: true, editoptions: { maxlength: 30,}, editrules: {required: true,},},
{ name: 'Date', index: 'Date', editable: false, formatter: "date" },
],
pager: jQuery('#pager'),
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "record",
repeatitems: false,
Id: "0"
},
caption: 'Sample JqGrid Table',
viewrecords: true,
rowNum: 10,
rowList: [10, 20, 30, 40],
height: '100%',
// multiselect: true
}).navGrid('#pager', { edit: true, add: true, del: true, search: true, refresh: true },
{
// edit options
url: '/Customer/EditCustomer',
closeOnEscape: true,
closeAfterEdit: true,
recreateForm: true,
afterComplete: function (response)
{
if (response.responseText) {
alert(response.responseText);
}
}
},
{
//add
url: '/Customer/AddCustomer',
closeOnEscape: true,
closeAfterAdd: true,
afterComplete: function (response) {
if (response.responseText) {
alert(response.responseText);
}
}
},
{ //Options for Delete
url:'/Customer/DeleteCustomer',
closeOnEscape: true,
closeAfterAdd: true,
afterComplete: function (response)
{
if (response.responseText) {
alert(response.responseText);
}
}
}
);
});
</script>
<table id="sample"></table>
<div id="pager"> </div>

How to get jqGrid rows in json objects after applying search filter

I have added a search textbox which allows users to perform search on all rows and columns now i want to get all the filtered rows in json format so i can generate a report.
Below is the code for Jqgrid
var grid = $("#jqGrid");
grid.jqGrid({
url: 'VehicleMaster.aspx/GetLoadData',
mtype: 'POST',
datatype: 'json',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: function(postData) {
return JSON.stringify(postData);
},
ajaxSelectOptions: { type: "GET" },
jsonReader: {
repeatitems: false,
root: function(obj) {
return JSON.parse(obj.d);
}
},
loadonce: true,
sortable: true,
shrinkToFit: false,
autowidth: true,
rowNum: 25,
rowList: [15, 25, 50, 75, 100],
viewsortcols: [true, 'vertical', true],
pager: '#pager',
pgtext: "Page from {0} to {1}",
styleUI: 'Bootstrap',
height: $(window).height() - (343), //DYNAMIC HEIGHT
loadComplete: function() {
$(this).find(" > tbody > tr.jqgrow:odd").addClass("altRowClassEven");
$(this).find(" > tbody > tr.jqgrow:even").addClass("altRowClassOdd");
},
colNames: gridColumnNames, //FROM BACKEND
colModel: [
{ label: 'Id', name: 'Id', width: 130, editable: false, hidden: true },
{ label: 'VehicleName', name: 'VehicleName', width: 130, editable: false },
{ label: 'PlateCode', name: 'PlateCode', editable: true, width: 100 },
{
label: 'PlateNo',
name: 'PlateNo',
editable: true,
width: 100,
editoptions: {
dataInit: function(domElem) {
$(domElem).keyup(function() {
this.value = this.value.replace(/[^0-9\.]/g, '');
});
}
}
},
{ label: 'Owner', name: 'Owner', editable: true, width: 100 },
{ label: 'Brand', name: 'Brand', editable: true, width: 100 },
{ label: 'Color', name: 'Color', editable: true, width: 100 },
{ label: 'Make', name: 'Make', editable: true, width: 100 },
{ label: 'Model', name: 'Model', editable: true, width: 100 },
{ label: 'YearModel', name: 'YearModel', editable: true, width: 100 },
{
label: 'Seats',
name: 'Seats',
editable: true,
width: 100,
editoptions: {
dataInit: function(domElem) {
$(domElem).keyup(function() {
this.value = this.value.replace(/[^0-9\.]/g, '');
});
}
}
},
{
label: 'Doors',
name: 'Doors',
editable: true,
width: 100,
editoptions: {
dataInit: function(domElem) {
$(domElem).keyup(function() {
this.value = this.value.replace(/[^0-9\.]/g, '');
});
}
}
},
{
label: 'RegistrationDate',
name: 'RegistrationDate',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
//$(domElem).inputmask('99/99/9999');
}
}
},
{
label: 'RegistrationExpiry',
name: 'RegistrationExpiry',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{ label: 'ChassisNo', name: 'ChassisNo', editable: true, width: 100 },
{ label: 'EngineNo', name: 'EngineNo', editable: true, width: 130 },
{ label: 'TrafficFileNo', name: 'TrafficFileNo', editable: true, width: 130 },
{ label: 'VehicleType', name: 'VehicleType', editable: true, width: 130 },
{ label: 'InsuranceCompany', name: 'InsuranceCompany', editable: true, width: 160 },
{
label: 'InsuranceDate',
name: 'InsuranceDate',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'InsuranceExpiry',
name: 'InsuranceExpiry',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'PlateIssueDate',
name: 'PlateIssueDate',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{ label: 'Department', name: 'Department', editable: true, width: 130 },
{ label: 'Description', name: 'Description', editable: true, width: 130 },
{
label: 'Column1',
name: 'Column1',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column2',
name: 'Column2',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column3',
name: 'Column3',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column4',
name: 'Column4',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column5',
name: 'Column5',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column6',
name: 'Column6',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column7',
name: 'Column7',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column8',
name: 'Column8',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column9',
name: 'Column9',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
},
{
label: 'Column10',
name: 'Column10',
editable: true,
width: 130,
editoptions: {
dataInit: function(domElem) {
$(domElem).datepicker({
format: 'dd/mm/yyyy',
autoclose: true,
clearBtn: true
});
$(domElem).prop('readonly', true);
}
}
}
],
multiselect: false,
cellEdit: true,
hiddengrid: false,
loadtext: 'Loading Data...',
sortascimg: 'sort_asc.gif',
sortdescimg: 'sort_desc.gif',
cellsubmit: 'clientArray',
viewrecords: true,
beforeSelectRow: function(rowid) {
console.log(rowid);
if (typeof selectedRows[0] !== "undefined") {
updateSelectedRow(selectedRows[selectedRows.length - 1]);
console.log(selectedRows[selectedRows.length - 1]);
}
selectedRows.push(rowid);
}
});
Below is the code for live search.
$("#globalSearchText").keyup(function() {
var rules = [],
i,
cm,
postData = grid.jqGrid("getGridParam", "postData"),
colModel = grid.jqGrid("getGridParam", "colModel"),
searchText = $("#globalSearchText").val(),
l = colModel.length;
for (i = 0; i < l; i++) {
cm = colModel[i];
if (cm.search !== false && (typeof cm.stype === "undefined" || cm.stype === "text")) {
rules.push({
field: cm.name,
op: "cn",
data: searchText
});
}
}
$.extend(postData, {
filters: {
groupOp: "OR",
rules: rules
}
});
Kindly guide me to resolve this.
Thanks

jqGrid enable navigation bar save icon on ondblClickRow event

I have set the jqGrid row edit on ondblClickRow event. once a row is double clicked I want to enable save icon on navigation bar. How can I do that.
ondblClickRow: function (rowid) {
jQuery(this).jqGrid('editRow', rowid, true, null, null);
},
Please help
thanks
jQuery(document).ready(function ($) {
grid = $("#SupplementsGrid");
getColumnIndexByName = function (grid, columnName) {
var cm = grid.jqGrid('getGridParam', 'colModel'), i = 0, l = cm.length;
for (; i < l; i += 1) {
if (cm[i].name === columnName) {
return i; // return the index
}
}
return -1;
};
var DataEditUrl = baseSiteURL + 'HotelSupplements/Edit';
var DataAddUrl = baseSiteURL + 'HotelSupplements/Create';
var lastSel;
grid.jqGrid({
url: gridDataUrl,
editurl: DataEditUrl,
mtype: 'POST',
datatype: 'local',
colNames: ['StartDate', 'EndDate', 'Man', 'RoomType', 'SuppType', 'Supplement', 'BuyRate', 'Val', 'ChargeBy', 'ChargeOn', 'Status', 'DaysOfTheWeek', 'HotelSupplementID'],
colModel: [
{
name: 'StartDate', index: 'StartDate',
resizable: true, formatter: 'date', editoptions: { dataInit: function (elem) { $(elem).datepicker({ minDate: 0 }); } }, editable: true, formatoptions: { newformat: 'm/d/Y' }, width: 125, align: 'left',
editrules: { custom: true, custom_func: function (value, colname) { return validateTwoDates('StartDate', 'EndDate', grid.jqGrid('getGridParam', 'selrow')) } }
},
{ name: 'EndDate', index: 'EndDate', formatter: 'date', editoptions: { dataInit: function (elem) { $(elem).datepicker({ minDate: 0 }); } }, editable: true, formatoptions: { newformat: 'm/d/Y' }, width: 100, align: 'left' },
{ name: 'Mandatory', index: 'Mandatory', editable: true, width: 45, align: 'center', edittype: "checkbox", editoptions: { value: "true:false" } },
{
name: 'RoomTypes', index: 'RoomTypes', width: 300, editable: true, edittype: 'select',
editoptions: {
value: roomTypesFormatterEdit,
custom_element: function (value, options) {
return $.jgrid.createEl.call(this, "select",
$.extend(true, {}, options, { custom_element: null, custom_value: null }),
value);
},
custom_value: function ($elem, operation, value) {
if (operation === "get") {
return $elem.val();
}
},
multiple: true
},
align: 'left', formatter: roomTypesFormatter
},
{
name: 'SupplementTypeID', index: 'SupplementTypeID', width: 115, align: 'left', formatter: supplementTypesFormatter, editable: true, edittype: 'select',
editoptions: {
value: supplementTypesFormatterEdit,
dataEvents: [
{
type: 'change', // keydown
fn: function (e) {
suppTId = $("#" + this.id).val();
myValue = '';
filterSupplementsByTypeID(suppTId);
//grid.jqGrid('setColProp', 'SupplementID', { editoptions: { value: supplementsFormatterEdit} });
var row = $(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
for (k = 0; k < filteredSupplements.length; k++) {
myValue += '<option value=' + filteredSupplements[k].SupplementID + '>' + filteredSupplements[k].Name + '</option>';
}
$("select#" + rowId + "_SupplementID", row[0]).html(myValue);
}
}
]
}
},
{
name: 'SupplementID', index: 'SupplementID', width: 120, align: 'left', formatter: supplementsFormatter, editable: true, edittype: 'select',
editoptions: {
value: supplementsFormatterEdit
}
},
{ name: 'BuyRate', index: 'BuyRate', editable: true, width: 90, align: 'left', sorttype: 'int', editrules: { custom: true, custom_func: validNum } },
{
name: 'ChargeValueTypeID', index: 'ChargeValueTypeID', width: 70, align: 'left', formatter: ChargeValueTypesFormatter, editable: true, edittype: 'select',
editoptions: {
value: chargeValueTypesFormatterEdit
}
},
{
name: 'ChargeByTypeID', index: 'ChargeByTypeID', width: 100, align: 'left', formatter: ChargeByTypesFormatter, editable: true, edittype: 'select',
editoptions: {
value: chargeByTypesFormatterEdit
}
},
{
name: 'ChargeOnTypeID', index: 'ChargeOnTypeID', width: 100, align: 'left', formatter: ChargeOnTypesFormatter, editable: true, edittype: 'select',
editoptions: {
value: chargeOnTypesFormatterEdit
}
},
{ name: 'Active', index: 'Active', width: 60, align: 'left', editable: true, edittype: "checkbox", editoptions: { value: "true:false" } },
{
name: 'DaysOfTheWeek', index: 'DaysOfTheWeek', width: 250, align: 'left', editable: true, edittype: 'select', formatter: function (cellvalue, options, rowObject) {
output = '';
if (rowObject.MonValid) {
output += 'Monday,';
} if (rowObject.TueValid) {
output += 'Tuesday,';
} if (rowObject.WedValid) {
output += 'Wednesday,';
} if (rowObject.ThuValid) {
output += 'Thursday,';
} if (rowObject.FriValid) {
output += 'Friday,';
} if (rowObject.SatValid) {
output += 'Saturday,';
} if (rowObject.SunValid) {
output += 'Sunday,';
}
output = output.substring(0, output.length - 1);
if (output != '') {
return output;
} else {
return cellvalue;
}
}, editoptions: {
value: 'Monday:Monday;Tuesday:Tuesday;Wednesday:Wednesday;Thursday:Thursday;Friday:Friday;Saturday:Saturday;Sunday:Sunday',
custom_element: function (value, options) {
return $.jgrid.createEl.call(this, "select",
$.extend(true, {}, options, { custom_element: null, custom_value: null }),
value);
},
custom_value: function ($elem, operation, value) {
if (operation === "get") {
return $elem.val();
}
},
multiple: true
}
},
{
name: 'HotelSupplementID',
index: 'HotelSupplementID',
width: 25, editable: true,
editrules: {
//required: true,
edithidden: true
}, hidden: true,
editoptions: {
dataInit: function (element) {
//jq(element).attr("readonly", "readonly");
}
}
}
],
jsonReader: {
root: 'Rows',
page: 'Page',
total: 'Total',
records: 'Records',
repeatitems: false,
id: "12",
},
subGrid: true,
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id;
subgrid_table_id = subgrid_id + "_t";
jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
jQuery("#" + subgrid_table_id).jqGrid({
url: supplementChildRateurl + '?id=' + row_id,
datatype: "json",
colNames: ['MinAge', 'MaxAge', 'BuyRate', ],
colModel: [
{ name: "MinAge", index: "MinAge", width: 130 },
{ name: "MaxAge", index: "MaxAge", width: 130 },
{ name: "BuyRate", index: "BuyRate", width: 130 }
],
height: '100%',
rowNum: 20,
});
},
ondblClickRow: function (rowid) {
jQuery(this).jqGrid('editRow', rowid, true, null, null);
},
onSelectRow: function (id) {
if (id && id !== lastSel) {
jQuery(this).restoreRow(lastSel);
lastSel = id;
}
},
resizeStop: function (newwidth, index) {
jQuery(this.bDiv).find('>div:first>table.ui-jqgrid-btable:first')
.jqGrid('setGridWidth', newwidth);
},
paging: true,
loadonce: true,
loadComplete: function (data) {
var iCol = getColumnIndexByName(grid, 'act');
jQuery("#SupplementsGrid").children("tbody")
.children("tr.jqgrow")
.children("td:nth-child(" + (iCol + 1) + ")")
.each(function () {
$("<div>",
{
title: "Custom",
mouseover: function () {
$(this).addClass('ui-state-hover');
},
mouseout: function () {
$(this).removeClass('ui-state-hover');
},
click: function (e) {
}
}
).css({ "margin-left": "5px", float: "left" })
.addClass("ui-pg-div ui-inline-custom")
.append('<span class="ui-icon ui-icon-document"></span>')
.appendTo($(this).children("div"));
});
jQuery("#SupplementsGrid").trigger("reloadGrid");
jQuery("#SuccessMsg").html("");
//$("#SupplementsGrid").jqGrid('setGridParam',{datatype:'local'});
var rowIds = $("#SupplementsGrid").jqGrid('getDataIDs');
$.each(rowIds, function (i, row) {
var rowData = $("#SupplementsGrid").getRowData(row);
if (rowData.InputType == 'select') {
}
});
},
gridview: true,
rowNum: 20,
rowList: [5, 10, 20, 50, 100],
pager: jQuery('#pager'),
emptyrecords: "Nothing to display",
sortable: true,
sortname: 'StartDate',
sortorder: "desc",
viewrecords: true,
height: 'auto',
width: 1068,
caption: "Supplements",
});
$('#SupplementsGrid').jqGrid('navGrid', '#pager',
{
edit: false,
add: false,
del: false,
search: false
},
//edit options
{ url: DataEditUrl },
//add options
{ url: DataAddUrl },
//delete options
{ url: '/home1/DeleteUserData' }
);
parameters = {
edit: true,
editicon: "ui-icon-pencil",
add: true,
addicon: "ui-icon-plus",
save: true,
saveicon: "ui-icon-disk",
cancel: true,
cancelicon: "ui-icon-cancel",
editParams: {
keys: false,
oneditfunc: null,
successfunc: function (val) {
if (val.responseText != "") {
// alert(val.responseText);
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
}
},
url: null,
extraparam: {
EmpId: function () {
var sel_id = $('#SupplementsGrid').jqGrid('getGridParam', 'selrow');
var value = $('#SupplementsGrid').jqGrid('getCell', sel_id, '_id');
return value;
}
},
aftersavefunc: null,
errorfunc: null,
afterrestorefunc: null,
restoreAfterError: true,
mtype: "POST"
},
addParams: {
useDefValues: true,
addRowParams: {
keys: true,
extraparam: {},
// oneditfunc: function () { alert(); },
successfunc: function (val) {
if (val.responseText != "") {
//alert(val.responseText);
$(this).jqGrid('setGridParam', { datatype: 'json' }).trigger('reloadGrid');
}
}
}
}
}
jQuery("#SupplementsGrid").jqGrid('inlineNav', '#pager', parameters);
});

You don't posted details of your implementation, but I can suppose that you use inlineNav method. inlineNav uses simple rule for generating the value of id attribute of all navigator icons. The ids of all inline editing buttons are set based on the id of the grid and a suffix: "_iladd", "_iledit", "_ilsave", "_ilcancel". For example is the grid have id="list" then the id of Save button will be "list_ilsave". If required you can disable any button by addressing it by its id (for example $("#list_ilsave").removeClass('ui-state-disabled'); - enable Save button and $("#list_ilsave").addClass('ui-state-disabled'); - disable it). You can use aftersavefunc and afterrestorefunc options of editRow to change the state of navigator buttons after saving or discarding of changes. In the same way you can use jQuery.click to simulate click on any button. For example $("#list_ilsave").click(); will simulate clicking on the Save button.