EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: rangaNadha on September 13, 2015, 09:51:16 PM



Title: Datagrid: Subgrid inside Subgrid loading and UI issue
Post by: rangaNadha on September 13, 2015, 09:51:16 PM
Hi,

I am using SubGrid inside the SubGrid

Problem1: SubGrid loading issue
At a time only for one row the third level subgrid is displaying. Means on page load what ever the row selected first for that only the third level subgrid is showing on clicking the expand icon.

Problem1: Height Issue  
If i fix the height in the datagrid configuration like "height:'200'" the pagination is not visible. If i give "height:'auto'" the pagination is visible but, it is taking so much height.

My code:
Code:

var fuelListTable = function(index,row){
var fuelDataTable = $('#fuelList-'+index);
console.log(fuelDataTable.data('datagrid'));
if (!fuelDataTable.data('datagrid')){
fuelDataTable.datagrid({
contentType : 'application/json; charset=utf-8',
dataType : 'json',
type : "POST",
url:'locationFuelList.htm?locationId=' + row.FUEL_LOCATION_ID,
pagination:true,
autoRowHeight:true,
showFooter:true,
fitColumns:true,
singleSelect:true,
height:'200',
columns:[[
{field:'FUEL_ID',title:$("#stockBalanceFuelId").text(),width:200},
{field:'FUEL_NAME',title:$("#stockBalanceFuelName").text(),width:100},
{field:'FUEL_GRADE',title:$("#stockBalanceFuelGrade").text(),width:100}
]],
onResize:function(){
dataTable.datagrid('fixDetailRowHeight',index);
},
onLoadSuccess:function(){
setTimeout(function(){
dataTable.datagrid('fixDetailRowHeight',index);
},0);
},
//Containers list by fuel --- Start
view: detailview,
detailFormatter:function(fuelIndex,fuelRow){
return '<div style="padding:2px"><table class="easyui-datagrid work_table" id="containersList-' + fuelIndex + '"></table></div>';
},
onExpandRow: function(fuelIndex,fuelRow){
var containersDataTable = $('#containersList-'+fuelIndex);
console.log(containersDataTable.data('datagrid'));
if (!containersDataTable.data('datagrid')){
containersDataTable.datagrid({
contentType : 'application/json; charset=utf-8',
dataType : 'json',
type : "POST",
url:'containersByFuelList.htm?fuelId=' + fuelRow.FUEL_ID,
pagination:true,
autoRowHeight:true,
fitColumns:true,
singleSelect:true,
columns:[[
{field:'CONTAINER_ID',title:$("#stockBalanceContainerId").text(),width:200},
{field:'CONTAINER_NAME',title:$("#stockBalanceContainerName").text(),width:100},
{field:'CURR_INV_BALANCE',title:$("#stockBalanceCurrInvBal").text(),width:100}
]],
onResize:function(){
$('#fuelList-'+index).datagrid('fixDetailRowHeight',fuelIndex);
dataTable.datagrid('fixDetailRowHeight',index);
},
onLoadSuccess:function(){
setTimeout(function(){
$('#fuelList-'+index).datagrid('fixDetailRowHeight',fuelIndex);
dataTable.datagrid('fixDetailRowHeight',index);
},0);
}
});
$('#fuelList-'+index).datagrid('fixDetailRowHeight',fuelIndex);
}
}//Containers list by fuel --- End
});
dataTable.datagrid('fixDetailRowHeight',index);
}
};


dataTable.datagrid({
pagination:true,
remoteFilter:true,
fitColumns:true,
pageSize:10,
remoteSort:true,
autoRowHeight:true,
url:"fuelLocationList.htm",
// Fuels list by location --- Start
view: detailview,
detailFormatter:function(index,row){
return '<div style="padding:2px"><table id="fuelList-' + index + '"></table></div>';
},
onExpandRow: function(index,row){
fuelListTable(index,row);
}// Fuels list by location -- End
});
dataTable.datagrid('enableFilter');

Thanks in advance


Title: Re: Datagrid: Subgrid inside Subgrid loading and UI issue
Post by: stworthy on September 14, 2015, 01:25:50 AM
The simplest way to create nested sub grid is to call 'subgrid' method. Please refer to this example http://jsfiddle.net/nhk2nyxa/


Title: Re: Datagrid: Subgrid inside Subgrid loading and UI issue
Post by: rangaNadha on September 14, 2015, 05:39:38 AM
Thank you stworthy

It is working now.

But how can i get the all parent grids selected row values?


Title: Re: Datagrid: Subgrid inside Subgrid loading and UI issue
Post by: stworthy on September 14, 2015, 06:29:40 PM
In your sub grid, call the code below to get the parent row.
Code:
var dg = $('#subdg').datagrid('getParentGrid');  // get the parent datagrid object
var index = $('#subdg').datagrid('getParentRowIndex');  // get the parent row index
if (index >= 0){
  var row = dg.datagrid('getRows')[index];  // the parent row
  console.log(row);
}

Be sure to download the newest 'datagrid-detailview.js' file from http://www.jeasyui.com/extension/datagridview.php


Title: Re: Datagrid: Subgrid inside Subgrid loading and UI issue
Post by: rangaNadha on September 15, 2015, 02:29:55 AM
It is working fine.... Thank You very much stworthy