The 3-level grid extension creates multi-level hierarchies that span farther than a single grid configuration allows. The third-level grid appears beneath the second-level grid, and a single save updates all three levels of grids.
Step 1: Configure Parent Grid (with parent + child objects)
This is the parent grid. Configure this grid with parent + child objects as shown below.
Step 2: Configure Child Grid (with ONE grandchild object)
This is the third-level grid, also called the grandchild grid. Configure this grid with the object you want to appear as the grandchild object (the third-level object).
Step 3: Create the CSS and JS extensions in the Grid Wizard
There are 4 extension files that need to be applied to your grids for this extension to function.
Navigate to the Grid Wizard > Manage Extensions. You will create 4 new extension files in your Grid Wizard (full code files included at end of document):
-
Parent_CSS
-
Child_CSS
-
Parent_JS
-
Child_JS
Step 4: Add two extensions to the parent grid
The Parent CSS and Parent JS extensions tell the grid to recognize the child grid that you created in step 2.
Go to the Grid Wizard, select your parent grid from the dropdown menu, then scroll to the bottom of the Grid Wizard 1 and add the Parent_JS and Parent_CSS extensions that you created in step 3 to the grid.
Note: Modifications are required on the parent JS file. See step 6 for specifics, and details are also included in the JS file comments.
Step 5: Add two extensions to the child grid
This tells the grid to act like a third-level child grid.
A child grid does not show various grid attributes such as the more button, the show button, and more at the top.
Go to the Grid Wizard, select your child grid from the dropdown menu, then scroll to the bottom of the Grid Wizard 1 and add the Child_JS and Child_CSS extensions to the grid.
Note: No modifications are needed on the child CSS or JS. They can be applied as-is.
Step 6: Modify the parent JS file
Three modifications are required for the parent JS file to function correctly.
Navigate to Grid Wizard > Manage Extensions and select the Parent_JS file to make the following 3 updates:
-
Update childGridUrl in Parent_JS to include the name of the child grid you created in step 2.
b. Paste it into the quotes in this line of code: var childGridUrl = '3 level child grid';
c. This points the parent towards the correct child grid.
-
Update the var orderOfChildObject variable in Parent_JS to be 1, 2, 3 or 4. This tells the child represents which child object the third-level grid will appear beneath.
a. Modify this line of code: var orderOfChildObject = 1;
b. For example: If you put “1”, the third-level grid will appear under the first child object in your parent grid. If you put “2”, it will appear under the second child object, if you have your parent grid set up with 2 child objects.
-
Update the fpf or the Id value in Parent_JS.
b. This action will link your Parent grid to your Child grid, via the child grid object.
Step 7: Launch your 3 level grid
Navigate to the Grid tab and select your parent grid from the menu. Expand your grid to see the child object records. Click the little dropdown arrow that will appear to the left of each child object (whichever one you configured in step 6) to see the third level grid.
The 4 Extension files are provided in the attached zip below.
