1: subGridRowExpanded: function (subgrid_id, row_id) {
2: // we pass two parameters
3: // subgrid_id is a id of the div tag created whitin a table data
4: // the id of this elemenet is a combination of the "sg_" + id of the row
5: // the row_id is the id of the row
6: // If we wan to pass additinal parameters to the url we can use
7: // a method getRowData(row_id) - which returns associative array in type name-value
8: // here we can easy construct the flowing
9: var subgrid_table_id, pager_id;
10: subgrid_table_id = subgrid_id + "_t";
11: pager_id = "p_" + subgrid_table_id;
12: $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
13:
14: jQuery("#" + subgrid_table_id).jqGrid({
15: //este es mi subgrid
16:
17: datatype: function () {
18: $.ajax(
19: {
20: url: "webservices/LoadChild.asmx/GetChilds", //PageMethod
21: data: "{'pPageSize':'" + $("#" + subgrid_table_id).getGridParam("rowNum") +
22: "','pCurrentPage':'" + $("#" + subgrid_table_id).getGridParam("page") +
23: "','pSortColumn':'" + $("#" + subgrid_table_id).getGridParam("sortname") +
24: "','id':'" + $("#" + subgrid_table_id).getGridParam("ajaxGridOptions") +
25: "','pSortOrder':'" + $("#" + subgrid_table_id).getGridParam("sortorder") + "'}", //PageMethod Parametros de entrada
26:
27: dataType: "json",
28: type: "post",
29: contentType: "application/json; charset=utf-8",
30: complete: function (jsondata, stat) {
31: if (stat == "success")
32: jQuery("#" + subgrid_table_id)[0].addJSONData(JSON.parse(jsondata.responseText).d);
33: else
34: alert(JSON.parse(jsondata.responseText).Message);
35: }
36: });
37: },
38: jsonReader: //Set the jsonReader to the JQGridJSonResponse squema to bind the data.
39: {
40: root: "Items",
41: page: "CurrentPage",
42: total: "PageCount",
43: records: "RecordCount",
44: repeatitems: true,
45: cell: "Row",
46: id: "ID" //index of the column with the PK in it
47: },
48:
49: colModel:
50: [
51: { name: 'ChildId', index: 'ChildId', width: 40, align: 'left', editable: false, editrules: { edithidden: true }, hidden: true },
52: { name: 'ChildName', index: 'ChildName', width: 80, align: 'left', editable: true, edittype: 'text' },
53: { name: 'ChildLastName', index: 'ChildLastName', width: 200, align: 'left', editable: true, edittype: 'text', editoptions: { size: 20, maxlength: 30} },
54: { name: 'ChildBirthDate', index: 'ChildBirthDate', width: 300, align: 'left', editable: true, edittype: 'select', editoptions: { size: 20, maxlength: 30} },
55: { name: 'PersonId', index: 'PersonId', width: 200, align: 'left', editable: true, edittype: 'text', editoptions: { size: 20, maxlength: 30 }, formater: 'number'}],
56:
57: pager: pager_id, //Pager.
58: loadtext: 'Cargando datos...',
59: recordtext: "{0} - {1} de {2} elementos",
60: emptyrecords: 'No hay resultados',
61: pgtext: 'Pág: {0} de {1}', //Paging input control text format.
62: rowNum: "10", // PageSize.
63: ajaxGridOptions: row_id,
64: rowList: [10, 20, 30], //Variable PageSize DropDownList.
65: viewrecords: true, //Show the RecordCount in the pager.
66: multiselect: false,
67: sortname: "ChildName", //Default SortColumn
68: sortorder: "asc", //Default SortOrder.
69: width: "800",
70: height: "100%",
71: caption: "Invoice Detail"
72: });
73: jQuery("#" + subgrid_table_id).jqGrid('navGrid', "#" + pager_id, { edit: false, add: false, del: false })
74: },