Datagrid in delayed loaded tab

[leela]

Hi,

 I am using the delay loading technique for a tab, by setting selected:false to the tab options.
 When u click on the tab and select it, everything else gets rendered fine, except the datagrid disappears.
 If you check the HTML source you can see the datagrid exists with dimensions(height and width) as 0.

 I am using jquery-easyui-1.4.1 version.
 I read in some post, that it is a bug that when the datagrid is added to hidden panel,
 it does not get re-sized with the panel, when it gets visible. To solve the issue, it asked me to use the "fit:true" option for the datagrid.
 When I set this property, I can see the datagrid, but it is not big enough to show all the data in it. just shows 1 row with scroll bar added.
 Right now, in order to deal with this problem, I am adding the following lines of code to the function loadData(target, data){} in the jquery.easyui.all.js file,
which basically calculates the height needed to show all the datagrid rows and sets it to the datagrid panel and tbody.

Code:

		var panelHeightNumber = $(target).datagrid('getPanel').height(); 
		var rowsCount = $(target).datagrid('getRows').length;
		var newHeight = 25;

		if(rowsCount>0){
			newHeight = (rowsCount+1)*25; 
		}
		var maxHeight = newHeight+50; 
				
		var newPanelHeight = newHeight;
		var datagridViewHeight = newPanelHeight;
		if (opts.pagination){
			newPanelHeight = newPanelHeight+25; 
			maxHeight = maxHeight+25; 
		}
		if (opts.showFooter){
			newPanelHeight = newPanelHeight+25; 
			datagridViewHeight = datagridViewHeight+25; 
			maxHeight = maxHeight+25; 
		}
		
		if(panelHeightNumber && (panelHeightNumber<newPanelHeight)){
			if (opts.showFooter){
				$(target).datagrid('getPanel').children(".datagrid-view").children(".datagrid-view2").children(".datagrid-footer").css('height', 25);
			}
					
			$(target).datagrid('getPanel').height(newPanelHeight+25);
			$(target).datagrid('getPanel').children(".datagrid-view").height(newPanelHeight+25);
			$(target).datagrid('getPanel').children(".datagrid-view").children(".datagrid-view2").children(".datagrid-body").height((newHeight));
		}
		

Also this is the code added to the appendRow()

Code:

var rowsCount = $(target).datagrid('getRows').length;
		var actualTbodyHeight = $(target).datagrid('getPanel').children(".datagrid-view").children(".datagrid-view2").children(".datagrid-body").height();
		var expectedTbodyHeight = (rowsCount*25);
		
		if(ourGrid){
			expectedTbodyHeight = expectedTbodyHeight+25;
		}
		
		if(actualTbodyHeight<expectedTbodyHeight){
			var panelHeight = $(target).datagrid('getPanel').height();
			$(target).datagrid('getPanel').height(panelHeight+25);
			$(target).datagrid('getPanel').children(".datagrid-view").height(panelHeight+25);
			$(target).datagrid('getPanel').children(".datagrid-view").children(".datagrid-view2").children(".datagrid-body").height((actualTbodyHeight+25));
		}

I also need to handle it in the deleteRow() function.

Instead of all this code, is there a better way to fix this problem? or do you have any fix for this bug?

Appreciate a quick response.

-Leela

[stworthy]

Normally, you can call 'resize' method to resize the datagrid size when it does not display correctly.

Code:

$('#tt').tabs({
	onSelect:function(title){
		if (title=='...'){
			$('#dg').datagrid('resize')
		}
	}
})

If your issue continues, please provide an example to demonstrate your issue.