A master/detail view includes a datagrid and a detail view of the currently selected list item.
Use a master/detail view when users need to see more information about the data in a datagrid than just a few key attributes.
- Orient the two views in a way that makes best use of the screen real estate. Typically, the details view is placed below the master list.
- Strive to use equal amounts of screen real estate for the master list and detail view.
- Use a split bar between the master list and detail view to enable users to adjust the relative sizes of the views.
- Select the first line in the master list by default and show information for that object in the detail view.
- When the user selects an object in the master list, show the the details of that object in the detail view.
- If the user selects multiple objects, show a message in the detail view. For example, "The detail view can only show the details for one object at a time."
- Follow the guidelines presented in the Datagrids standard.
- Avoid horizontal scrolling.
- Start the detail view with a header. Preferably, match the text of the header to the text of the identifying column of the master list, typically the first column.
- Display the details in a form that best matches your needs, for example, a datagrid, tabbed pane, stack view, portlet, or graphic.
- Use bold font and sentence-style capitalization for the header. Alternatively, use dark gray text.
- Repeat some of the key attributes shown in the master list to help orient users in the detail view.
- Use the full horizontal width of the detail view and limit the amount of vertical scrolling.
- Never require horizontal scrolling.
The following table shows several forms for the detail view. Click a thumbnail for a larger image. For more information, see the standard for the specific UI component.