Hello.
I have some code in place to resize the grid when the browser window resizes. I have a jscript method hooked up to the onresize event of the <body> tag.
Inside that method I call the resize(width, height) method of the grid. The problem is that I only want to change the height. I don't ned to mess with the width because it is set at design time to be 100% so that it expands to the total width of the browser.
Is there a way to do that?
Thanks in advance.
Hi.
After spending some time on this issue, I found a solution. The resize() function changes the width of the grid first and then changes the height. I copied that implementation and removed the code that changes the widht. You have to hook up the onresize event of the form to the OnResized() function defined in the jscript block. the <body> tag should look like this:
<body onresize="OnResized()">
Here's the whole jscript code I'm using:
// Global variable to store the id of the grid
// Event handler for the InitializeLayout client-side event
{
// Store the id of the grid
gridID = gridName;
// Adjust the grid's height for the first time
OnResized();
}
// Function to adjust the height of the grid represented by gridID.
// The grid will adjust to the current height of the browser
// First determine the current height and width of the browser
// Taken from http://www.howtocreate.co.uk/tutorials/javascript/browserwindow
if( typeof( window.innerWidth ) == 'number' ) {
//Non-IE
myWidth = window.innerWidth;
myHeight = window.innerHeight;
//IE 6+ in 'standards compliant mode'
myWidth = document.documentElement.clientWidth;
myHeight = document.documentElement.clientHeight;
//IE 4 compatible
myWidth = document.body.clientWidth;
myHeight = document.body.clientHeight;
// The grid height depends on the available browser height minus a given quantity that changes with the page you are implementing
gridHeight = myHeight - 300;
// Cap the grid height to a minimum value
gridHeight = 300;
// Retrieve the grid object
// The code from this point and on was "borrowed" from Infragistics' resize() implementation.
// remove the changes to the width and keep the chages to the height.
// need to set the width first so we can see whether anything (groupby box) is going to
// get taller or shorter because of changes to text wrapping
//var marginWidth = igtbl_dom.dimensions.bordersWidth(this.MainGrid);
//this.MainGrid.style.width = width + "px";
//document.getElementById(this.Id + "_mc").style.width = (width - marginWidth) >= 0 ? width - marginWidth : 0 + "px";
// measure how much space all the fixed elements are going to need
marginHeight += grid.MainGrid.rows[x].offsetHeight;
gridHeight = marginHeight;
// set the new widths and heights of the outer table and rows area
document.getElementById(grid.Id + "_mr").style.height = (gridHeight - marginHeight) + "px";
//grid.MainGrid.style.width = width + "px";
Hi,
I am using same code as describe above but at last done grid.show()
Now It works fine for IE7 and firefox but In IE6 auto resize functionality for rows is not working.
Means when any cell have multiline data (when wrap required) data cut off for IE6
To solve this I have removed RowHeightDefault property for IE6
if (this._page.Request.Browser.Type != "IE6") this.DisplayLayout.RowHeightDefault = Unit.Pixel(20);
Now data cut off issue is Solved but Now when there are few rows (two or three rows ) in grid then after following two lines execute
grid.MainGrid.style.height = gridHeight + "px";
document.getElementById(grid.Id + "_mc").style.height = (gridHeight - marginHeight) + "px";
OffesetHeight is changed for row selector element to gridheight/no of rows
So My row height will be for example 600/3 =200 approx
How to Solve this data cut off issue for IE6 with resize code?