jQuery Grid Plugin - jqGrid - Topic: Problem with jqgrid subgrid http://www.trirand.com/blog/?page_id=393/discussion/problem-with-jqgrid-subgrid Simple:Press Version 5.7.5.3 edotom on Problem with jqgrid subgrid http://www.trirand.com/blog/?page_id=393/discussion/problem-with-jqgrid-subgrid#p30757 Discussion http://www.trirand.com/blog/?page_id=393/discussion/problem-with-jqgrid-subgrid#p30757 never mind ... I figured out how to do it.. as height equals 100% didn't work I just set 'auto' and it worked like a charm.  

regards

]]> Thu, 12 Jun 2014 14:45:30 +0300 edotom on Problem with jqgrid subgrid http://www.trirand.com/blog/?page_id=393/discussion/problem-with-jqgrid-subgrid#p30754 Discussion http://www.trirand.com/blog/?page_id=393/discussion/problem-with-jqgrid-subgrid#p30754 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:

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqGridTest2.aspx.cs" Inherits="JQGridDemo.JqGridTest2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="estilos/cupertino/jquery-ui-1.7.2.custom.css" rel="stylesheet" type="text/css" />
<link href="estilos/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="JQGridReq/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="JQGridReq/jquery.json-2.3.min.js" type="text/javascript"></script>
<script src="JQGridReq/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="JQGridReq/grid.locale-es.js" type="text/javascript"></script>
<script src="JQGridReq/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(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: ['GroupID', 'SubGroup', 'ParameterName', 'Value', 'Value2', 'UserInsert', 'InsertDate', 'UserUpdate', 'UpdateDate', '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',
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("<table id='" + subgrid_table_id + "' class='scrollSubgrid'></table><div id='" + pager_id + "' class='scroll'></div>");
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);
}
});

 

</script>
</head>
<body>
<form id="form1" runat="server">
<table id="grdParam" class="scroll" align="center">
</table>
<div id="pager" class="scroll" style="text-align: center;">
</div>
</form>
</body>
</html>

 

Could you please give me a hint?

 

regards

]]> Wed, 11 Jun 2014 20:00:01 +0300 tony on Problem with jqgrid subgrid http://www.trirand.com/blog/?page_id=393/discussion/problem-with-jqgrid-subgrid#p30701 Discussion http://www.trirand.com/blog/?page_id=393/discussion/problem-with-jqgrid-subgrid#p30701 Hello,

As far as I see you use your own custom success function when you do extend at the beginning.
Do not forget that in this case it is applied for both grid and subgrid.
I highly recommend you to see the demo grid as subgrid here - menu Advanced -> Grid as subgrid.
And start modify your wishes after this work fine for you.

Kind Regards
Tony

]]> Fri, 30 May 2014 15:32:24 +0300 edotom on Problem with jqgrid subgrid http://www.trirand.com/blog/?page_id=393/discussion/problem-with-jqgrid-subgrid#p30684 Discussion http://www.trirand.com/blog/?page_id=393/discussion/problem-with-jqgrid-subgrid#p30684 Hi,

 

I'm having problems implementing a jqgrid as subgrid.  When I click on the plus icon, the subgrid becomes the main and the main dissapears (Data is ok for both main grid and subgrid).  

Here's the code:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JqGridTest1.aspx.cs" Inherits="JQGridDemo.JqGridTest1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
<link href="JQGridReq/jquery-ui-1.9.2.custom.css" rel="stylesheet" type="text/css" />
<link href="JQGridReq/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<script src="JQGridReq/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="JQGridReq/jquery.json-2.3.min.js" type="text/javascript"></script>
<script src="JQGridReq/jquery-ui-1.8.2.custom.min.js" type="text/javascript"></script>
<script src="JQGridReq/grid.locale-en.js" type="text/javascript"></script>
<script src="JQGridReq/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$.extend($.jgrid.defaults,
{ datatype: 'json' },
{ 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;
}
}
}
}
});

jQuery("#grdParam").jqGrid({
url: 'JqGridTest1.aspx/GetDataTableGroup',
datatype: 'json',
mtype: 'POST',
height: 250,
colNames: ['GroupID', 'SubGroup', 'ParameterName', 'Value', 'Value2', 'UserInsert', 'InsertDate', 'UserUpdate', 'UpdateDate', '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: jQuery('#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";
jQuery("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table>");
jQuery("#" + subgrid_table_id).jqGrid({
url: 'JqGridTest1.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',
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: jQuery('#pager2'),
sortname: 'GroupID',
sortorder: 'asc',
multiboxonly: false,
viewrecords: true,
imgpath: 'Themes/images',
contentType: "application/json; charset=utf-8",
serializeGridData: function (data) {
return $.toJSON(data);
}
})
},
multiboxonly: false,
viewrecords: true,
imgpath: 'Themes/images',
serializeGridData: function (data) {
return $.toJSON(data);
}
}).navGrid("#pager", { edit: true, add: true, search: true, del: true },
{ url: "JqGridTest1.aspx/EditData", closeAfterEdit: true },
{ url: "JqGridTest1.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: "JqGridTest1.aspx/DeleteData" });
});
jQuery.extend(jQuery.jgrid.edit, {
ajaxEditOptions: { contentType: "application/json" },
recreateForm: true,
serializeEditData: function (postData) {
return JSON.stringify(postData);
}
});

 

</script>
</head>
<body>
<form id="form1" runat="server">
<table id="grdParam" class="scroll" align="center" width="100%">
</table>
<div id="pager" class="scroll" style="text-align: center;">
</div>
</form>
</body>
</html>

]]> Mon, 26 May 2014 18:35:42 +0300