I am almost there, but not quite .... I am setting the width and height of my grid server-side, and under certain conditions I want to reduce the height of the grid through the Initialize client-side event. So I do this by using jQuery to select the grid and then setting it's height (using the jQuery function). This sets the grid element's clientHeight, but the results are not visible until I sort a column.
Alternatively if I call the _adjustGridLayout method on the grid this works too. I don't understand why the grid doesn't notice the change in height until it is prodded. Any ideas?
Hi AlistairWood,
During what event are you setting height and width of the grid server-side? You may be encountering page life cycle event conflicts. If possible I would recommend setting the height and width entirely client-side or entirely server side. Is there a reason to do both?
For this inquiry, realizing you are looking at doing this with jQuery, what I have for you is a javascript solution. Let me know if this works for you:
function WebHierarchicalDataGrid1_ContainerGrid_Initialize(sender, eventArgs)
{
var width = screen.width;
var height = screen.height;
sender.get_element().style.width = "400px";
sender.get_element().style.height = "400px";
}
So for whatever height and width the user sets on the grid, these settings here during initialization will be the size the grid gets.
You can for testing set functions that fire on button click to resize the grid again:
function
resizeLarger() {
var grid = $find("<%=webhierarchicaldatagrid1.clientid>");
if (grid != null) {
grid.get_element().style.width =
"800px";
grid.get_element().style.height =
"600px";
resizeSmaller() {
"300px";
..
<input id="Button1" type="button" value="ReSize Grid (Larger)" onclick="resizeLarger()" />
<input id="Button2" type="button" value="ReSize Grid (Smaller)" onclick="resizeSmaller()" />
I have attached my sample for your reference. Please note that I omitted the style sheets due to file size constraints. For proper styling of the grid you will need to bring the ig_res folder back into the project. You can do this by opening the project in the designer and select 'OK' when prompted to accept the style sheets.
Please let me know if you need any additional assistance regarding this matter.
Thanks, that's useful.
I am setting height and width serverside in Page_PreInit, after calling grid ctor, adding the grid to the form, and setting up columns. After setting width and height to the dimensions of the panel on the form, I then enable ajax and add any behaviours to the grid.
I might change grouping/filtering visibility in OnInit PostBack in response to user actions.
In OnLoad I set the data source and bind, and in Page_Load I call RefreshBehaviors.
The reason that I sometimes need to adjust the height is because the panel also contains a toolbar which may or may not be visible. If it is visible I need to reduce the height of the grid to allow for it, so I do this in the clientside Initialize event ... because I don't know the height of the toolbar (given styling etc) until that point.
The reason that I want to set the grid dimensions to a specific pixel value, rather than leaving them as 100%, is that with 100% the grid seems to have problems calculating its height/width correctly and it goes into a "long running script" error when columns are grouped or sorted, because it is constantly trying to readjust its dimensions.
If you can send me your client-side and server-side code that relates to the grid (or a small project), I can look further into this and see what I can recommend.
Thanks for your offer. I have found another solution. We now adjust the grid height from JavaScript when the page is ready but before the grid has populated (i.e. a script at the end of the page's body). If we wait until the grid has populated, then we get the problem that I originally referred to.