From The Field

This series of screenshots and comments will help you implement a master-detail grid solution using the Toolset. The instructions assume you know how to create providers for the grid displays that will accept passed in parameters for filtering the provider. (If you need more information on this, you can reference this document.)

Note: screenshots have been redacted to protect sensitive data.

Top grid displays technical specifications. When you click on the Documents icon, the bottom grid will display related documents for that specific technical specification.

This screenshot shows the loading icon when documents are loading in the grid after clicking on the Documents icon in the top grid.

This screenshot shows the related documents after the grid loads.

To implement this place a grid on your page that loads master items. We will later return to what you need to add to this grid display to create the Documents icon which provides the interaction between it and the documents grid.

Now create a web part page that has nothing but web part zones. Place a grid display on this page for the related documents. Configure it for passthrough. In the example below, it’s looking for a single passthrough parameter called TSN.

<PT><P><PTType>post</PTType><PTRequest>TSN</PTRequest><PTName>TSN</PTName></P></PT>

Now place a Page Utility web part on the same page as your master (parent) grid. Configure it to load the page with your child grid. In our case, this was the web part page with the Related Documents grid. Note the name in our example - RelatedDocs.

<PageLoad>
<Setup>
<Name>RelatedDocs</Name>
<Id>RelatedDocs</Id>
<Width>100%</Width>
<Height>390</Height>
<Src>http://devrapps.corasworks.net/rfdev/hapts/Toolset/TSDocs.aspx</Src>
<FrameBorder>0</FrameBorder>
</Setup>
</PageLoad>

At this point, there is a main grid for displaying Technical Specifications. And a Page Utility with a second grid display for displaying Related Documents that has been configured to accept a passthrough parameter.

The only remaining step is to add a new column to our Technical Specifications grid for the Documents icon. When the user clicks on the icon, it will load the Page Utility with a reference to the web part page with the Related Documents grid display. And it will pass in the TSN.

The Add Column XML for the Documents icon is provided below. The main take away from this step is the javascript function for reloading the Page Utility. By appending the name of your Page Utility (RelatedDocs) to the function WTFrameSetter, you can invoke the reloading function. WTFrameSetter is a built-in function in the Page Utility that allows you to reload the source URL.

Notice in the Add Column XML that we are concatenating the Technical Specification Number to the end of the page URL.