Virtual Grid in Resizeable Pane

I am using a Grid object in a pane which is resizable using a jquery splitter plugin. The grid span is set to 100% height and width and is placed inside a div which is resized via javascript when the splitter is moved and grid.refresh is called after the resize. The grid is resizing correctly as expected, however when used in virtual mode, new rows which are uncovered by expanding the pane are not populated until the grid is scrolled and even then it is unpredictable. Sometimes the entire grid is filled with data, other times only a portion of the new rows are displayed.

I have solved the issue for the moment by only allowing the pane to be shrunken and not expanded, but this is not ideal. Also, when not using the grid in virtual mode the problem does not exist, but this is not practical given the size of my data sets.

Has anyone else experienced a similar issue and found any solution?

This post (or a link include) could Help and/or give address.
http://www.activewidgets.com/javascript.forum.23676.4/regarding-grid-resizing.html
HTH

Thank you Carlos, for your quick reply.

Unfortunately, while the subject of that post and those linked to it sounded promising, I think I have tried all of the solutions offered in them with no real luck.

I did find that adding the following lines when my pane containing the grid is resized comes closer, but it is still necessary to click in the grid or move the scrollbars in order to completely fill the grid with data. I would also like to find a solution which does not require calling the costly grid.refresh.

grid.setSize(widthofcontainerdiv, heightofcontainerdiv);
grid.refresh();
grid.setScrollTop(grid.getScrollTop()+1);
grid.setScrollTop(grid.getScrollTop()-1);

David,
The example above ( almost same as the one I'd did on http://www.activewidgets.com/javascript.forum.22876.8/several-problems.html ) does not include grid.refresh() at all,

Not sure if it is implicity included when scroll is changed ( hope it is just a simple of scrollTemplate or rowsTemplate) but seems to show the un-rendered rows/columns.
Thanks

var obj = new AW.UI.Grid; 

obj.setId("MyGrid")   

obj.setCellText(function(i,j){return j + '-' + i});   

obj.setHeaderText(function(i){return 'header-'+ + i});   

obj.setColumnCount(42);   

obj.setRowCount(15);   



var button = new AW.UI.Button;  

button.setControlText('Show data on empty columns') 

button.setId('a01'); 

  

button.onControlClicked = function(){  

obj.setStyle('width', '800px' ); 

this.timeout(function(){  

obj.setScrollLeft(obj.getScrollLeft()+0.2); 

obj.setScrollLeft(obj.getScrollLeft()-0.2); 

},2000); 

}  



document.write(button);  

document.write(obj);

Hey, you're right...Thank you.

Now I am just calling grid.setSize and grid.SetScrollTop(+ / -) when my pane is resized and it seems to be working correctly in IE without a grid.refresh. Firefox, on the other hand, seems to still show the same symptoms of needing a manual scroll or click on a row in order to mostly fill the grid.

Since this is an internal project using IE only, this solves my issue. I will look to find a more complete solution once time allows.

And for avoid focusing on the grid to fire the function check this one:

var obj = new AW.UI.Grid; 

obj.setId("MyGrid")   

obj.setCellText(function(i,j){return j + '-' + i});   

obj.setHeaderText(function(i){return 'header-'+ + i});   

obj.setColumnCount(112);   

obj.setRowCount(115);   



var button = new AW.UI.Button;  

button.setControlText('Show data on empty columns') 

button.setId('a01'); 

  

button.onControlClicked = function(){  

obj.setStyle('width', '800px' ); 

obj.setStyle('height', '800px' ); 

}  



obj.onScrollTopChanged = function(){

this.timeout(function(){  

obj.setScrollLeft(obj.getScrollTop()+0.2); 

obj.setScrollLeft(obj.getScrollTop()-0.2); 

},2000); 

}

document.write(button);  

document.write(obj);

Forum search