The web client’s editable grid does not resize well when you expand a tab that the grid may exist on. You end up with a lot of white space at the bottom of the grid where you could be showing data from the grid. Unfortunately the architecture of the tab workspace does not offer an easy way to automatically hook into the tab drag events to be able to resize a grid automatically. This post will give you a way to do it manually, by adding a toolbar button above the grid that the user can click to allow the grid to fill the available space that the tab occupies.
Lets take a look at step by step how to do this.
First open the quickform in the Application Architect.
On the Toolbar above the grid, right click and choose Add Control Button…Button.
Set the properties as follows:
- Button Type- Icon
- Caption- Resize
- Image- Pick an appropriate image
- ToolTip- Resize the Grid
- On Client Click- return resizeGrid();
Now on the form, choose Load Actions. Add a new load action, action of C# Snippet Action Item. Set the On Repaint Event to True.
Now lets get into the code:
The first bit of code we will use is this:
string gridID = string.Empty;
foreach (Control c in Controls)
{
var cont = c as ScriptResourceProvider;
if (cont != null)
{
gridID = cont.ID.Replace("_Strings","");
break;
}
}
What we are doing here is getting the control added to the page as part of the editable grid deployment which is a ScriptResourceProvider. We do this because the ID of this control happens to be close to what we need for the rest of our code and is based on the tab name and grid control name. We strip of the “_Strings” part of the ID returned and set that as our gridID variable.
The next part of code constructs a javascript function which will be injected onto the page. The function basically does 4 things:
1 Gets the grid DOM element, it’s parent div (with an ID ending in _Container), and the grid header div (ID ending in _HeaderBar).
2 Calculates the size available using the window.innerHeight and then subtracting the Y position of the header div, the height of the header div, and an extra 10 pixels.
3 With the calculated height it then sets the height style attribute of both the grid and it’s parent div.
4 Using dojo, gets the instance of the dojo grid control and then calls the grid’s resize and update methods which actually sizes the grid into the resized div controls.
Here is the code:
string jscript = @"function resizeGrid() {
var gridid = '" + gridID + @"';
var parentgrid = document.getElementById(gridid + '_Container');
var griddiv = document.getElementById(gridid );
var headerdiv = document.getElementById(gridid + '_HeaderBar');
var h = window.innerHeight;
var w = headerdiv.clientHeight
var t = headerdiv.getBoundingClientRect().top;
var newheight = h - t - w - 10;
griddiv.style.height = newheight + 'px';
parentgrid.style.height = newheight + 'px';
var grid = dijit.byId(gridid);
grid.resize();
grid.update();
return false;}";
Next we create another javascript string we will also inject on the page. This one uses the dojo ready event which will automatically run our resize code when the page loads.
string jscript2 = @"var resizeTimeoutId;
require(['dojo/ready'], function (ready) {
ready(function () {
window.clearTimeout(resizeTimeoutId);
resizeTimeoutId = window.setTimeout('resizeGrid();', 300);
});
});";
Finally we inject our javascript onto the page:
ScriptManager.RegisterStartupScript(Page, GetType(), "FXResizer", jscript, true);
ScriptManager.RegisterStartupScript(Page, GetType(), "FXResizer2", jscript2, true);
Now when our tab is opened it will automatically resize the grid to fit. Also we have allowed the user to manually call resize by the toolbar button that we added to the page, which will call the resizeGrid() function injected to the page. This allows for them to resize the grid after the do things client side, like dragging tabs around and things.
A word of warning, this code will not work if the user drags the tab to the middle view. This assumes the tab is on the normal row of tabs along the bottom.
