Define Named Layouts

Description

The Defined named layouts property gives you access to the Named Layouts Builder.

Clicking the button next to the 'Define named layouts' property will open the builder.

images/namedlayout1.png
The Named Layout Builder

Create a Named Layout

  1. Open the grid builder, define a Data Source and Query, and select four fields to use with the grid in the Fields page. This example uses for fields from the Northwinds database's Customers table.

  2. Find the 'Multiple Named Layouts'' section in Grid Properties.

  3. Check the 'Has named layouts'' checkbox and then click the button next to the Define named layouts property. The Named Layout Builder will open.

  4. Click the 'Add New Layout' button under the 'Named Layouts:' menu. The New Named Layout dialog will open.

    images/phone.png
  5. Give the layout the name 'Phone' and click OK.

    images/phone2.png
  6. In the 'Named Layout Properties' section find the Layout type and select SingleColumn from the dropdown.

    images/phone3.png
  7. In the Grid Templates section of the Named Layout Properties, click the button next to the Row template property.

    images/phone4.png
  8. The 'Named Layout - Row Template' editor will open. On the left side of the editor is a list of available fields. Double click on each available field to add it to the layout definition.

    images/phone5.png
  9. These are the fields that will appear in the layout. The result should look something like this:

    images/phone6.png
  10. Optionally you can add some html breaks between the field placeholders so that the fields will stack vertically. Click OK to close the editor.

    images/phone7.png
  11. In the 'Named Layout Builder' click on the button next to the Title template property.

    images/phone8.png
  12. This will open the 'Named Layout - Column Titles' editor. This is where you can define how the layout will sort, if there will be sorting options, and what field will be used.

    images/phone9.png
  13. Select a placeholder starting with "{grid.columnSorterLink:Field=" from the Available fields list that uses a field that you want the layout to sort by. Double click on the placeholder to add it to the field definition. This example will sort based on the ContactName field.

    images/phone10.png
  14. Click OK to close the editor and OK again to close the Named Layout Builder.

  15. Run the new layout in the Live Preview or Working Preview tab. The preview will probably open with the default grid layout. A dropdown at the top of the screen should let you switch to the new Phone layout.

    images/phone11.png
  16. Result:

    images/phone12.png