Layout Options


The Grid layouts presented in the Component Type page include Tabular, Form(Columnar), and Stacked Columnar) grids. As each of these types creates different grids, selecting one or another will ultimately alter what you see in your Layout Options when you come to the properties page.

Class map

Loads the Class Map Overrides Dialog. Allows you to override the way in which any of the Abstract CSS Class Names are mapped to Physical Class Names. When the Component is designed, all of the HTML controls in the component use Abstract CSS Class Names (e.g. [class.gridPartInput]). When the Component is run, the Absrtact CSS Class Names are converted to Physical CSS Class Names (e.g GlassBlueInput). The Class Map is used to convert Abstract CSS Class Names to Physical Class Names

Resolve abstract CSS class names

Can view class names using the browser to see real physical class names.

Style name

'Style name' lets you set the style of an individual component. To set a style first click the button next to the Style name property to open the Select Style dialog.

Customize style colors and fonts

Customize the style colors and fonts. This provides a simpler way to customize colors than editing the style.

Use compact theme

The style you selected supports a 'compact' view. The standard view is more appropriate for mobile applications. The 'compact' view is often used in desktop browser applications.

Edit style in Style Builder

Edit style in Style Builder property

Simple style

Check this box to use a simpler version of the stylesheet which is more appropriate for a form (i.e. 'columnar') layout.

Style overrides for Javascript elements

By default, the Tabs, Accordions, pop-up Windows, Lists (edit-combo, auto-suggest, etc.) are styled using the selected Grid style. You can override the style for these elements. This might be necessary for certain styles where the default appearance for these elements do not work well.

Repeating columns

By default, the Tabs, Accordions, pop-up Windows, Lists (edit-combo, auto-suggest, etc.) are styled using the selected Grid style. You can override the style for these elements. This might be necessary for certain styles where the default appearance for these elements do not work well.

Snaking style

You are probably familiar with this display from sites like Netflix or Amazon, even if you have never seen the term 'Snaking style'. This style is used particularly with image links displayed in a row across a screen, think movie genre displays or a list of recently viewed items on a shopping site.

Add records only

The ' Add records only ' property allows users to add new records but not see existing records.

Show Confirmation Message

This property specifies if a conformation message should be shown after the Submit button is pressed when a user enters information. Because this feature is only utilized for grids that can be altered, you will need to select Grid is Updatable in the Component Type page.

Confirmation Message Template

This property creates a conformation message that appears just above your grid. By default on the right side of the screen. If you leave this property blank, a default template will be used. Use the {RecordCount} placeholder in the template to show the number of records added at any one time.

Rows of data

You can use this property to specify the number of rows data to show on each page.

Rows of data when search active

Use this property to specify the number of rows to show in the Grid when a search (done in the Search Part) is active. Set to -1 to show the same number of rows as specified in the 'Rows of the data' property. Set to 0 to show all the records in the current query. The 'Maximum number of records per page' property will still apply.

Maximum number of rows per page

Maximum number of rows to display. Only applies if 'Rows of data' is set to 0, which causes the Grid to show all records in the query at once on a single page. Set to 0 if you do not want to specify a maximum value.

Number of 'Layout' Columns

The Number of 'Layout' Columns property takes all the information contained in a single record and displays it across a specified number of columns.

Suppress empty rows

The Suppress empty rows property indicates whether or not to hide empty rows. Rows are hidden if a query returns fewer records than the number of rows in the grid. By default this property is set to true.

Show title

Indicates whether or not to display the component title. If you click on the checkbox next to this property the Title property will open and allow you to set the title for your grid. By default this property is not checked.


The Title property allows you to set the HTML properties for the Title of a particular grid. Clicking the button next to Title opens the HTML editor. This lets you adjust the type of font used for the title, its color, size, its alignment, add images, and so forth.

Font size

You can scale the fonts in your grid component using this property. There are five choices to select from, 'Smallest', 'Smaller', 'Medium', 'Larger', and 'Largest'. 'Medium' is the default setting and is also not scaled; such that the fonts shown under the Medium setting will correspond to those defined in the style sheet.

Has 'Records Per Page' selector

Adding the ' Records Per Page ' selector allows the user to change the number of rows displayed after the grid opens on a page.

'Records Per Page' selector choices

The 'Records Per Page' selector choices property lets you specify the number of pages a user can view in the 'Records per page' drop down.

'Records Per Page' template

This property helps you specify the template for the ' Records per page ' selector . The default setting for this template is the following....

Highlight row on hover

Highlight row on hover helps identify the currently selected row so that it is easier to click on with the mouse. It is sometimes difficult to immediately find the position of the cursor on a grid. Selecting this property will cause the style of a row to change when the mouse hovers over the row.

Highlight row on select

Highlight row on select property highlights a row in the Grid part when the user clicks on that row.

Has checkbox select column

The ' Has checkbox select column ' property adds a column with a checkbox for each row in a grid component. This makes it possible for users to easily select one or more records. This property also adds a checkbox in the grid's title bar that will select/deselect all of the checkboxes.

Has row selector column

This property specifies if the grid has a single column containing a row selector. The row selector indicates which row in the grid is currently selected. The row selector normally appears as a small triangle on the left side of the grid. If your grid is updateable and only allows users to input data, not read existing data, then the row selector will appear as a small asterisk.

Vertical alignment of controls in columns

Specify the vertical alignment of controls in each column. Default is "Middle".

Can collapse grid?

The Can collapse grid? property allows a user to click an icon to hide the grid and just show a simple title bar.