Related
Using simple built in functionality in Jqgrid where if you set the column property editable to true, it should pop up a form with that field text to be editable. Everything is fine except that the form coming up is not clickable.
Please point me what is wrong with this code before I resort to manual custom form.
$('#tblRecipes').jqGrid({
datatype: 'json',
mtype: 'POST',
url: 'ResultsEditorAjax/GetSampleRecipeValues',
editurl: 'ResultsEditorAjax/SaveSampleRecipeValue',
jsonReader: als.common.jqgrid.jsonReader('Analyte'),
colModel: [
{ name: 'Folderno', index: 'Folderno', sortable: false, hidden: true },
{ name: 'Ordno', index: 'Ordno', sortable: false, hidden: true },
{ name: 'Pcupno', index: 'Pcupno', sortable: false, hidden: true },
{ name: 'Taskcd', index: 'Taskcd', sortable: false, hidden: true },
{ name: 'Analyte', index: 'Analyte', label: 'Analyte', width: 10, sortable: false },
{ name: 'OldFinal', index: 'OldFinal', label: 'Old Value', width: 10, sortable: false },
{
name: 'NewFinal', index: 'NewFinal', label: 'New Value', width: 10,
sortable: false, editable: true, edittype: 'text',
editrules: { custom: true, custom_func: als.webview.analyteresults.validateRecipeValue }
},
{ name: 'Units', index: 'Units', label: 'Units', width: 5 },
{ name: 'Min', index: 'Min', sortable: false, hidden: true },
{ name: 'Max', index: 'Max', sortable: false, hidden: true },
{ name: 'Rounding', index: 'Rounding', sortable: false, hidden: true }
],
caption: '',
height: 200,
width: 400,
hidegrid: false,
shrinkToFit: true,
scroll: true,
rowNum: 10000,
viewrecords: true,
emptyrecords: '',
altRows: true,
pager: '#pagerRecipes',
onSelectRow:
function (rowId) {
},
gridComplete: function () {
},
loadComplete: function (data) {
}
}).jqGrid('navGrid', '#pagerRecipes', {
add: false,
edit: true,
del: false,
refresh: false,
search: false
},
{ // edit
editCaption: 'Edit Value',
mtype: 'POST',
contentType: 'application/x-www-form-urlencoded; charset=utf-8',
resize: false,
modal: true,
// width: 680,
viewPagerButtons: false,
recreateForm: true,
closeAfterEdit: true,
closeOnEscape: true,
beforeInitData: function () {
// $('#grdQcGroups').jqGrid('setColProp', 'Id', { editable: false });
},
serializeEditData: function (postdata) {
// postdata.Id = postdata.id;
return postdata;
}
);
I have 2 queries on binding jgGrid in MVC application..
1. I am unable to bind jsonData which is coming from controller on Success callback method
2. On button click i am loading jqgrid from server data, but when i click 2nd time it is not firing my server code(which is in controller), only first time it is executing the server code.
below is my javascript code
function buildGrid() {
// setup custom parameter names to pass to server prmNames: { search: "isSearch", nd: null, rows: "numRows", page: "page", sort: "sortField", order: "sortOrder" }, // add by default to avoid webmethod parameter conflicts postData: { searchString: '', searchField: '', searchOper: '' }, // setup ajax call to webmethod datatype: function(postdata) { mtype: "GET", $.ajax({ url: 'PageName.aspx/getGridData', type: "POST", contentType: "application/json; charset=utf-8", data: JSON.stringify(postdata), dataType: "json", success: function(data, st) { if (st == "success") { var grid = jQuery("#list")[0]; grid.addJSONData(JSON.parse(data.d)); } }, error: function() { alert("Error with AJAX callback"); } }); }, // this is what jqGrid is looking for in json callback jsonReader: { root: "rows", page: "page", total: "totalpages", records: "totalrecords", cell: "cell", id: "id", //index of the column with the PK in it userdata: "userdata", repeatitems: true }, colNames: ['Id', 'First Name', 'Last Name'], colModel: [ { name: 'id', index: 'id', width: 55, search: false }, { name: 'fname', index: 'fname', width: 200, searchoptions: { sopt: ['eq', 'ne', 'cn']} }, { name: 'lname', index: 'lname', width: 200, searchoptions: { sopt: ['eq', 'ne', 'cn']} } ], rowNum: 10, rowList: [10, 20, 30], pager: jQuery("#pager"), sortname: "fname", sortorder: "asc", viewrecords: true, caption: "Grid Title Here" }).jqGrid('navGrid', '#pager', { edit: false, add: false, del: false }, {}, // default settings for edit {}, // add {}, // delete { closeOnEscape: true, closeAfterSearch: true}, //search {} ) });
var grid = $("#jQGrid"); $("#jQGrid").jqGrid({
//setup custom parameter names to pass to server
prmNames: { search: "isSearch", nd: null, rows: "numRows", page: "page", sort: "sortField", order: "sortOrder" },
// add by default to avoid webmethod parameter conflicts
postData: {
'ddlDSVIN': function () {
return $('#ddlDevice :selected').val();
},
'search': function () { return $("#searchId").val(); },
'OEMType': function () { return $('#ddlOEM :selected').text(); },
'frmDate': function () { return fromDate.toDateString(); },
'toDate': function () { return toDate.toDateString(); }
},
datatype: function(postdata) { mtype: "POST",
$.ajax({ url: '/DataIn/DataInSearchResult/', type: "POST", contentType: "application/json; charset=utf-8",
//data: postData,
datatype: "json",
success: function(data, st) {
if (st == "success") {
var grid = jQuery("#jQGrid")[0]; grid.addJSONData(JSON.parse(data.d));
var container = grid.parents('.ui-jqgrid-view');
$('#showgrid').show();
$('#jQGrid').show();
$('#divpager').show();
//container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').show();
$("#hideandshow").show();
$("#lblTotal").html($(this).getGridParam("records") + " Results");
$("#hideandshow2").hide();
}
},
error: function(error) { alert("Error with AJAX callback" + error); } }); }, // this is what jqGrid is looking for in json callback
jsonReader: { root: "rows", page: "page", total: "totalpages", records: "totalrecords", cell: "cell", id: "id", //index of the column with the PK in it
userdata: "userdata", repeatitems: true
},
// url: '/DataIn/DataInSearchResult/',
colNames: ["PayloadCorrelationId", "Asset", "Type", "DateReported", "ErrorType", "Error", "Latitude", "Longitude", "Payloadurl"],
colModel: [
{ name: 'CorrelationId', index: 'CorrelationId', jsonmap: 'CorrelationId', hidden: true, width: 2, key: true },
// { name: "", index:'', editable: true, edittype: "checkbox", width: 45, sortable: false, align: "center", formatter: "checkbox", editoptions: { value: "True:False" }, formatoptions: { disabled: false } },
{ name: 'Device', jsonmap: 'Device', width: '65px' },
{ name: 'Type', jsonmap: 'Type', width: '65px' },
{ name: 'DateReported', jsonmap: 'DateReported', width: '100px' },
{ name: 'ErrorType', jsonmap: 'ErrorType', width: '85px' },
{ name: 'Error', jsonmap: 'Error', width: '160px' },
{ name: 'Latitude', jsonmap: 'Latitude', width: '78px' }, { name: 'Longitude', jsonmap: 'Longitude', width: '78px' },
{ name: 'Payloadurl', jsonmap: 'Payloadurl', width: '180px', formatter: 'showlink', formatoptions: { baseLinkUrl: 'javascript:', showAction: "Link('", addParam: "');" } }],
rowNum: 10, rowList: [10, 20, 30],
pager: jQuery("#divpager"), sortorder: "asc",
viewrecords: true, caption: "Grid Title Here"
}).jqGrid('navGrid', '#divpager', { edit: false, add: false, del: false }, {}, // default settings for edit
{}, // add
{}, // delete
{ closeOnEscape: true, closeAfterSearch: true}, //search
{ });
}
above method is called in document.ready function
$(documen).ready(function() {
("#buttonclick").click(function() {
buildGrid();
});
});
Can you please what was wrong with my code.. because i need to search on button click by passing the paramerter's to service method using postData {},but how to send this postData to url and bind the result to JqGrid.
thanks
Raj.
Usage of datatype as is not recommend way. Instead of that one can use datatype: "json". It informs that jqGrid should make for you the Ajax request using $.ajax method. One can use additional options of jqGrid to specify the options of the underlying $.ajax request.
The next problem you have in the code
$(documen).ready(function() {
$("#buttonclick").click(function() {
buildGrid();
});
});
The function buildGrid will be called every time if the user click on #buttonclick button. The problem is that you have initially the empty table
<table id="jQGrid"></table>
on your page, but after creating the grid (after the call $("#jQGrid").jqGrid({...});), the empty table will be converted in relatively complex structure of dives and tables (see the picture). The second call on non-empty table will be just ignored by jqGrid. It's the reason why the 2nd click on the button #buttonclick do nothing.
You can solve the problem in two ways. The first would be including $("#buttonclick").jqGrid("GridUnload"); before creating the grid. It would be destroy the grid and recreate the initial empty table. The second way os a little better. You can not destroy the grid at the second time, but to call $("#buttonclick").trigger("reloadGrid"); instead. It will force making new Ajax request to the server.
Minimal changing of your original code will follow us to about the following:
$(documen).ready(function() {
var $grid = $("#jQGrid");
$grid.jqGrid({
//setup custom parameter names to pass to server
prmNames: {
search: "isSearch",
nd: null,
rows: "numRows",
sort: "sortField",
order: "sortOrder"
},
// add by default to avoid webmethod parameter conflicts
postData: {
ddlDSVIN: function () {
return $('#ddlDevice').val();
},
search: function () {
return $("#searchId").val();
},
OEMType: function () {
return $('#ddlOEM')
.find("option")
.filter(":selected")
.text();
},
frmDate: function () {
return fromDate.toDateString();
},
toDate: function () {
return toDate.toDateString();
}
},
mtype: "POST",
url: '/DataIn/DataInSearchResult/',
datatype: "json",
ajaxGridOptions: { contentType: "application/json; charset=utf-8" },
loadComplete: function () {
$('#showgrid').show();
$('#jQGrid').show();
$('#divpager').show();
$("#hideandshow").show();
$("#lblTotal").html($(this).getGridParam("records") + " Results");
$("#hideandshow2").hide();
},
jsonReader: {
root: root: function (obj) {
return typeof obj.d === "string" ?
$.parseJSON(obj.d) :
obj.d;
},
total: "totalpages",
records: "totalrecords"
},
colNames: ["PayloadCorrelationId", "Asset", "Type", "DateReported", "ErrorType", "Error", "Latitude", "Longitude", "Payloadurl"],
colModel: [
{ name: 'CorrelationId', hidden: true, width: 2, key: true },
// { name: "", index:'', editable: true, edittype: "checkbox", width: 45, sortable: false, align: "center", formatter: "checkbox", editoptions: { value: "True:False" }, formatoptions: { disabled: false } },
{ name: 'Device', width: 65 },
{ name: 'Type', width: 65 },
{ name: 'DateReported', width: 100 },
{ name: 'ErrorType', width: 85 },
{ name: 'Error', width: 160 },
{ name: 'Latitude', width: 78 },
{ name: 'Longitude', width: 78 },
{ name: 'Payloadurl', width: 180, formatter: 'showlink', formatoptions: { baseLinkUrl: 'javascript:', showAction: "Link('", addParam: "');" } }],
rowNum: 10,
rowList: [10, 20, 30],
pager: "#divpager",
sortorder: "asc",
viewrecords: true,
caption: "Grid Title Here"
}).jqGrid('navGrid', '#divpager', { edit: false, add: false, del: false },
{}, // default settings for edit
{}, // add
{}, // delete
{ closeOnEscape: true, closeAfterSearch: true} //search
);
$("#buttonclick").click(function() {
$grid.trigger("reloadGrid");
});
});
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.
I'm trying to load the subgrid data from the main grid. The main grid loads fine but When I click on a row the subgrid data does not load.
Don't know what I'm missing. Please help.
Below is the code I'm using.
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
var mydata = [],
grid = $("#list");
var mainGridPrefix = "s_";
grid.jqGrid({
url: '${recordsUrl}',
datatype: 'json',
ignoreCase: true,
mtype: 'GET',
colNames: ['Global Search', 'serverId', 'DeviceName', 'Description', 'Console', 'OS', 'Business Unit', 'Model', 'Manufacturer', 'Serial Number', 'LifeCycle', 'Tier'],
colModel: [{
name: 'globalSearch',
index: 'globalSearch',
width: 50,
hidden: true,
searchoptions: {
searchhidden: true
}
}, {
name: 'serverId',
index: 'serverId',
width: 10,
hidden: true
}, {
name: 'deviceName',
index: 'deviceName',
width: 50
}, {
name: 'serverDesc',
index: 'serverDesc',
width: 70
}, {
name: 'console',
index: 'console',
width: 50
}, {
name: 'groupName',
index: 'groupName',
width: 40
}, {
name: 'businessUnit',
index: 'businessUnit',
width: 30
}, {
name: 'model',
index: 'model',
width: 30,
editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true,
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}
}, {
name: 'manufacturer',
index: 'manufacturer',
width: 30,
editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true,
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}
}, {
name: 'serialNumber',
index: 'serialNumber',
width: 30,
editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true,
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}
}, {
name: 'lifeCycle',
index: 'lifeCycle',
width: 30,
editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true,
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}
}, {
name: 'tier',
index: 'tier',
width: 30,
editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true,
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}
}],
postData: {},
rowNum: 10,
rowList: [10, 20, 40, 60],
height: 'auto',
autowidth: true,
rownumbers: true,
pager: '#pager',
sortname: 'deviceName',
viewrecords: true,
sortorder: "asc",
caption: "Records",
emptyrecords: "Empty records",
idPrefix: mainGridPrefix,
loadonce: true,
loadComplete: function () {},
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
cell: "cell",
id: "serverId"
},
subGrid: true,
beforeProcessing: function (data) {
var rows = data.rows,
l = rows.length,
i, item, subgrids = {};
for (i = 0; i < l; i++) {
item = rows[i];
if (item.apps) {
subgrids[item.id] = item.apps;
}
}
data.userdata = subgrids;
},
subGridRowExpanded: function (subgridDivId, rowId) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
subgrids = $(this).jqGrid("getGridParam", "userData");
$subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
$subgrid.jqGrid({
datatype: "local",
data: subgrids[pureRowId],
colNames: ["App Id", "Desc"],
colModel: [{
name: "appId"
}, {
name: "applicationDesc"
}],
sortname: "applicationDesc",
height: "100%",
rowNum: 10000,
autoencode: true,
autowidth: true,
jsonReader: {
repeatitems: false,
id: "appId"
},
gridview: true,
idPrefix: rowId + "_"
});
}
});
$("#search").click(function () {
var searchFiler = $("#filter").val(),
f;
if (searchFiler.length === 0) {
grid[0].p.search = false;
$.extend(grid[0].p.postData, {
filters: ""
});
}
f = {
groupOp: "OR",
rules: []
};
f.rules.push({
field: "globalSearch",
op: "cn",
data: searchFiler
});
f.rules.push({
field: "deviceName",
op: "cn",
data: searchFiler
});
grid[0].p.search = true;
$.extend(grid[0].p.postData, {
filters: JSON.stringify(f)
});
grid.trigger("reloadGrid", [{
page: 1,
current: true
}]);
});
grid.jqGrid('navGrid', '#pager', {
edit: false,
add: false,
del: false,
search: true,
view: true
}, {}, {}, {}, { // search
sopt: ['cn', 'eq', 'ne', 'lt', 'gt', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true
}, { // vew options
beforeShowForm: function (form) {
$("tr#trv_id", form[0]).show();
},
afterclickPgButtons: function (whichbutton, form, rowid) {
$("tr#trv_id", form[0]).show();
}
});
grid.navButtonAdd('#pager', {
caption: "Add",
buttonicon: "ui-icon-plus",
onClickButton: addRow,
position: "last",
title: "",
cursor: "pointer"
});
grid.navButtonAdd('#pager', {
caption: "Edit",
buttonicon: "ui-icon-pencil",
onClickButton: editRow,
position: "last",
title: "",
cursor: "pointer"
});
grid.navButtonAdd('#pager', {
caption: "Delete",
buttonicon: "ui-icon-trash",
onClickButton: deleteRow,
position: "last",
title: "",
cursor: "pointer"
});
});
//]]>
you forgot to add the index: information for the colModel in the subgrid, you also need to pay attention to capitalization if the name is capitalized then so should be the index, that way jqgrid knows that where it needs to put the data. Here is the fixed code and also a link to a working example
//<![CDATA[
$(document).ready(function () {
var mydata = [{
globalsearch: "1",
serverId: "Test Name1",
deviceName: "Test Address1",
Console: "Test Date1"
}, {
globalsearch: "2",
serverId: "Test Name2",
deviceName: "Test Address2",
Console: "Test Date2"
}, {
globalsearch: "3",
serverId: "blah",
deviceName: "hello",
Console: "basketball"
}];
grid = $("#list");
var mydata2 = [{
AppId: "1",
Desc: "Test Name1"
}, {
AppId: "2",
Desc: "Test Name2"
}, {
AppId: "3",
Desc: "blah"
}];
var mainGridPrefix = "s_";
grid.jqGrid({
datatype: 'local',
data: mydata,
colNames: ['globalsearch', 'serverId', 'deviceName', 'Description', 'Console', 'OS', 'Business Unit', 'Model', 'Manufacturer', 'Serial Number', 'LifeCycle', 'Tier'],
colModel: [{
name: 'globalsearch',
index: 'globalsearch',
width: 50,
}, {
name: 'serverId',
index: 'serverId',
width: 10,
hidden: false
}, {
name: 'deviceName',
index: 'deviceName',
width: 50
}, {
name: 'serverDesc',
index: 'serverDesc',
width: 70
}, {
name: 'Console',
index: 'Console',
width: 50
}, {
name: 'groupName',
index: 'groupName',
width: 40
}, {
name: 'businessUnit',
index: 'businessUnit',
width: 30
}, {
name: 'model',
index: 'model',
width: 30,
editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true,
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}
}, {
name: 'manufacturer',
index: 'manufacturer',
width: 30,
editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true,
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}
}, {
name: 'serialNumber',
index: 'serialNumber',
width: 30,
editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true,
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}
}, {
name: 'lifeCycle',
index: 'lifeCycle',
width: 30,
editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true,
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}
}, {
name: 'tier',
index: 'tier',
width: 30,
editable: true,
editrules: {
required: true,
edithidden: true
},
hidden: true,
editoptions: {
dataInit: function (element) {
$(element).attr("readonly", "readonly");
}
}
}],
rowNum: 10,
rowList: [10, 20, 40, 60],
rownumbers: true,
pager: '#pager',
sortname: 'deviceName',
viewrecords: true,
sortorder: "asc",
caption: "Records",
height: 'auto',
autowidth: true,
loadComplete: function () {},
subGrid: true,
beforeProcessing: function (data) {
var rows = data.rows,
l = rows.length,
i, item, subgrids = {};
for (i = 0; i < l; i++) {
item = rows[i];
if (item.apps) {
subgrids[item.id] = item.apps;
}
}
data.userdata = subgrids;
},
subGridRowExpanded: function (subgridDivId, rowId) {
var $subgrid = $("<table id='" + subgridDivId + "_t'></table>"),
pureRowId = $.jgrid.stripPref(mainGridPrefix, rowId),
subgrids = $(this).jqGrid("getGridParam", "userData");
$subgrid.appendTo("#" + $.jgrid.jqID(subgridDivId));
$subgrid.jqGrid({
datatype: "local",
data: mydata2,
colNames: ["AppId", "Desc"],
colModel: [{
name: "AppId",
index: "AppId"
}, {
name: "Desc",
index: "Desc"
}],
sortname: "applicationDesc",
height: "100%",
rowNum: 10000,
autoencode: true,
autowidth: true,
jsonReader: {
repeatitems: false,
id: "appId"
},
gridview: true,
idPrefix: rowId + "_"
});
}
});
$("#search").click(function () {
var searchFiler = $("#filter").val(),
f;
if (searchFiler.length === 0) {
grid[0].p.search = false;
$.extend(grid[0].p.postData, {
filters: ""
});
}
f = {
groupOp: "OR",
rules: []
};
f.rules.push({
field: "globalSearch",
op: "cn",
data: searchFiler
});
f.rules.push({
field: "deviceName",
op: "cn",
data: searchFiler
});
grid[0].p.search = true;
$.extend(grid[0].p.postData, {
filters: JSON.stringify(f)
});
grid.trigger("reloadGrid", [{
page: 1,
current: true
}]);
});
grid.jqGrid('navGrid', '#pager', {
edit: false,
add: false,
del: false,
search: true,
view: true
}, {}, {}, {}, { // search
sopt: ['cn', 'eq', 'ne', 'lt', 'gt', 'bw', 'ew'],
closeOnEscape: true,
multipleSearch: true,
closeAfterSearch: true
}, { // vew options
beforeShowForm: function (form) {
$("tr#trv_id", form[0]).show();
},
afterclickPgButtons: function (whichbutton, form, rowid) {
$("tr#trv_id", form[0]).show();
}
});
grid.navButtonAdd('#pager', {
caption: "Add",
buttonicon: "ui-icon-plus",
onClickButton: addRow,
position: "last",
title: "",
cursor: "pointer"
});
grid.navButtonAdd('#pager', {
caption: "Edit",
buttonicon: "ui-icon-pencil",
onClickButton: editRow,
position: "last",
title: "",
cursor: "pointer"
});
grid.navButtonAdd('#pager', {
caption: "Delete",
buttonicon: "ui-icon-trash",
onClickButton: deleteRow,
position: "last",
title: "",
cursor: "pointer"
});
});
//]]>
<table id="list"></table>
<div id="pager"></div>
I am using a JqGrid and subgrid. I have to get the parent id from the subgrid rowId.
Kindly help me out in solving this..
I am pasting my code below.
//This is Grid
$("#DayEvents").jqGrid({
url: 'Event.asmx/GetDayForEvents',
datatype: 'json',
mtype: 'POST',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: PrepareGridPostData,
jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
colNames: ['day', 'DayID'],
colModel: [{ name: 'Day', index: 'Day', editable: false, width: 550, align: 'center', sortable: false },
{ name: 'DayID', index: 'DayID', editable: false, width: 550, align: 'center', sortable: false, hidden: true }
],
rowNum: 10,
rowList: [5, 10, 15, 20],
// pager: "#pager2",
viewrecords: true,
gridview: true,
width: '100%',
autowidth: false,
shrinkToFit: false,
height: '331px',
// pgbuttons: true,
hoverrows: false,
//caption: 'Days',
subGrid: true,
subGridUrl: 'Event.asmx/GetSubGridDay',
subGridOptions: {
"plusicon": "ui-icon-triangle-1-e",
"minusicon": "ui-icon-triangle-1-s",
"openicon": "ui-icon-arrowreturn-1-e",
//expand all rows on load
"expandOnLoad": false
},
//This is Subgrid
subGridRowExpanded: function(subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
//alert(subgrid_table_id);
$("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><a href=# id='AddSession' OnClick='addRow(\"" + subgrid_table_id + "\");'>add session</a><div id='" + pager_id + "' class='scroll'></div>");
//debugger;
jQuery("#" + subgrid_table_id).jqGrid({
url: 'Event.asmx/GetSubGridDay',
datatype: 'json',
mtype: 'POST',
cellEdit: true,
cellsubmit: 'clientarray',
onCellSelect: GridCellClick,
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
serializeGridData: PrepareGridPostData,
jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
colNames: ['session', 'start time', 'end time'],
colModel: [
{ name: 'SessionName', index: 'SessionName', width: 90, formatter: 'text', align: 'center', edittype: 'text', editable: true, editoptions: { size: 10, maxlength: 15, dataEvents: [{ type: 'change', fn: GetRemainingEffort }, { type: 'focus', fn: clearCellValues }, { type: 'blur', fn: resetCellValues}]} },
{ name: 'StartTime', index: 'StartTime', width: 90, formatter: 'number', align: 'center', edittype: 'text', editable: true, editoptions: { size: 10, maxlength: 15, dataEvents: [{ type: 'change', fn: GetRemainingEffort }, { type: 'focus', fn: clearCellValues }, { type: 'blur', fn: resetCellValues}]} },
{ name: 'EndTime', index: 'EndTime', width: 90, formatter: 'number', align: 'center', edittype: 'text', editable: true, editoptions: { size: 10, maxlength: 15, dataEvents: [{ type: 'change', fn: GetRemainingEffort }, { type: 'focus', fn: clearCellValues }, { type: 'blur', fn: resetCellValues}]} }
],
rowNum: 10,
height: 'auto',
autowidth: true
});
}
});
Inside of callback function subGridRowExpanded you can use this variable which is initialized to the DOM of the grid (DOM of the ). So you can get id of the parent grid by this.id.
check for documentation of subGridRowExpanded