Forum

November 2nd, 2014
A A A
Avatar
sp_LogInOut Log In

Lost password?
sp_Search Search
Advanced Search
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

sp_Search Search
Go to Bottom
The forums are currently locked and only available for read only access
This topic is locked No permission to create posts
sp_Feed Topic RSS sp_TopicIcon
Problem with jqgrid subgrid
26/05/2014
18:35
Avatar
edotom
Member
Members
Forum Posts: 5
Member Since:
23/05/2014
sp_UserOfflineSmall Offline
Go to Top
1sp_Permalink sp_Print

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>

30/05/2014
15:32
Avatar
tony
Sofia, Bulgaria
Moderator
Members

Moderators
Forum Posts: 7721
Member Since:
30/10/2007
sp_UserOfflineSmall Offline
sp_UserWebsite
Go to Top
2sp_Permalink sp_Print

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

For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.

11/06/2014
20:00
Avatar
edotom
Member
Members
Forum Posts: 5
Member Since:
23/05/2014
sp_UserOfflineSmall Offline
Go to Top
3sp_Permalink sp_Print

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

12/06/2014
14:45
Avatar
edotom
Member
Members
Forum Posts: 5
Member Since:
23/05/2014
sp_UserOfflineSmall Offline
Go to Top
4sp_Permalink sp_Print

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

This topic is locked No permission to create posts
sp_Feed All RSS
Go to top
Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
48 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information