• Avoiding Write Conflicts on Datetime Fields
• Basing a Grid on a Stored Procedure
• Calling a UX Component from a Grid and Pass Information from the Dialog Back to the Grid
• Collapse Grid Group
• Creating a Grid that Looks Like a Form
• Defining Dynamic Content for a Tab Accordion Control Pane
• Disable Input Controls when Update Not Allowed
• Display Fadeout Message on Save
• Display Three State Checkbox
• Displaying Images from a Table
• Dynamically show add records button
• Export Checked Records to Excel
• Export Grid to Excel or Ascii
• Filter Grid With Selected List Rows
• Filter Records Using Extended User Info
• How to Override Certain Settings in the .a5w page or in the V10 OnGridExecute event
• Import Excel or Ascii to Grid
• Putting Up a Wait Dialog While The Grid is Performing an Ajax Callback
• Setting Default Property Values
• Use System Defined Fields in Javascript Functions
• Using Custom Controls in a Grid Component

How to Call a UX Component from a Grid and Pass Information from the UX Component Back into the Grid

Description

Steps and examples on how to do this are described in this page.

Using the getParentObject() Method

The UX Component's getParentObject() method can be used to get a pointer to the parent object that opened the UX. If the UX is displayed from a Grid Component, the parent object will be the Grid.

After adding the Action Javascript to the Grid to Open a UX component, add a button to the component that will be displayed and place the following code to get the value from a control in the button's click event:

// Get a pointer to the parent object:
var parentGrid = {dialog.object}.getParentObject();

// Test that the parent exists:
if (parentGrid) {

    // Test that the parent has the "getSelectedRow" method:
    if (parentGrid.getSelectedRow !== undefined) {

        // Get the selected row:
        var parentRow = parentGrid.getSelectedRow();

        // Get the value of the NAME control:
        var val = {dialog.object}.getValue('NAME');

        // Set the value of the NAME field in the parent Grid:
        parentGrid.setValue('G','NAME',parentRow,val);

        // Close the window displaying the UX Component:
        {dialog.object}.closeContainerWindow(this);
    }
}

Capturing the Grid Row

In some situations, it may be necessary to capture the selected row for the Grid component before the UX component is displayed. To do this, add an Inline Javascript action to the onClick event for the button that opens the UX component and add the following code to the action:

window['__callingGridRow'] = '{grid.RowNumber}';

Then, change the JavaScript to set the value in the Grid row to the following:

// Get a pointer to the parent object:
var parentGrid = {dialog.object}.getParentObject();

// Test that the parent exists and is a Grid Component by testing for the "getSelectedRow" method
if (parentGrid && parentGrid.getSelectedRow !== undefined) {

    // Test that the window['__callingGridRow'] exists:
    if (window['__callingGridRow'] !== undefined) {

        // Get the selected row:
        var parentRow = window['__callingGridRow'];

        // Get the value of the NAME control:
        var val = {dialog.object}.getValue('NAME');

        // Set the value of the NAME field in the parent Grid:
        parentGrid.setValue('G','NAME',parentRow,val);

        // Close the window displaying the UX Component:
        {dialog.object}.closeContainerWindow(this);

        // Clean up the window object (delete the stored grid row):
        delete window['__callingGridRow'];
    }
}

Using the window Object

1. Create a button on the Grid to open the UX Component. Add the Open a UX component Action Javascript action to the button's onClick event.

2. Next, add the Inline Javascript action to the button's onClick event. Make sure that this action gets executed before the action to open the UX Component. Place the following code in the Inline Javascript action:

   window['__callingGridAlias'] = {grid.object}.gridId;
   window['__callingGridRow'] = '{Grid.RowNumber}';

   This code will create two global Javascript variables that contain the name of the Grid alias, and the current row number in the Grid.

3. In the UX Component, add a button and place the following code in the button's click event:

   var parentGrid = window['__callingGridAlias'];
   var parentRow = window['__callingGridRow'];
   if (typeof parentGrid != 'undefined' && typeof parentRow != 'undefined') {
       var val = {dialog.object}.getValue('NAME');
       window[parentGrid + 'GridObj'].setValue('G','NAME',parentRow,val);
   
       {dialog.object}.closeContainerWindow(this);
   
       // Remove __callingGridRow and __callingGridAlias from the window object:
       delete window['__callingGridRow'];
       delete window['__callingGridAlias'];
   }

This code checks to see if both the __callingGridAlias global variable and __callingGridRow variable are defined. If they are, then it does this:

1. Reads the value of a control called 'NAME' in the UX Component.

2. Executes the calling Grid's .setValue() method.

3. Gets a pointer to the window that displays the UX Component.

4. Closes (i.e. hides) the window.

5. Deletes the __callingGridRow and __callingGridAlias variables from the window object so they are undefined. Deleting the variables from the window object prevents updating the Grid if for some reason the UX Component is opened without setting the __callingGridAlias and __callingGridRow variables.

The only tricky part about the code here is the way in which the calling Grid's .setValue() method is called. Since we know the calling Grid's alias (it is in __callingGridAlias), we can construct the object name for the calling Grid ( parentGrid + '_GridObj'). Then we look in the global Javascript variable frame for the object (window[parentGrid+'_GridObj']). Once we have the object, we can call methods of the object.