Binding data to subgrid
- by bhargav
i have a jqgrid with a subgrid...the databinding is done in javascript like this
<script language="javascript" type="text/javascript">
var x = screen.width;
$(document).ready(function () {
$("#projgrid").jqGrid({
mtype: 'POST',
datatype: function (pdata) { getData(pdata); },
colNames: ['Project ID', 'Due Date', 'Project Name', 'SalesRep', 'Organization:', 'Status', 'Active Value', 'Delete'],
colModel: [
{ name: 'Project ID', index: 'project_id', width: 12, align: 'left', key: true },
{ name: 'Due Date', index: 'project_date_display', width: 15, align: 'left' },
{ name: 'Project Name', index: 'project_title', width: 60, align: 'left' },
{ name: 'SalesRep', index: 'Salesrep', width: 22, align: 'left' },
{ name: 'Organization:', index: 'customer_company_name:', width: 56, align: 'left' },
{ name: 'Status', index: 'Status', align: 'left', width: 15 },
{ name: 'Active Value', index: 'Active Value', align: 'left', width: 10 },
{ name: 'Delete', index: 'Delete', align: 'left', width: 10}],
pager: '#proj_pager',
rowList: [10, 20, 50],
sortname: 'project_id',
sortorder: 'asc',
rowNum: 10,
loadtext: "Loading....",
subGrid: true,
shrinkToFit: true,
emptyrecords: "No records to view",
width: x - 100,
height: "100%",
rownumbers: true,
caption: 'Projects',
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({
mtype: 'POST',
postData: { entityIndex: function () { return row_id } },
datatype: function (pdata) { getactionData(pdata); },
height: "100%",
colNames: ['Event ID', 'Priority', 'Deadline', 'From Date', 'Title', 'Status', 'Hours', 'Contact From', 'Contact To'],
colModel: [
{ name: 'Event ID', index: 'Event ID' },
{ name: 'Priority', index: 'IssueCode' },
{ name: 'Deadline', index: 'IssueTitle' },
{ name: 'From Date', index: 'From Date' },
{ name: 'Title', index: 'Title' },
{ name: 'Status', index: 'Status' },
{ name: 'Hours', index: 'Hours' },
{ name: 'Contact From', index: 'Contact From' },
{ name: 'Contact To', index: 'Contact To' }
],
caption: "Action Details",
rowNum: 10,
pager: '#actionpager',
rowList: [10, 20, 30, 50],
sortname: 'Event ID',
sortorder: "desc",
loadtext: "Loading....",
shrinkToFit: true,
emptyrecords: "No records to view",
rownumbers: true,
ondblClickRow: function (rowid) {
}
});
jQuery("#actiongrid").jqGrid('navGrid', '#actionpager', { edit: false, add: false, del: false, search: false });
}
});
jQuery("#projgrid").jqGrid('navGrid', '#proj_pager', { edit: false, add: false, del: false, excel: true, search: false });
});
function getactionData(pdata)
{
var project_id = pdata.entityIndex();
var ChannelContact = document.getElementById('ctl00_ContentPlaceHolder2_ddlChannelContact').value;
var HideCompleted = document.getElementById('ctl00_ContentPlaceHolder2_chkHideCompleted').checked;
var Scm = document.getElementById('ctl00_ContentPlaceHolder2_chkScm').checked;
var checkOnlyContact = document.getElementById('ctl00_ContentPlaceHolder2_chkOnlyContact').checked;
var MerchantId = document.getElementById('ctl00_ContentPlaceHolder2_ucProjectDetail_hidden_MerchantId').value;
var nrows = pdata.rows;
var npage = pdata.page;
var sortindex = pdata.sidx;
var sortdir = pdata.sord;
var path = "project_brow.aspx/GetActionDetails"
$.ajax({
type: "POST",
url: path,
data: "{'project_id': '" + project_id + "','ChannelContact': '" + ChannelContact
+ "','HideCompleted': '" + HideCompleted + "','Scm': '" + Scm + "','checkOnlyContact': '"
+ checkOnlyContact + "','MerchantId': '" + MerchantId + "','nrows': '" + nrows + "','npage': '" + npage
+ "','sortindex': '" + sortindex + "','sortdir': '" + sortdir + "'}",
contentType: "application/json; charset=utf-8",
success: function (data, textStatus) {
if (textStatus == "success")
obj = jQuery.parseJSON(data.d)
ReceivedData(obj);
},
error: function (data, textStatus) {
alert('An error has occured retrieving data!');
}
});
}
function ReceivedData(data) {
var thegrid = jQuery("#actiongrid")[0];
thegrid.addJSONData(data);
}
function getData(pData) {
var dtDateFrom = document.getElementById('ctl00_ContentPlaceHolder2_dtDateFrom_textBox').value;
var dtDateTo = document.getElementById('ctl00_ContentPlaceHolder2_dtDateTo_textBox').value;
var Status = document.getElementById('ctl00_ContentPlaceHolder2_ddlStatus').value;
var Type = document.getElementById('ctl00_ContentPlaceHolder2_ddlType').value;
var Channel = document.getElementById('ctl00_ContentPlaceHolder2_ddlChannel').value;
var ChannelContact = document.getElementById('ctl00_ContentPlaceHolder2_ddlChannelContact').value;
var Customers = document.getElementById('ctl00_ContentPlaceHolder2_txtCustomers').value;
var KeywordSearch = document.getElementById('ctl00_ContentPlaceHolder2_txtKeywordSearch').value;
var Scm = document.getElementById('ctl00_ContentPlaceHolder2_chkScm').checked;
var HideCompleted = document.getElementById('ctl00_ContentPlaceHolder2_chkHideCompleted').checked;
var SelectedCustomerId = document.getElementById("<%=hdnSelectedCustomerId.ClientID %>").value
var MerchantId = document.getElementById('ctl00_ContentPlaceHolder2_ucProjectDetail_hidden_MerchantId').value;
var nrows = pData.rows;
var npage = pData.page;
var sortindex = pData.sidx;
var sortdir = pData.sord;
PageMethods.GetProjectDetails(SelectedCustomerId, Customers, KeywordSearch, MerchantId, Channel, Status, Type,
dtDateTo, dtDateFrom, ChannelContact, HideCompleted, Scm, nrows, npage, sortindex, sortdir, AjaxSucceeded, AjaxFailed);
}
function AjaxSucceeded(data) {
var obj = jQuery.parseJSON(data)
if (obj != null) {
if (obj.records!="") {
ReceivedClientData(obj);
}
else { alert('No Data Available to Display') }
}
}
function AjaxFailed(data) {
alert('An error has occured retrieving data!');
}
function ReceivedClientData(data) {
var thegrid = jQuery("#projgrid")[0];
thegrid.addJSONData(data);
}
</script>
as u can see projgrid is my parent grid and action grid is my subgrid to be shown onclicking the '+' symbol
Projgrid is binded and being displayed but when it comes to subgrid im able to get the data but the problem comes at the time of binding data to subgrid which is done in function named ReceivedData where you can see like this
function ReceivedData(data) {
var thegrid = jQuery("#actiongrid")[0];
thegrid.addJSONData(data);
}
"data" is what i wanted exactly but it cannot be binded to actiongrid which is the subgrid
Thanx in advance for help
