I have a grid whose height is set on server side while it loads. The grid also have filtering which will show few rows (less than 5) when filter applied.
The problem is when the filter is applied and the grid height is unchanged, the rows span over the available height of the grid with more space between the rows. I want to avoid this space and have all the rows together. If any one knows a solution, please help.
Do you have a DefaultRowHeight set? Also, how are you setting the height on the grid? Be sure that you set the grid.Height and the grid.DisplayLayout.FrameStyle.Height to the same value.
-Tony
Hi Tony,
I dont have the DefaultRowHeight set any where, I use wrap on cells so the height of the row depends on the contents of the row.
I use the following code to set the height of the grid in the code behind (c#) initially
{
}
else
Then I use the javascript to set the height of the grid to the available height of the browser on onresize event of the window
var grid = igtbl_getGridById(gridName);
gridHeight= clientHigh-125;
grid.resize(grid.MainGrid.offsetParent.offsetWidth - 4, gridHeight)
I get scrolling within the grid and page doesnt have scrolling and it looks good when I have many rows.
Then if I apply filter on the column to show only 3 rows, these 3 rows will occupy the whole height of the grid with 1/3 of height for each row.
I want the height of the grid to automatically change acording to the content of the rows and if the content exceeds the page available height then have a scroll bar within the grid.
Any help will be much appreciated.
Thanks in advance.
The problem here is that you're re-sizing the grid to be the entire height of the page. If a height is set on a table (which is what you're doing when you resize on the client-side), the table will attempt to fill itself with the rows added to it. Try setting DisplayLayout.TableLayout=fixed, along with a DefaultRowHeight on the grid. That may enable the scenario you're looking for.
This may also be a case of forcing the grid to 'refresh' during a filter process. Since the grid only re-loads its data and not the entire HTML footprint, it's not going to take the sizing that you're putting in place on the server.. To get the ENTIRE grid to re-render, you'll need to use an UpdatePanel or force a full page postback.
Hope this helps,
I have achieved this by placing the grid inside a cell of html tabel and set the hight and width of table, cell and grid to 100%. This keeps the page size always 100% of the browser window and the grid scrollbar are activated in 'auto' mode if necessary.
But since updating to version 2007.3 (?) the grid dont enables its scrollbars. Now the scrollbar of the page appears. But what I want is the old behaviour. How can I achieve this again ? Only if I set the grid height to fix value (pixels) the scrollbars appear.
Thanks for any help.
Markus
Hello,
1. Check the generated code for an UltraWebGrid.
2. You will find a table having an ID like this:
<table id='G_uwgMyGrid' bandNo='0' StationaryMarginsOutlookGroupBy='True' height='100%' border='0'......
3. Set in the .css file like this
#G_uwgMyGrid{ height: auto;}
The rows will not occupy the grid 100% anymore, only as much height as necessary.
I'm pretty sure that div is used for the loadOnDemand functionality of the grid - either that or for the "stationarymargins" (fixed header). Sounds like it might have it's height set to 100% coming from somewhere. Easiest way to find out is to use the IE Developer Toolbar (go to microsoft downloads and search for ie developer toolbar). There's a great dom exploerer included in that which will allow you to find out exactly what CSS is being applied to that container to make it sized the way it is.
Thanks a ton. That solves my problem.
I am using
div.style.maxHeight = gridHeight;
This satisfies my requirements.
But the only problem after doing this is when I do a server side sort or filter then there is an extra div tag added below the contents of the grid with ID G_ctl00xcphPageContentxuwgWebGrid_scd which doesnt have any contents but its height is more than double the contents of the grid.
I have suppressed the above div using
div = grid.getDivElement();
div.childNodes[1].style.display = 'none';
but wanted to know why the div is rendered.
The problem is that when you filter the results the entire grid doesn't re-render. You need to force the entire grid to re-render so that you get the behavior your looking for. You can do this with an UpdatePanel. Alternatively, you can try setting MaxHeight css properties. These will work in IE7 as long as you're in Standards Mode (xhtml).