This is the grid and subgrid:
<table id="dg" style="width:650px;height:250px" class="easyui-datagrid"
url="data_select.php" idField="document_id" striped="true" loadMsg="Data loading... Please wait..."
title="Document Review" fit="true" toolbar="#toolbar" pagination="true" pageSize="30"
rownumbers="true" fitColumns="true" showFooter="true" singleSelect="true"
>
<thead>
<tr>
<th id="iddocument_id" field="document_id" width="20">document_id</th>
<th id="idDocumentType" field="DocumentType" width="60">Document Type</th>
<th id="idDocumentName" field="DocumentName" width="220">Document Name</th>
<th id="idReviewPeriod" field="ReviewPeriod" align="left" width="30">Review Period</th>
<th id="idLastRatified" field="LastRatified" align="center" width="30">Last Ratified</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(function(){
$('#dg').datagrid({
view: detailview,
detailFormatter:function(index,row){
return '<div style="padding:2px"><table class="ddv"></table></div>';
},
onExpandRow: function(index,row){
//Auto-Collapse last expanded row START
var opts = $(this).datagrid('options');
if (opts.lastExpandIndex != undefined){
$(this).datagrid('collapseRow',opts.lastExpandIndex);
}
opts.lastExpandIndex = index;
//Auto-Collapse last expanded row END
var ddv = $(this).datagrid('getRowDetail',index).find('table.ddv');
ddv.datagrid({
url:'data_select_getdetail.php?document_id='+row.document_id,
fitColumns:true,
singleSelect:true,
rownumbers:true,
loadMsg:'',
height:'auto',
columns:[[
{field:'documentreview_id',title:'ID',width:20},
{field:'LeadReviewer',title:'Lead Reviewer',width:200},
{field:'ReviewStartDate',title:'Review Started',width:200},
{field:'ProposedDeadline',title:'Proposed Deadline',width:100,align:'right'},
{field:'ApprovalDate',title:'Review Approved',width:100,align:'right'},
{field:'RatificationDate',title:'Review Ratified',width:100,align:'right'},
{field: 'action', title: 'Action',
formatter:function(value,row,index)
{
var s = '<button onclick="editRecord()">Edit</button> ';
return s;
}
}
]]
,
onResize:function(){
$('#dg').datagrid('fixDetailRowHeight',index);
},
onLoadSuccess:function(data){
setTimeout(function(){
$('#dg').datagrid('fixDetailRowHeight',index);
if (!data.rows.length) {
$.messager.show({ // show error message
title: 'Warning',
msg: 'This document has not yet been reviewed!'
});
}
},0);
}
});
$('#dg').datagrid('fixDetailRowHeight',index);
}
});
});
</script>
The editRecord() function will then open a modal dialog box (as per the demo CRUD application) with details of the subgrid record.
For this I need the selected subgrid record row data...
Thanks Jarry!