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
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 below setup jqgrid (v 4.6.0).
$(function () {
var JQGridDefaults = {
caption: '',
rowList: [10, 50, 100],
datatype: 'json',
height: '100%',
viewrecords: true,
mtype: 'GET',
colNames: ['Item Control No', 'Item Short Description', 'ID'],
colModel: [
{
name: 'ItemCode', index: 'ItemCode', search: true, width: 230, cellattr: makeCellContentWrap, searchoptions: {
sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc'],
},
searchrules: {required: true}
},
{
name: 'ItemShortDesc', index: 'ItemShortDesc', search: true, width: 300, cellattr: makeCellContentWrap, searchoptions: {
sopt: ['eq', 'ne', 'bw', 'bn', 'ew', 'en', 'cn', 'nc'],
},
searchrules: {required: true }
}
//Hidden Fields - Start
{ name: 'ItemID', hidden: true, key: true }
//HiddenFields End
],
pager: '#GridPager',
rowNum: 10,
sortname: 'ItemCode',
sortorder: 'asc',
url: '/Items/List',
jsonReader: {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false,
userdata: "userdata",
subgrid: {
root: "rows",
repeatitems: false
}
},
//Sub Grid - Start
subGrid: true,
subGridBeforeExpand: function (pID, rowID) {
console.log("Before Expand");
var gridData = $(this).jqGrid('getRowData',rowID);
if (gridData.ItemCode == "") {
return false;
}
},
subGridUrl: '/Items/Details',
subGridModel: {
name: ['Revision', 'ItemCode'],
width: [50, 100],
align: ['center', 'center'],
mapping: ['Revision', 'ItemCode']
},
afterInsertRow: function (rowid, aData, rowelem) {
// Remove the subgrid plus button except for rows that have exceptions
if (aData.ItemCode == "") {
$('#' + rowid).children("td.sgcollapsed").unbind();
$('#' + rowid).children("td.sgcollapsed").html("");
}
}
//Sub Grid - END
};
var JQGridSearchDefaults = {
multipleSearch: true,
recreateFilter: true,
showQuery: true,
closeAfterSearch: true,
closeAfterReset: true,
searchOnEnter: true,
closeOnEscape:true,
width: 600
};
$('#Grid').jqGrid(JQGridDefaults).navGrid('#GridPager', { view: false, del: false, add: false, edit: false, refresh: true },
{},
{},
{},
JQGridSearchDefaults);
$('#Grid').jqGrid('setGridWidth', $('#Grid').parents('.main-content').width() - 2);
$(window).resize(function () {
clearTimeout(this.id);
this.id = setTimeout(function () {
$('#Grid').jqGrid('setGridWidth', $('#Grid').parents('.main-content').width() - 2);
}, 300);
});
});
The sub grid icon appears correctly but when I click on the Expand icon an empty row appears (no headers and no ajax call is sent)
does anyone have an idea on why the ajax call is not happening?
Note: I also tried to use 'subgridtype' parameter and define to make the service call that too did not make the Ajax call.
subgridtype: function (rowidparam) {
$.ajax({
url: '/Items/Details',
cache: false,
type: 'Get',
dataType: "json",
data: { id: rowidparam.ItemID }
}).done(function (data) {
$('#Grid')[0].subGridJson(data, rowidparam.id);
});
},
subgridtype must be string, for you try json
subgridtype: 'json'
Suppose the following grids
$(document).ready(function() {
$('#Clientes').jqGrid({colNames: ['Razón Social','Cuit','Dirección','Localidad','Teléfono','Tipo IVA','Mail','Saldo inicial','Facturar'],
colModel: [{ editable: true, editoptions: { "maxlength":70 }, editrules: { required: true }, name: 'RazonSocial' },
{ editable: true, editoptions: { dataInit: CuitMask, "maxlength":13 }, editrules: { custom: true, custom_func: ValidateCuit, required: true }, name: 'NidentFiscal' },
{ editable: true, editoptions: { "maxlength":70 }, editrules: { required: true }, name: 'Direccion' },
{ editable: true, edittype: 'select', editoptions: { dataUrl: '/Ciudad/CmbCiudad' }, editrules: { required: true }, name: 'Ciudad' },
{ editable: true, editoptions: { "maxlength":20 }, name: 'Telefono' }],
url: '/Clientes/List',
datatype: 'json',
mtype: 'POST',
pager: '#ClientesPager',
prmNames: { id: 'ClienteId' },
rowList: [10,15,20,25,30],
sortname: 'ClienteId',
subGrid: true,
subGridRowExpanded: function(subgridId, rowId) {
var subgridTableId = subgridId + '_t';
jQuery('#' + subgridId).append('<table id="' + subgridTableId + '"></table>');
var subgridPagerId = subgridId + '_p';
jQuery('#' + subgridId).append('<div id="' + subgridPagerId + '"></div>');
$('#' + subgridTableId).jqGrid({colNames: ['Fecha','Importe'],
colModel: [{ name: 'Fecha' },
{ editable: true, editrules: { number: true }, formatter: 'currency', formatoptions: { prefix: '$' }, name: 'Importe' }
],url: '/Honorarios/DetailSubgrid?id=' + rowId, datatype: 'json', mtype: 'POST', pager: '#' + subgridPagerId,
prmNames: { id: 'HonorarioId' },
rowList: [10,15,20,25,30],
sortname: 'HonorarioId',
viewrecords: true,
width: 600,
height: '100%'}).jqGrid('navGrid', '#' + subgridPagerId,{ search: false },{ url: '/Honorarios/Update', closeAfterEdit: true },{ url: '/Honorarios/Update', closeAfterEdit: true },{ url: '/Honorarios/Delete' });
},
viewrecords: true,
width: 1000,
height: '100%'
}).jqGrid('navGrid', '#ClientesPager',{ search: false },{ url: '/Clientes/Update', width: 500, closeAfterEdit: true }, { url: '/Clientes/Update', width: 500, closeAfterEdit: true }, { url: '/Clientes/Delete' });
});
I need to pass the ClienteId parameter when a record is added or edited in the sub grid
This should be done using postdata?
something like
postData: {ClienteId: row_id}
the solution is using
editData: { ClienteId: rowId }
Tanks #tpeczek
I need to pass an extra paramter (i.e. the selected row_id) to the url that I am using for to show the sub grid. But Firebug console panel shows no extra parameter been passed. (of course the server side code is also not receiving it).
Below is my code,
myGrid.jqGrid({
url: 'server.php',
datatype: "json",
mtype: 'POST',
width: 900,
height:500,
sortname: 'productid',
viewrecords: true,
sortorder: "desc",
caption: "JSON Example",
rowNum: 100,
subGrid: true,
colNames: ['Product Id', 'Product Name', 'Supplier Id', 'Unit Price'],
colModel: [
{
name: 'productid',
index: 'productid',
search: true,
width: 55
}, {
name: 'productname',
index: 'productname',
width: 90,
search: true
}, {
name: 'supplierid',
index: 'supplierid',
width: 100,
search: false
}, {
name: 'unitprice',
index: 'unitprice',
width: 80,
search: false,
align: "right",
search: true
}
],
subGridRowExpanded: function (subgrid_id, row_id) {
var subgrid_table_id, pager_id;
subgrid_table_id = subgrid_id + "_t";
pager_id = "p_" + subgrid_table_id;
$("#" + subgrid_id)
.html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");
jQuery("#" + subgrid_table_id)
.jqGrid({
url: "server.php",
datatype: "json",
colNames: ['Product Id', 'Product Name'],
width:700,
colModel: [{
name: 'productid',
index: 'productid',
width: 55
}, {
name: 'productname',
index: 'productname',
width: 90
}],
rowNum: 20,
sortname: 'num',
sortorder: "asc"
data: {prodcutid: row_id}
});
}
How to pass the selected row id to the subgrid's url?
Thanks
The data parameter has another meaning in jqGrid as in jQuery.ajax. So you should replace
data: {prodcutid: row_id}
in the SubGrid to
postData: {prodcutid: row_id}
my code....
public string ConstructButtonEvents(string buttonid, string gridID, string GridControlId, string ActionUrl)
{
StringBuilder sbButtonEvents = new StringBuilder();
GridControlId = GridControlId.Trim();
sbButtonEvents.Append(" $('#" + buttonid + "').die().live('click', function () { ");
sbButtonEvents.Append("var SelectedArtifactDetails = new Array();");
sbButtonEvents.Append(" var CurrentArtifactDetails = new Array();");
sbButtonEvents.Append("for (var i = 0; i < $('#" + gridID + " tbody tr').length; i++) {");
sbButtonEvents.Append(" var rowId = jQuery('#" + gridID + " tr:eq(' + i + ')').attr('id');");
sbButtonEvents.Append("var row = $('#" + gridID + "').jqGrid('getRowData', rowId);");
sbButtonEvents.Append(" if (($('#Status" + GridControlId + "'+rowId).attr('checked') == 'checked') && ($('#Status" + GridControlId + "'+rowId).attr('disabled') != 'disabled')) {");
sbButtonEvents.Append("CurrentArtifactDetails = {");
sbButtonEvents.Append(" Complete: 'Y',");
sbButtonEvents.Append("StakeHolderEmail: $('#Stakeholder" + GridControlId + "'+rowId).attr('value'),");
sbButtonEvents.Append("UploadFile: $('#uploadFile" + GridControlId + "'+rowId).attr('value'),");
sbButtonEvents.Append("PhaseArtifactId: $(row).attr('ID'),");
sbButtonEvents.Append("Status: $('#list" + GridControlId + "'+rowId+' option:selected').text()");
sbButtonEvents.Append("};");
sbButtonEvents.Append("SelectedArtifactDetails.push(CurrentArtifactDetails);");
sbButtonEvents.Append("}");
sbButtonEvents.Append("}");
sbButtonEvents.Append(" $.ajax({");
sbButtonEvents.Append(" url: '" + ActionUrl + "',");
sbButtonEvents.Append(" async: false,");
sbButtonEvents.Append(" loadonce:false, type: 'POST', dataType: 'json', data: JSON.stringify(SelectedArtifactDetails), contentType: 'application/json; charset=utf-8',");
sbButtonEvents.Append(" success: function () {");
//sbButtonEvents.Append(" $('#" + gridID + "').jqGrid('GridUnload');");
sbButtonEvents.Append(" $('#" + gridID + "').trigger('reloadGrid');");
sbButtonEvents.Append(" }, error: function () { alert('error'); }");
sbButtonEvents.Append("});");
sbButtonEvents.Append("});");
return sbButtonEvents.ToString();
}
i have mutliple tabs yet the grid id generation is perfect. I'm constructing the grid in the .cs itself. i need to update the data in the rows to the DB. so, i have an update button... on click of it i post (ajax) the data. The data is getting updated pretty much well. But the grid is not getting reloaded.
on click of update button i fetch the values and then the below ajax post is called
$.ajax({ url: '/SDLCMClassic/EditProject/BatchUpdate',
type: 'POST',
dataType: 'json',
data: JSON.stringify(SelectedArtifactDetails),
contentType: 'application/json; charset=utf-8',
success: function () {
$('#tblArtifact1').trigger('reloadGrid');
}, error: function () { alert('error'); }
});
});
I'm able to fetch the row values in the grid and i'm able to post it successfully. It is getting updated in DB as well. But immediate reload is not happening. if i refresh the whole page then only i'm able to see the updated data.
Here is the code to construct jqgrid in js
$(function () {
$('#tblArtifact1').jqGrid({
url: '/SDLCMClassic/EditProject/FillArtifactGrid?ppmno=188035&phaseName=Project Startup',
datatype: 'json',
mtype: 'GET',
colNames: ['Artifact', 'Complete', 'Status', 'Stakeholder', 'App Reference', 'Document', 'URL', 'ID'],
colModel: [
{ name: 'Name', index: 'Name', editable: false, edittype: '', align: 'left', key: false, hidden: false, formatter: 'showlink', formatoptions: { target: '_blank', baseLinkUrl: '' }, width: $(window).width() * .1, sortable: false },
{ name: 'Complete', index: 'Complete', editable: false, edittype: '', align: 'center', key: false, hidden: false, formatter: '', formatoptions: { target: '', baseLinkUrl: '' }, width: $(window).width() * .06, sortable: false },
{ name: 'Status', index: 'Status', editable: false, edittype: '', align: 'center', key: false, hidden: false, formatter: '', formatoptions: { target: '', baseLinkUrl: '' }, width: $(window).width() * .10, sortable: false },
{ name: 'StakeHolderEmail', index: 'StakeHolderEmail', editable: false, edittype: '', align: 'center', key: false, hidden: false, formatter: '', formatoptions: { target: '', baseLinkUrl: '' }, width: $(window).width() * .15, sortable: false },
{ name: 'App Reference', index: 'App Reference', editable: false, edittype: '', align: 'center', key: false, hidden: false, formatter: '', formatoptions: { target: '', baseLinkUrl: '' }, width: $(window).width() * .15, sortable: false },
{ name: 'Document', index: 'Document', editable: false, edittype: '', align: 'center', key: false, hidden: false, formatter: '', formatoptions: { target: '', baseLinkUrl: '' }, width: $(window).width() * .18, sortable: false },
{ name: 'URL', index: 'URL', editable: false, edittype: '', align: 'center', key: false, hidden: false, formatter: '', formatoptions: { target: '', baseLinkUrl: '' }, width: $(window).width() * .15, sortable: false },
{ name: 'ID', index: 'ID', editable: false, edittype: '', align: 'center', key: false, hidden: true, formatter: '', formatoptions: { target: '', baseLinkUrl: '' }, width: $(window).width() * .01, sortable: false }
],
viewrecords: true,
sortname: 'Complete',
sortorder: 'asc',
width: 'auto',
height: 'auto',
subGrid: true,
subGridRowExpanded: function (subgrid_id, row_id) {
$('#' + subgrid_id).html(renderhtmlforSubgrid(this, subgrid_id, row_id));
},
gridComplete: function () {
var dataIds = $('#tblArtifact1').jqGrid('getDataIDs');
for (var i = 0; i < dataIds.length; i++) {
$('#tblArtifact1').editRow(dataIds[i], false);
}
},
loadComplete: function () {
ModifyGridDefaultStyles('tblArtifact1');
}
});
});
You don't posted the most important part of the code: the code which defines jqGrid. So I have to guess.
Typical problem with not reloading of grid per .trigger('reloadGrid'); is because you use loadonce: true option in the jqGrid. It changes datatype from the initial "json" or "xml" value to datatype: "local". So reloading do work, but reload the local data. If you need to reload the data from the server you have to reset datatype to initial value "json" or "xml" before trigger reloadGrid. See the answer and the answer for more details.