NextGen Consulting

Setting Search Grid Properties

I was asked the following question:

Hi Yuval
I want to set the style for Search Grid control, but I don’t know how set it?
Could you tell me to set the style for Search Grid controls?
for example:  Set the width of columns, scroll…

Many thanks

Quan

Grid Properties

General Grid properties set the overall Grid control behavior.  For example:

• autoResizeMode
  Sets the auto resize mode of a grid.
   
• gridColumnSequence
  Sets the column sequence by the input column name order, the column sequence is an ordered collection of column names.  The order of this collection represents the order of columns in a grid like display. The column orientation, either from left to right or from right to left depends on the end users locale setting. The column order string is delimited by comma.
   
• preferredRows
  Sets the preferred height of the control in logical units. In other words, define Setting the value to -1 restores the default behavior.Scrolling will be set according to the number of records provided in the Display Tabular Data Model (TDM) versus the grid height. If the number if the total height of rows to be displayed is larger than the Grids height – then scroll bars will be displayed (you can limit the number of retrieved records from the database by setting the application’s workspace variable gridDefaultNumRequested to your preferred capacity (the default is 20).

 Column Properties

Each Search Grid (or any simple grid) column is directly related with a UI control (I.e. label, textbox or a dropdown). The column’s control properties set the column rendering attributes such as column width etc. 

When setting Grid’s column controls properties, note that within the column main properties, you will find a property named ‘control’. This ‘control’ can be expanded to reveal a group of sub-properties. Both types of properties set the way the column will be displayed. However, note the difference behavior impact between ‘main’ properties and ‘control’ properties which have similar name. 
 

For example, assuming we need to display a three columns Grid. We need to add three Label controls under the Grid control (drag 3 label controls and drop them under the Grid control).

 
The following label column ‘main’ properties (marked in red) will set the following behavior:
 

• Title 
  Column title
   
• columnSpan
  Indicates by  how many columns this column is to be spanned.
  Value   1 or 0 means no span.
  Value of  -1 means span the whole row.
   
• Visible
  Sets the visibility of the entire column space:
  When set to  false the whole column space is removed (our example grid will show only two columns).
   

 Control Properties

The following are ‘Control’ properties (marked in green):

•  horizontalAlignment
  Sets the horizontal alignment of the (optional) icon and text.
   
• horizontalTextPosition
  Sets the horizontal position of the text relative to the icon.
   
• preferredColumns
  Sets the column width.  Setting the value to -1 restores the default behavior (defined by grid’s property).
   
• Visible
  Sets the visibility of the column contents. Does not remove column space.
  When set to false the column space remains in Grid (our example grid will show three columns), but column content will be empty.
   

For complete list of properties, follow the Smart Client designer properties tooltips, or read programmer’s documentation.

Look and Feel

Smart Client Framework also provides a Look and Feel control using Style sheet. This sets the UI controls appearance on the screen. The style sheet defines styles, each style group set of display attributes. In order to apply a style to specific Grid, the Grid’s style property needs to be set to the style name.

The following L&F style attributes can be applied on a Grid:

• Border
  The border for a search grid is applied around the table, including the column titles. It does not surround the search grid header (the area containing the Search Now button etc.). In order to set a border around the entire search grid, place the search grid in a panel and apply the desired border to that panel.
   
• alternateRow
  A 24-bit number; 3 X 8 bits RGB components  I.e.: Red -> 0xff0000
  Used to paint row’s background alternately between table’s background color and the specified alternate backgroundColor.
   
• rowHeight
  Row height in pixels. I.e.: 18
   
• gridColor
  Color             a 24-bit number; 3 X 8 bits RGB components  I.e.: Red -> 0xff0000
   
• showGrid
  Boolean         true or false
   
• showHorizontalLines
  Boolean         true or false
   
• showVerticalLines
  Boolean         true or false
   
• backgroundSelectionColor 
  Color    3 X 8 bits RGB components      I.e.:  Red -> 0xff0000
   
• textSelectionColor
  Color             a 24-bit number; 3 X 8 bits RGB components  I.e.: Red -> 0xff0000
   
• backgroundHighlightColor
  Color             a 24-bit number; 3 X 8 bits RGB components I.e.:  Red -> 0xff0000
   
• textHighlightColor
  Color             a 24-bit number; 3 X 8 bits RGB components I.e.:  Red -> 0xff0000
   
• focusBorderColor
  Color             a 24-bit number 3 X 8 bits RGB components  I.e.:  Red -> 0xff0000