jqgrid validation when editing a record - jqgrid

I have now a problem with validation of a record that is being edited.
The edit form (and the add form) has a field called "email". That field should be unique in database, so I use ajax to validate it, by mean of this function:
function check_email(value, colname) {
$.ajax({
url: '#Url.Action("CheckEmail")',
data: { email: value },
type: 'POST',
async: false,
datatype: 'text',
success: function (data) {
if (!data) result = [true, ""];
else result = [false, colname + ": ya existe en el sistema"];
}
})
return result;
}
This works, but the problem is when I am editing the record. Of course e-mail exists in this case, so it is not allowing me to save the record.
The algorithm might be: it should validate only if id is > 0 and the entered e-mail is different from the existing value. In other words, validation must occur if the user is changing e-mail.
I spent a lot of time trying to figure out how to know if the editform is for adding or for editing, and even more, I was trying to find the value of the primary key of the record being edited, without any success.
Any help will be appreciated,
EDIT:
This is the code of the grid:
$("#personal").jqGrid({
url: "#Url.Action("List")",
datatype: "json",
mtype: "GET",
colNames: ["Departamento",
"Nombres",
"Apellido Paterno",
"Apellido Materno",
"RUT",
"Contraseña",
"Fecha Nacimiento",
"Fotografía",
"Estado Civil",
"Género",
"Dirección",
"Cargo",
"E-mail",
"Fecha Ingreso",
"Creación",
"Modificación"],
colModel: [
{ name: "dep_id", index: "dep_nombre", editable: true, edittype: "select", formatter: 'select', editoptions: { width: 100, value: "#ViewData["Departamentos"]" }, width: 250, editrules: { required: true }, formoptions: { elmsuffix: '<span class="required">*</span>' }, stype: 'select', searchoptions: { sopt: ['eq'], value: "#ViewData["Departamentos"]" } },
{ name: "per_nombres", index: "per_nombres", editable: true, width: 250, editoptions: { maxlength: 80, size: 32 }, editrules: { required: true }, formoptions: { elmsuffix: '<span class="required">*</span>' } },
{ name: "per_apellido_paterno", index: "per_apellido_paterno", editable: true, width: 250, editoptions: { maxlength: 80, size: 32 }, editrules: { required: true }, formoptions: { elmsuffix: '<span class="required">*</span>' } },
{ name: "per_apellido_materno", index: "per_apellido_materno", editable: true, width: 250, editoptions: { maxlength: 80, size: 32 } },
{ name: "per_dni", index: "per_dni", editable: true, width: 100, editoptions: { maxlength: 20, size: 17, dataInit: function (el) { $.mask.definitions['~'] = '[0-9kK]'; $(el).mask("?99.999.999-~"); } }, editrules: { required: true, custom: true, custom_func: is_rut }, formoptions: { elmsuffix: '<span class="required">*</span>' }, searchoptions: { dataInit: function (el) { $.mask.definitions['~'] = '[0-9kK]'; $(el).mask("?99.999.999-~"); } } },
{ name: "per_contrasena", editable: true, edittype: "password", hidden: true, width: 100, editoptions: { maxlength: 50, size: 17 }, editrules: { required: false, edithidden: true } },
{ name: "per_fecha_nacimiento", index: "per_fecha_nacimiento", editable: true, width: 100, editrules: { date: true, required: false }, formatter: 'date', formatoptions: { srcformat: 'SortableDateTime', newformat: 'd-m-Y' }, editoptions: { size: 17, dataInit: function (el) { $(el).datepicker({ dateFormat: 'dd-mm-yy' }); $(el).mask("?99-99-9999"); } }, searchoptions: { dataInit: function (el) { $(el).datepicker({ dateFormat: 'dd-mm-yy' }); $(el).mask("?99-99-9999"); } } },
{ name: "per_fotografia", index: "per_fotografia", editable: true, width: 250, edittype: "file", editoptions: { maxlength: 255, size: 32 } },
{ name: "per_estado_civil", index: "per_estado_civil", editable: true, edittype: "select", editoptions: { value: ":;S:Soltero;C:Casado;V:Viudo;D:Divorciado" }, width: 100, stype: 'select', searchoptions: { sopt: ['eq'], value: ":;S:Soltero;C:Casado;V:Viudo;D:Divorciado" } },
{ name: "per_sexo", index: "per_sexo", editable: true, edittype: "select", editoptions: { value: ":;M:Masculino;F:Femenino" }, width: 100, stype: 'select', searchoptions: { sopt: ['eq'], value: ":;M:Masculino;F:Femenino" } },
{ name: "per_direccion", index: "per_direccion", editable: true, width: 250, editoptions: { maxlength: 512, size: 32 } },
{ name: "per_cargo", index: "per_cargo", editable: true, width: 100, editoptions: { maxlength: 50, size: 32 } },
{ name: "per_email", index: "per_email", editable: true, width: 100, editoptions: { maxlength: 80, size: 32 }, editrules: { email: true, required: false, custom: true, custom_func: check_email } },
{ name: "per_fecha_ingreso", index: "per_fecha_ingreso", editable: true, width: 100, editrules: { date: true, required: false }, formatter: 'date', formatoptions: { srcformat: 'SortableDateTime', newformat: 'd-m-Y' }, editoptions: { size: 17, dataInit: function (el) { $(el).datepicker({ dateFormat: 'dd-mm-yy' }); $(el).mask("?99-99-9999"); } }, searchoptions: { dataInit: function (el) { $(el).datepicker({ dateFormat: 'dd-mm-yy' }); $(el).mask("?99-99-9999"); } } },
{ name: "per_creado_el", index: "per_creado_el", editable:false, search:false, width: 100, align: "center", formatter: "date" },
{ name: "per_modificado_el", index: "per_modificado_el", editable:false, search:false, width: 100, align: "center", formatter: "date" },
],
jsonReader: {
repeatitems: false,
id: "per_id"
},
pager: "#pager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "per_apellido_paterno",
sortorder: "asc",
viewrecords: true,
gridview: true,
autoencode: true,
multiselect: true,
shrinkToFit: false,
caption: "Funcionarios",
editurl: "#Url.Action("AjaxEdit")",
height: '100%',
width: 935,
rownumbers: true,
rownumWidth: 40
});
$("#personal").jqGrid('hideCol', ["per_fotografia", "per_direccion"]);
$("#personal").jqGrid('navGrid', '#pager', { edit: true, add: true, del: true, search: false }, { width: 500 }, { width: 500 }, {}, { multipleSearch: false, multipleGroup: false });
$("#personal").jqGrid('filterToolbar', { searchOperators: false });
$.jgrid.edit.addCaption = "Agregar Funcionario";
$.jgrid.edit.editCaption = "Modificar Funcionario";
$.jgrid.edit.saveData = "¡El funcionario fue modificado! ¿Almacena los cambios?";
$.jgrid.formatter.date.newformat = 'd-m-Y H:i';
Thanks
Jaime

I think you should send the record ID for verification.
function check_email(value, colname) {
var rowid = jQuery('#personal').jqGrid('getGridParam', 'selrow');
$.ajax({
url: '#Url.Action("CheckEmail")',
data: { email: value, rowid: rowid },
type: 'POST',
async: false,
datatype: 'text',
success: function (data) {
if (!data) result = [true, ""];
else result = [false, colname + ": ya existe en el sistema"];
}
})
return result;
}
and so the server has any record can be checked with the ID does not match with the rowid.

Related

TypeError: Unable to read "stype" of Undefined or Null reference in JQGrid

I want filter on the data which comes dynamically in list format. If i
used SearchOptions event for that then it throws error of TypeError: Unable to read "stype" of Undefined or Null reference. Anyone can provide me solution for that. Grid model shown in below:
jQuery("#list2").jqGrid({
url: '/LocaleRate/LocaleRates',
datatype: "json",
colModel: [
{ name: 'Id', hidden: true },
{
name: 'SourceLocaleId', index: 'SourceLocaleName', width: 130, align: "left", editable: true, edittype: "select", formatter: 'select', editoptions: { value: LocaleList }, editrules: { required: true , stype: 'select', searchoptions: { sopt: ['eq', 'ne'], value: LocaleList
},
{
name: 'LocaleId', index: 'LocaleName', width: 90, align: "left", editable: true, edittype: "select", formatter: 'select', editoptions: { value: LocaleList }, editrules: { required: true }, stype: "select", searchoptions: { value: LocaleList }
},
{
name: 'CompanyId', index: 'CompanyName', editable: true, width: 100, editable: true, edittype: "select", formatter: 'select',
editoptions: {value: CompanyList}, editrules: { required: true},
stype: "select", searchoptions: { value: CompanyList }
},
{ name: 'VDBID', id: 'VDBID', editable: true, width: 90, editrules: { required: true }, editoptions: { readonly: "readonly" } },
{
name: 'CurrencyId', index: 'CurrencyName', width: 100, editable: true, edittype: "select", formatter: 'select', editoptions: { value: CurrencyList }, editrules: { required: true },
stype: "select", searchoptions: { value: CurrencyList }
},
{ name: 'HourRate', id: 'HourRate', editable: true, width: 130, editrules: { required: true } },
{ name: 'PageRate', id: 'PageRate', editable: true, width: 90, editrules: { required: true } },
{ name: 'WordRateExact', id: 'WordRateExact', editable: true, width: 130, editrules: { required: true } },
{ name: 'WordRateDuplicate', id: 'WordRateDuplicate', editable: true, width: 140, editrules: { required: true } },
{ name: 'WordRateFuzzy', id: 'WordRateFuzzy', editable: true, width: 130, editrules: { required: true } },
{ name: 'WordRateNew', id: 'WordRateNew', editable: true, width: 90, editrules: { required: true } },
{ name: 'MinimumPageCount', id: 'MinimumPageCount', editable: true, width: 130, editrules: { required: true } },
{ name: 'MinimumWordCount', id: 'MinimumWordCount', editable: true, width: 130, editrules: { required: true } },
{ name: 'WordRateExactComplex', id: 'WordRateExactComplex', editable: true, width: 150, editrules: { required: true } },
{ name: 'MinimumCharge', id: 'MinimumCharge', editable: true, width: 90, editrules: { required: true } },
{ name: 'WordRateDuplicateComplex', id: 'WordRateDuplicateComplex', editable: true, width: 150, editrules: { required: true } },
{ name: 'WordRateFuzzyComplex', id: 'WordRateFuzzyComplex', editable: true, width: 90, editrules: { required: true } },
{ name: 'WordRateNewComplex', id: 'WordRateNewComplex', editable: true, width: 90, editrules: { required: true } },
{ name: 'FirstProofRate', id: 'FirstProofRate', editable: true, width: 90, editrules: { required: true } },
{ name: 'WordRateHighFuzzy', id: 'WordRateHighFuzzy', editable: true, width: 90, editrules: { required: true } },
{ name: 'WordRateHighFuzzyComplex', id: 'WordRateHighFuzzyComplex', editable: true, width: 90, editrules: { required: true } },
{ name: 'DTPVendorHourRate', id: 'DTPVendorHourRate', editable: true, width: 90, editrules: { required: true } },
{ name: 'DTPVendorPageRate', id: 'DTPVendorPageRate', editable: true, width: 90, editrules: { required: true } },
{ name: 'VDBPriceLineID', id: 'VDBPriceLineID', editable: true, width: 90, editrules: { required: true } },
{ name: 'MTRate', id: 'MTRate', editable: true, width: 90, editrules: { required: true } },
{ name: 'DTPClientHourRate', id: 'DTPClientHourRate', editable: true, width: 90, editrules: { required: true } },
{
name: 'IsActive', editable: true, width: 40, edittype: "checkbox", editoptions: { value: "True:False" }
}
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#pager',
loadonce: true,
sortname: 'id',
height: "auto",
width: 2000,
viewrecords: true,
sortorder: "desc",
caption: "JSON Example",
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
id: "0"
},
autowidth: true,
});
jQuery("#list2").jqGrid('filterToolbar', {
stringResult: true,
searchOnEnter: false,
});
With Reference to above code, I want filters on SourceLocaleId, LocaleID, CompanyId & CurrencyId fields which has dynamic data.
Here I have replaced index value of each column which has dynamic data in list manner from 'SourceLocaleName' to 'SourceLocaleId'.

Jqgrid multiselect dropdown with scrollbar

I want to add multiselect dropdown with chechbox in my application , i had added it , it works perfecty . Multiple selection is enabled but it's height is not getting set , here is my view ... please help
View
jQuery(grid_selector).jqGrid({
subGridRowExpanded: function (subgridDivId, rowId) {
},
autowidth: true,
shrinkToFit: true,
url: '#Url.Action("GetAllTasks","AdminIndex")',
datatype: 'json',
mtype: 'GET',
height: 'auto',
colNames:['Task Id ','Project Name', 'Assign To','Task Name','Task Description','Budget','Task Status','Start Date','End Date'],
colModel:[
{name:'Task_Id', key: true,searchoptions: { sopt: ['eq','ne','gt','ge','lt','le']}, index:'id', width:20, sorttype:"int", editable: true, editable: true, sortable: true, search: true, searchrules: { required: true}},
{name:'Project_Name',index:'pid', width:40,search:false,editrules: { required: true},editable: true,formoptions: { rowpos: 2, colpos: 1},editoptions:{size:"1",value: projects}, style: "width: 180px",edittype: "select", stype: "select",dataheight:'auto'},
{name:'User_Email',stype: 'select',index:'email',searchoptions: { sopt: ['eq','ne']},searchoptions:{ value: users }, width:60,editrules: { required: true},edittype: 'select',editable: true,editoptions:{size:5,value: users,dataInit: function (elem) {
setTimeout(function () {
$(elem).multiselect({
header:"Choose an option!",
minWidth: 100, //'auto',
height: 600,
selectedList: 7,
checkAllText: "all",
uncheckAllText: "no",
noneSelectedText: "Any",
open: function () {
var $menu = $(".ui-multiselect-menu:visible");
$menu.width("auto");
return;
}
});
}, 50);
},multiple: true,defaultValue: 'IN'},editrules: { required: true},edittype: "select", stype: "select"},
{name:'Task_Name',index:'tname', width:40,searchoptions: { sopt: ['eq','ne']},editrules: { required: true},editable: true,editoptions:{size:"20",maxlength:"30"},editrules: { required: true}},
{name:'Task_Description',index:'Task_Description',width:90, edittype: "textarea",editoptions:{rows:"3",cols:"21"},search: false,editable: true,editrules: { required: true}, classes: "textInDiv"},
{name:'Task_hrs',index:'taskhrs', width:20,search:false,editrules: { required: true,number:true},editable: true,editoptions:{size:"20",maxlength:"30"},editrules: { required: true}},
{name:'Task_Status',index:'tstatus',searchoptions: { sopt: ['eq','ne']},searchoptions:{ value: getAllSelectOptions() }, width:25, editable: true,search:true,editrules: { required: true}, editoptions:{value: getAllSelectOptions()},edittype: "select", stype: "select"},
{name:'Task_Start_Time',sortable:false,search:false,width:30, editable:true,editrules: { required: true},formatter: "date", formatoptions: { newformat: "d/M/Y "} },
{name:'Task_End_Time',sortable:false,width:30,search:false, editable:true,editrules: { required: true},formatter: "date", formatoptions: { newformat: "d/M/Y "} },
// {name:'CreatedTimeStamp',sortable:false,width:30, editable:false,search:true,editrules: { required: true},formatter: "date", formatoptions: { newformat: "d/m/Y H:m:s"} },
// {name:'ModifyTimeStamp',sortable:false,width:30, editable:false,search:true,editrules: { required: true},formatter: "date", formatoptions: { newformat: "d/m/Y H:m:s"}},
],
});

Uncaught TypeError: Cannot read property 'rowactions' of undefined in jqGrid for formatter:'action'

I am using jqGrid V 4.6.0. and trying to implement grid with inline edit/delete functionality.I used formatter:'actions' for acheive this and also getting edit/delete icons in each row.But when i click on those icons i am getting following error in console :Uncaught TypeError: Cannot read property 'rowactions' of undefined and nothing happens in grid.same code and same example i've implemented before with jqGrid V4.4.4 and it worked well ,but in V4.6.0 i got this error.Please somebody help me.Thanks in advance :)
Code for reference:
jQuery("#theGrid").jqGrid({
url: '/Student/Grid',
datatype: "json",
colNames: ['Id', 'Firstname', 'Middlename', 'Lastname', 'Birthdate', 'Birthplace', 'State', 'Nationality', 'Religion', 'Ishandicaped ?', 'Actions'],
colModel: [
{ key: true, name: 'Id', sortable: true, resize: true, align: "center" },
{ key: false, name: 'FirstName', index: 'FirstName', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'MiddleName', index: 'MiddleName', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'LastName', index: 'LastName', editable: true, align: "center", editrules: { required: true } },
{
key: false, name: 'Birthdate', index: 'Birthdate', editable: true, align: "center", editrules: { required: true }, formatter: 'date', editoptions: {
dataInit: function (el) {
setTimeout(function () {
$(el).datepicker({
dateFormat: "dd-M-yy",
autoSize: true,
changeYear: true,
changeMonth: true,
showButtonPanel: true,
showWeek: true
});
}, 200);
}
}
},
{ key: false, name: 'Birthplace', index: 'Birthplace', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'State', index: 'State', editable: true, align: "center", edittype: "select", editoptions: { value: "GJ:Gujarat;MH:Maharashtra;DL:Delhi;BNG:Banglore;RJ:Rajasthan" }, editrules: { required: true } },
{ key: false, name: 'Nationality', index: 'Nationality', editable: true, align: "center", editrules: { required: true } },
{ key: false, name: 'Religion', index: 'Religion', editable: true, align: "center", editrules: { required: true } },
{
key: false, name: 'IsHandicaped', index: 'IsHandicaped', editable: true, align: "center", edittype: "checkbox", editoptions: { value: "True:False" }, formatter: Demo1
},
{
key: false,
name: 'Actions',
index: 'tax',
width: 80,
align: "center",
formatter: 'actions',
formatoptions: {
delOptions: { url: '/Student/Delete' }
}
}
],
rowNum: 10,
rownumbers: true,
autowidth: true,
rowList: [5, 10, 20],
pager: '#gridPager',
viewrecords: true,
sortorder: "desc",
reloadAfterSubmit: true,
altclass: 'table table-bordered table-striped',
jsonReader: {
repeatitems: false
},
caption:'Studentdata JqGrid V4.4.4',
editurl: '/Student/Edit',
mtype: "post",
height: '100%',
hiddengrid: false,
serializeRowData: function (postData) {
debugger;
// new row id is "new_row"
postData.Id == "jqg1" ? postData.oper = "add" : postData.oper = "add";
return postData;
},
afterSubmit: function (response, postdata) {
if (response.responseText == "") {
$(this).jqGrid('setGridParam',
{ datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after Add
return [true, ''];
} else {
$(this).jqGrid('setGridParam',
{ datatype: 'json' }).trigger('reloadGrid'); //Reloads the grid after Add
return [false, response.responseText];
}
}
}
});

Is it possible to show spinner while inline editing JQGrid?

I am using JQGrid. While inline editing the JQGrid and saving data to DB, it takes some time, during that time my page becomes inresponsive. So, during that timespan can I show spinner to show user that your edited data is "Updating..."
I am using the below Code for jqgrid init:
LoadProjectDetailsGrid = function () {
var myGrid = $('#jqgProjectLists');
myGrid.jqGrid("GridUnload");
myGrid.jqGrid({
url: '#Url.Action("GetProjectLists", "Config")',
editurl: '#Url.Action("UpdateProjectListGrid", "Config")',
datatype: 'json',
mtype: 'POST',
contentType: 'application/json; charset-utf-8',
colNames: ['ID', 'PJT', 'Full Name', 'Model Type', 'Pjt Code', 'Model State', 'Project Type', 'Dev. Department',
'Client Model Name1', 'Client Model Name2', 'Client Model Name3', 'Model Status', 'Action'],
colModel: [
{ name: 'Model_ID', index: 'Model_ID', width: 100, sortable: true, align: 'left', editable: false, search: false, hidden: true },
{ name: 'PJT_Nm', index: 'PJT_Nm', width: 150, sortable: true, align: 'left', editable: false, search: true, stype: 'text', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, searchrules: { required: true } },
{ name: 'Model_Nm', index: 'Model_Nm', width: 140, sortable: true, align: 'left', editable: false, search: true, stype: 'text', searchoptions: { sopt: ['cn', 'eq', 'ne'] }, searchrules: { required: true } },
{ name: 'Model_Type', index: 'Model_Type', width: 80, sortable: true, align: 'center', editable: false, search: false },
{ name: 'PJT_Code', index: 'PJT_Code', width: 100, sortable: true, align: 'left', editable: false, search: false, hidden: true },
{ name: 'Model_State', index: 'Model_State', width: 110, sortable: true, align: 'center', editable: false, search: false },
{ name: 'PJT_Type', index: 'PJT_Type', width: 100, sortable: true, align: 'center', editable: false, search: false },
{ name: 'Dev_Dept_Nm_En', index: 'Dev_Dept_Nm_En', width: 200, sortable: true, align: 'left', editable: false, search: false },
{ name: 'Client_Model_Nm1', index: 'Client_Model_Nm1', width: 120, sortable: true, align: 'left', editable: true, search: false, edittype: "text", editoptions: { size: "20", maxlength: "29" }},
{ name: 'Client_Model_Nm2', index: 'Client_Model_Nm2', width: 120, sortable: true, align: 'left', editable: true, search: false, edittype: "text", editoptions: { size: "20", maxlength: "29" }},
{ name: 'Client_Model_Nm3', index: 'Client_Model_Nm3', width: 120, sortable: true, align: 'left', editable: true, search: false, edittype: "text", editoptions: { size: "20", maxlength: "29" }},
{ name: 'Model_Status', index: 'Model_Status', width: 100, sortable: true, align: 'center', editable: true, search: false, edittype: 'checkbox', editoptions: { value: "Y:N" }},
{ name: 'Action', index: 'Action', width: 70, sortable: false, formatter: 'actions', viewable: false, search: false, formatoptions: { keys: true, editformbutton: false, editbutton: true, delbutton: false } }
],
pager: '#jqgProjectListPager',
rowNum: 10,
rowList: [10, 20, 30, 100],
sortname: 'PJT_Nm',
sortorder: "desc",
autowidth: true,
shrinkToFit: true,
viewrecords: true,
gridview: true,
loadonce: true,
rownumbers: true,
rownumWidth: 30,
height: 'auto',
width: 'auto',
caption: " " + "PROJECT LIST",
loadtext: "Loading ...",
emptyrecords: "No data to display!",
multiselect: false,
prmNames: { id: "Model_ID" },
cellsubmit: "remote",
});
// Navi(View, Add,...)search: false,
myGrid.jqGrid('navGrid', '#jqgProjectListPager', { add: false, edit: false, del: false, search: true, view: true, refresh: true },
//edit options
{
},
//add options
{},
//del options
{
},
//search options
{
searchOnEnter: true,
closeOnEscape: true,
reloadAfterSearch: true
},
// veiw options
{
width: 500, height: 'auto',
closeOnEscape: true,
beforeShowForm: function (form) {
},
afterShowForm: function (form) {
},
showHideColumn: function (form) {
}
}
);
$("#jqgProjectLists").jqGrid('inlineNav', '#jqgProjectListPager',
{
add: false,
edit: true,
editicon: "ui-icon-pencil",
save: true,
saveicon: "ui-icon-disk",
savetext : "Save",
cancel: true,
cancelicon: "ui-icon-cancel",
canceltext: "Cancel",
}
);
//handles the grid resize on window resize
ResizeJQGrid(myGrid, $(window));
}
In ConfigController
[AcceptVerbs(HttpVerbs.Post)]
public JsonResult UpdateProjectListGrid(ProjectListsDetails oProjectListRow)
{
_configMgr.UpdateProjectListGrid(oProjectListRow, CurrentCaUser);
JqGridDataRequest jqgdRequest = new JqGridDataRequest();
JqGridDataResponse response = _configMgr.GetProjectLists(jqgdRequest, oProjectListRow, CurrentCaUser);
var jsonData = new
{
total = response.TotalPages,
page = jqgdRequest.page,
records = response.TotalRecords,
rows = response.Rows
};
return Json(jsonData, JsonRequestBehavior.AllowGet);
}
Well, you can show your spinner on beforeSubmit event and hide your spinner on afterSubmit event in edit options section of your jqgrid difinition, but you can use some different events from documentation.
//edit options
{
beforeSubmit : function(postdata, formid) {
$("#your-spinner").show();
return[true,''];
},
afterSubmit : function(response, postdata)
{
$("#your-spinner").hide();
return [true,'']
}
},

Unable to get property 'stype' of undefined or null reference

I using jqgrid filtertoolbar. I'm having some 4 select filter in that. When i tried to select one of the values in any select box i'm getting the following error.
Unable to get property 'stype' of undefined or null reference
Is there any general error or missing value that i have done anywhere in my code.
//Code:
Sample of colModel:
colModel:
jQuery.ajax({
url: 'ManageCandidateDetails.aspx/GetAllCandidateDetails',
type: "POST",
dataType: "json",
contentType: "application/json; charset=utf-8",
success: function (data) {
// debugger;
genericResult = $.parseJSON(data.d);
// debugger;
jQuery("#CandidateDetailsGrid").jqGrid({
data: genericResult.candidateDetails,
datatype: "local",
// colNames: ['CandidateId', 'Email', 'Name'],
//colModel: [{ name: 'CandidateId', index: 'CandidateId', width: 75}, { name: 'Email', index: 'Email', width: 75 }, { name: 'Name', index: 'Name', width: 100}],
colNames: ['CandidateId', 'Name', 'Email', 'DOB', 'Gender', 'Qualification', 'Department', 'OtherQual', 'OtherDept', 'Exp(Years)', 'Exp(Months)', 'Mobile', 'Country', 'State', 'City', 'ZipCode', 'FilePath', 'Sel.Status', 'CreatedDate', 'ModifiedDate', 'ModifiedBy', 'Status', 'LastLoginTime'],
colModel: [{ name: 'CandidateId', index: 'CandidateId', width: 75, editable: true },
{ name: 'Name', index: 'Name', width: 100, editable: true },
{ name: 'Email', index: 'Email', width: 75, editable: true },
{ name: 'DOB', index: 'DOB', width: 50, editable: true, searchoptions: { dataInit: newDatePick }, editoptions: { dataInit: newDatePick} },
{ name: 'Gender', index: 'Gender', width: 50, editable: true },
{ name: 'Qualification', index: 'Qualification', width: 75, editable: true, stype: 'select', editoptions: { value: ":All;" + genericResult.qualification} },
{ name: 'Department', index: 'Department', width: 75, editable: true, stype: 'select', editoptions: { value: ":All;" + genericResult.department} },
{ name: 'OtherQual', index: 'OtherQual', width: 75, editable: true },
{ name: 'OtherDept', index: 'OtherDept', width: 75, editable: true },
{ name: 'ExperienceYears', index: 'ExperienceYears', width: 75, editable: true },
{ name: 'ExperienceMonths', index: 'ExperienceMonths', width: 75, editable: true },
{ name: 'Mobile', index: 'Mobile', width: 100, editable: true },
{ name: 'Country', index: 'Country', width: 100, editable: true, stype: 'select', formatter: 'select', edittype: 'select',
searchoptions: {
value: allCountries, stype: 'select'
},
editoptions: {
value: allCountries,
dataInit: removeTheOptionAll,
dataEvents: [
{ type: "change", fn: function (e) { changeStateSelect($(e.target).val(), e.target); } }
]
}
},
{ name: 'state', index: 'state', width: 100, formatter: "select", stype: "select",
editable: true, edittype: "select",
editoptions: { value: allStates, dataInit: removeTheOptionAll },
searchoptions: { value: allStates }
},
{ name: 'City', index: 'City', width: 50, editable: true },
{ name: 'ZipCode', index: 'ZipCode', width: 50, editable: true },
{ name: 'FilePath', formatter: function () { return "<img src='../Images/error.png' alt='my image' />"; }, unformat: imageUnFormat, index: 'FilePath', width: 50 },
{ name: 'SelectedStatus', index: 'SelectedStatus', width: 75, edittype: 'checkbox', formatter: 'checkbox', editable: true, editoptions: { value: "1:Yes;0:No" }, stype: 'select', searchoptions: { sopt: ['eq'], value: "All:All;1:Yes;0:No"} },
{ name: 'CreatedDate', index: 'CreatedDate', width: 75, formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y h:i A" },
searchoptions: { dataInit: datePick }, editoptions: { dataInit: datePick }
},
{ name: 'ModifiedDate', index: 'ModifiedDate', width: 75, formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y h:i A" },
searchoptions: { dataInit: datePick }, editoptions: { dataInit: datePick }
},
{ name: 'Modifiedby', index: 'ModifiedBy', width: 75 },
{ name: 'Status', index: 'Status', width: 50, edittype: 'checkbox', editable: true, stype: 'select', searchoptions: { value: "All:All;1:Yes;2:No"} },
{ name: 'LastLoginTime', index: 'LastLoginTime', width: 75, formatoptions: { srcformat: "ISO8601Long", newformat: "d/m/Y h:i A" },
searchoptions: { dataInit: datePick, attr: { title: 'Select Date'} }, editoptions: { dataInit: datePick }
}],
rowNum: 10,
mtype: 'GET',
loadonce: true,
rowList: [10, 20, 30],
pager: '#CandidateDetailsGridPager',
sortname: 'CandidateId',
viewrecords: true,
caption: "Candidate Details",
ignoreCase: true,
gridview: true,
rownumbers: true
});
jQuery("#CandidateDetailsGrid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
$('#CandidateDetailsGrid').jqGrid('navGrid', '#CandidateDetailsGridPager',
{
edit: true,
add: true,
del: true,
search: true,
searchtext: "Search",
addtext: "Add",
edittext: "Edit",
deltext: "Delete"
},
{ // edit option
beforeShowForm: function (form) {
}
},
{ // add option
addcaption: 'Add Candidate Detail',
beforeShowForm: function (form) {
//debugger;
$("#myFormError").remove();
$('#tr_LastLoginTime', form).hide();
$('#tr_CandidateId', form).hide();
$('#tr_Modifiedby', form).hide();
$('#tr_ModifiedDate', form).hide();
$('#tr_CreatedDate', form).hide();
},
onclickSubmit: function (response, postData) {
debugger;
$("#FormError").text("");
$("<tr id='myFormError'><td colspan='2'><div style='background-color:green;color:white; font-weight:bold; width:100%;padding-left:5px;'>Success</div></td></tr>").insertAfter("#FormError");
}
}
);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert("Request: " + XMLHttpRequest.toString() + "\n\nStatus: " + textStatus + "\n\nError: " + errorThrown);
}
});
//Unformat the image during the edit.
function imageUnFormat(cellvalue, options, cell) {
return cellvalue
}

Resources