Datagrid: Subgrid inside Subgrid loading and UI issue

[rangaNadha]

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

[stworthy]

The simplest way to create nested sub grid is to call 'subgrid' method. Please refer to this example http://jsfiddle.net/nhk2nyxa/

[rangaNadha]

Thank you stworthy

It is working now.

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

[stworthy]

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

[rangaNadha]

It is working fine.... Thank You very much stworthy