I am having a problem with the web grid when editting or adding new rows with a row edit template user control. The user control is not opening right at the record level in the grid where it should be. I am using this function to resize the grid when the page is loaded(see below). I do this so that the grid height is set close to what would be 100% of the rest of the screen real estate.
However, in resizing the grid, the user template is not askew well below the row being editted.
At what point (x,y) does the Grid know where to put the user control?
function ResizeGrid(gridId, iOffset){ try { var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { myWidth = document.body.clientWidth; myHeight = document.body.clientHeight; } //gridHeight=myHeight-(selectionHeight+headerHeight+statusHeight+offsetHeight); gridHeight=myHeight-(iOffset); var grid = igtbl_getGridById(gridId); if (grid==null) {return false; } if(!ig_csom.IsIE || ((ig_csom.IsIE6 || ig_csom.IsIE7) && igtbl_isXHTML)){ grid.MainGrid.style.height = 0 + "px"; var marginHeight = igtbl_dom.dimensions.bordersHeight(grid.MainGrid);for(var x=0; x<grid.MainGrid.rows.length; x++){ if(grid.MainGrid.rows[x].id != grid.Id + "_mr"){ marginHeight += grid.MainGrid.rows[x].offsetHeight; } } if(gridHeight < marginHeight) { gridHeight = marginHeight; } // set the new widths and heights of the outer table and rows area grid.MainGrid.style.height = gridHeight + "px"; document.getElementById(grid.Id + "_mr").style.height = (gridHeight - marginHeight) + "px"; document.getElementById(grid.Id + "_mc").style.height = (gridHeight - marginHeight) + "px"; } else { grid.MainGrid.style.height = gridHeight + "px"; } } catch ( err ) { var txtMessage = document.title + " - Error in ResizeGrid()\n" + err.description; alert( txtMessage ); } }
Even if I set the grid height to 300px and remove the resizing of the grid I am having the same issue of the usercontrol opening farther down than the grid row record being edited. The user control in this case is below the viewable area of the browser.
You can try to adjust the position of the template after it's opened (AfterRowTemplateOpen). The element can be found: igtbl_getElementById(grid.Bands[0].RowTemplate).
By the way the grid has a resize method, if you'd like to try using it. grid.resize(w, h);
How do I set the position? All of the positioning properties seem to be read only.
I was thinking in the event handler do something like this:
function UltraWebGrid1_AfterRowTemplateOpen(gridName, rowId){ var grid = igtbl_getGridById(gridName); var templateElement = igtbl_getElementById(grid.Bands[0].RowTemplate); var topPos = templateElement.offsetTop; templateElement.style.top = (topPos - 200) + "px";}