Hi 

I got it thanks to your help and other forum topics I found on your valuable site. But there is a problem.  My design includes a pager on subgrid that should also allow edit and add rows. The basics work ok, but when I expand a row on main grid then the pager of main row does not move to what its new position should be, for example, the main grid has ten rows and the pager appears after tenth row.  When I click on any row to see correspondant subgrid, all rows in main grid move but main pager does not staying in the middle of the page. In any case I’m pasting the code as it’s working now:

 

$(document).ready(function () {
jQuery(“#grdParam”).jqGrid
(
{
url: ‘JqGridTest2.aspx/GetDataTableGroup’,
datatype: ‘json’,
//inicio
ajaxGridOptions:
{
contentType: “application/json”,
success: function (data, textStatus) {
if (textStatus == “success”) {
var thegrid = $(“#grdParam”)[0];
thegrid.addJSONData(data.d);
thegrid.grid.hDiv.loading = false;
switch (thegrid.p.loadui) {
case “disable”:
break;
case “enable”:
$(“#load_” + thegrid.p.id).hide();
break;
case “block”:
$(“#lui_” + thegrid.p.id).hide();
$(“#load_” + thegrid.p.id).hide();
break;
}
}
}
},

//fin
mtype: ‘POST’,
height: 250,
colNames: ,
colModel: [
{
name: ‘GroupID’,
index: ‘GroupID’,
width: 40,
editable: true,
editoptions:
{
readonly: true,
size: 10
},
editrules:
{
edithidden: true
}
},
{
name: ‘SubGroup’,
index: ‘SubGroup’,
width: 40,
editable: true,
editoptions: {
readonly: true,
size: 10
},
align: “left”,
size: 100,
editrules: { edithidden: true }
},
{
name: ‘ParameterName’,
index: ‘ParameterName’,
width: 100,
align: “left”,
editable: true,
size: 100
},
{
name: ‘Value’,
index: ‘Value’,
width: 100,
align: “left”,
editable: true,
size: 100
},
{
name: ‘Value2’,
index: ‘Value2’,
width: 100,
align: “left”,
editable: true,
size: 100
},
{
name: ‘UserInsert’,
index: ‘UserInsert’,
width: 100,
align: “left”,
editable: false,
size: 100
},
{
name: ‘InsertDate’,
index: ‘InsertDate’,
width: 100,
align: “left”,
editable: false,
size: 100,
sorttype: ‘date’,
datefmt: ‘Y-m-d’
},
{
name: ‘UserUpdate’,
index: ‘UserUpdate’,
width: 100,
align: “left”,
editable: false,
size: 100
},
{
name: ‘UpdateDate’,
index: ‘UpdateDate’,
width: 100,
align: “left”,
editable: false,
size: 100,
sorttype: ‘date’,
datefmt: ‘yyyy-mm-dd’
},
{
name: ‘Active’,
index: ‘Active’,
width: 100,
align: “left”,
edittype: “checkbox”,
editable: true,
size: 100
}
],
pager: ‘#pager’,
rowNum: 10,
rowList: [10, 20, 30],
sortname: ‘GroupID’,
sortorder: ‘asc’,
subGrid: true,
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id;
subgrid_table_id = subgrid_id + “_t”;
var pager_id;
pager_id = “p_” + subgrid_table_id;
jQuery(“#” + subgrid_id).html(“

“);
jQuery(“#” + subgrid_table_id).jqGrid(
{
url: ‘JqGridTest2.aspx/GetDataTableSubGroup’,
data: “{‘pPageSize’:'” + $(“#” + subgrid_table_id).getGridParam(“rowNum”) +
“‘,’pCurrentPage’:'” + $(“#” + subgrid_table_id).getGridParam(“page”) +
“‘,’pSortColumn’:'” + $(“#” + subgrid_table_id).getGridParam(“sortname”) +
“‘,’pSortOrder’:'” + $(“#” + subgrid_table_id).getGridParam(“sortorder”) + “‘}”, //PageMethod Parametros de entrada
postData:
{
GroupID: row_id
},
datatype: ‘json’,
mtype: ‘POST’,
ajaxGridOptions:
{
contentType: “application/json”,
success: function (data, textStatus) {
if (textStatus == “success”) {
var thegrid = $(“#” + subgrid_table_id)[0];
thegrid.addJSONData(data.d);
thegrid.grid.hDiv.loading = false;
switch (thegrid.p.loadui) {
case “disable”:
break;
case “enable”:
$(“#load_” + thegrid.p.id).hide();
break;
case “block”:
$(“#lui_” + thegrid.p.id).hide();
$(“#load_” + thegrid.p.id).hide();
break;
}
}
}
},
height: 150,
colNames:
[
‘Grupo’,
‘Sub Grupo’,
‘Nombre’,
‘Valor 1’,
‘Valor 2’,
‘Usuario Insercion’,
‘Fecha Insercion’,
‘Usuario Actualizacion’,
‘Fecha Actualizacion’,
‘Active’
],
colModel:
[
{
name: ‘GroupID’,
index: ‘GroupID’,
width: 40,
editable: true,
editoptions:
{
readonly: true,
size: 10
},
editrules: { edithidden: true }
},
{
name: ‘SubGroup’,
index: ‘SubGroup’,
width: 40,
editable: true,
editoptions:
{
readonly: true,
size: 10
},
align: “left”,
size: 100,
editrules: { edithidden: true }
},
{
name: ‘ParameterName’,
index: ‘ParameterName’,
width: 100,
align: “left”,
editable: true,
size: 100
},
{
name: ‘Value’,
index: ‘Value’,
width: 100,
align: “left”,
editable: true,
size: 100
},
{
name: ‘Value2’,
index: ‘Value2’,
width: 100,
align: “left”,
editable: true,
size: 100
},
{
name: ‘UserInsert’,
index: ‘UserInsert’,
width: 100,
align: “left”,
editable: false,
size: 100
},
{
name: ‘InsertDate’,
index: ‘InsertDate’,
width: 100,
align: “left”,
editable: false,
size: 100,
sorttype: ‘date’,
datefmt: ‘Y-m-d’
},
{
name: ‘UserUpdate’,
index: ‘UserUpdate’,
width: 100,
align: “left”,
editable: false,
size: 100
},
{
name: ‘UpdateDate’,
index: ‘UpdateDate’,
width: 100,
align: “left”,
editable: false,
size: 100,
sorttype: ‘date’,
datefmt: ‘yyyy-mm-dd’
},
{
name: ‘Active’,
index: ‘Active’,
width: 100,
align: “left”,
edittype: “checkbox”,
editable: true,
size: 100
}
],
pager: pager_id,
sortname: ‘GroupID’,
sortorder: ‘asc’,
multiboxonly: false,
viewrecords: true,
imgpath: ‘JQGridReq/images’,
contentType: “application/json; charset=utf-8”,
serializeGridData: function (data) {
return $.toJSON(data);
}
}).navGrid(“#” + pager_id,
{
edit: true,
add: true,
del: true
},
{
url: “JqGridTest2.aspx/EditData”,
closeAfterEdit: true
},
{
url: “JqGridTest2.aspx/EditData”,
closeAfterAdd: true,
beforeShowForm: function (formid) {
//jQuery(“#ParameterName”).focus();
//$(“#ParameterName”).focus();
jQuery(“#GroupID”).val(“AUTOMATIC VALUE”);
jQuery(“#SubGroup”).val(“0”);
},
afterShowForm: function (formid) {
$(“#ParameterName”).focus();
}
},
{
url: “JqGridTest2.aspx/DeleteData”
})
},
multiboxonly: false,
viewrecords: true,
imgpath: ‘JQGridReq/images’,
serializeGridData: function (data) {
return $.toJSON(data);
}
}
).navGrid(“#pager”,
{
edit: true,
add: true,
search: true,
del: true
},
{
url: “JqGridTest2.aspx/EditData”,
closeAfterEdit: true
},
{
url: “JqGridTest2.aspx/EditData”,
closeAfterAdd: true,
beforeShowForm: function (formid) {
jQuery(“#GroupID”).val(“AUTOMATIC VALUE”);
jQuery(“#SubGroup”).val(“0”);
},
afterShowForm: function (formid) {
$(“#ParameterName”).focus();
}
},
{
url: “JqGridTest2.aspx/DeleteData”
}
);
});
jQuery.extend(jQuery.jgrid.edit, {
ajaxEditOptions: { contentType: “application/json” },
recreateForm: true,
serializeEditData: function (postData) {
return JSON.stringify(postData);
}
});

 

 

Could you please give me a hint?

 

regards