How a Grid in a Tabbed UI Pane can invoke Methods on a Grid in another Tabbed UI Pane


In the Grid to be controlled, add the following code to the onGridRender client-side event:

if (typeof tbiObj != 'undefined') { //make sure we're in a Tabbed UI
    tbiObj.__childGrid = '{grid.componentName}'; //save the Grid name

This will store the name of the grid in a property of tbiObj, which is always the JavaScript variable name of the Tabbed UI. Note that {grid.componentName} is a placeholder defined in Alpha Anywhere; when the Grid is prepared for rendering, the placeholder is replaced by the actual alias of the Grid before the JavaScript code is emitted. Also note that, which the property name used is arbitrary, the two grids must agree on what property is used.

For the purposes of the rest of the example, assume that the Tabbed UI pane that contains the Grid to be controlled is named 'Child'. By named 'Child', we mean that 'Child' is the label that you gave to the Tabbed UI Pane.

In the controlling Grid, create a button that will cause the child (controlled) grid to navigate; you can call it "Next Child". Add the following code to the onClick event of this button:

var go = tbiObj.__childGrid; //matches previous
window[go + '_GridObj'].pageNavigate('next'); //next record
tbiObj.selectPane('Child'); //switch focus to pane with changed Grid
//In the above line 'Child' is the label of the pane to select

See Also