Hi,
I have A requirement of loading subgrid with Parent Frozen columns.I have implemented on the same ...But the problem is onExpandRow the subgrid is loading within parent frozen columns HTML div structure.There are Panels created in DoM.like datagrid-view1
and datagrid-view2.The subgrid should created inside datagrid-view1.But it is creating in datagrid-view2.
Please help me in resolving the issue soon.
Below is my code
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="keywords" content="spark,RPT,spark datagrid">
<meta name="description" content="SPARK, RPT DATA GRID">
<title>SPARK DATA GRID</title>
<link rel="stylesheet" type="text/css" href="css/easyui.css">
<link rel="stylesheet" type="text/css" href="css/icon.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
<link rel="stylesheet" type="text/css" href="css/datagrid.css">
<link rel="stylesheet" type="text/css" href="css/dg_custom_styles.css">
<script type="text/javascript" src="js/jquery-1.6.min.js"></script>
<script type="text/javascript" src="js/jquery.easyui.min.js"></script>
<script type="text/javascript" src="js/jquery.edatagrid.js"></script>
<script type="text/javascript" src="js/datagrid-detailview.js"></script>
<script type="text/javascript">
//Global Variables Declaration
var gridRowsData = [];
var gridColumnsNames = [];
var gridFrozenColumnes = [];
var subGridRowsData = [];
var subGridColumnNames = [];
var subGridFrozenColumnes = [];
var items = [];
$.getJSON( "php/projects.json", function( data ) {
$.each( data, function( key, val ) {
items.push( "<li id='" + key + "'>" + val + "</li>" );
});
});
console.log('json'+ items);
//Getting the data from projects.json and pushing to frozen , columns , rows arrays
$.getJSON('php/projects.json', function(data) {
gridColumnsNames.push(data.columns);
gridRowsData = data.rows;
//gridRowsData.push(data.rows);
gridFrozenColumnes.push(data.frozenColumns);
//loads datagrid content dynamically using edatagrid component
$('#dg').datagrid({
data: gridRowsData,
frozenColumns: gridFrozenColumnes,
columns: gridColumnsNames,
display:'block',
width:'100%',
height:'auto',
view: detailview,
detailFormatter:function(index,row){
return '<div style="padding:2px"><table id="ddv_' + index + '"></table></div>';
},
onExpandRow: function(index,row){
subGridRowsData = []; subGridColumnNames = []; subGridFrozenColumnes = [];
$.getJSON('php/subgrid/pr_'+row.project_id+'.json', function(data1) {
subGridRowsData = data1.rows;
subGridColumnNames.push(data1.columns);
console.log(subGridColumnNames);
subGridFrozenColumnes.push(data1.frozenColumns);
$('#ddv_'+index).datagrid({
data:subGridRowsData,
fitColumns:true,
singleSelect:true,
rownumbers:true,
columns: subGridColumnNames,
frozenColumns: subGridFrozenColumnes,
height:'auto',
onResize:function(){
$('#dg').datagrid('fixDetailRowHeight',index);
},
onLoadSuccess:function(){
setTimeout(function(){
$('#dg').datagrid('fixDetailRowHeight',index);
},0);
}
});
$('#dg').datagrid('fixDetailRowHeight',index);
});
},
});
});
</script>
</head>
<body>
<table id="dg" title="Project Datagrid" style="width:100%;height:250px"
pagination="true" idField="id"
rownumbers="false" fitColumns="true" singleSelect="true">
</table>
</body>
</html>
Show Posts
Exploring with Easyui
