Grid Fields

IN THIS PAGE

Description

A rundown of options for creating and manipulating grid fields in the Grid Component builder.

 Selecting the Fields to Display

  1. Display the Grid > Fieldspage.

  2.  Do you want the grid to be editable?

    If you want the grid to be updateable, but initially specified read-only, you may check the editable?checkbox.

    • Although a grid starts out as updateable, it can still be read only. This has the virtue of using text boxes instead of labels to represent the data in the grid, which in turn provides more reliable formatting alternatives, as well as the ability to copy data from the fields. If you change a grid that started out as updateable to read only, you will have to manually reset the grid field control types to label. If the grid is updateable, you may also disable the update properties of any particular field.
    •  Refresh the Available Fields List

      If a field that you know is part of the table is not visible in the Available Fieldslist (typically after you have restructured a table), go to the Grid > Query page and click to refresh it.

  3.  Add to the Selected Fields List

    Display the Grid > Fieldspage.

  4. Use and to move fields from the Available Fieldslist to the Selected Fieldslist.

  5. Use and to move fields from the Selected Fieldslist to the Available Fieldslist.

  6. Optionally, use the , , and buttons to reorganize the sequence of selected fields.

 Detail View Considerations

When creating a Detail View, it is necessary to have a unique key for each record. Thus, if you are going to have a Detail View, you must:

  1. Add your key field into the Selected Fieldslist.

  2. Select the control that contains the key field and change its Display Settings > Control typeto "Link".

  3. Change the control's Link Properties > Link address typeto "DetailView Link".

  4. Display the Detail View > Propertiespage.

  5. Select the control that contains the key field in the Detail view hyperlink field > Hyperlink fieldlist.

There are two other special fields named and that can identify a record's position in the grid and in the current query. However, in a multi-user environment, cannot be relied upon to provide a consistent link to the target record. In this case you would want to create an expression based on two or more fields in the source table and use this expression as the Hyperlinkfield of the Detail View properties page.

 Grid Field Properties

The Grid Fields page is where you define what fields you will use in your grid, insert special controls, and set properties for individual controls. To display an individual field's Properties menu simply select that field in the Selected: Fields list. The properties for each field control you select are defined on the right side of the screen. These Field Properties change depending on the control selected, whether that control is editable or not, and the nature of the grid layout selected. The default values for these properties produce a useable starting configuration for your grid. This means that you can largely ignore these optional properties when you are learning to build grids or you expect to gradually refine your design in later revisions.

By default the Field Properties for any given field are displayed by Category. Right clicking on the white space in the Field Properties list will display other options. These include Categorized , the default, which displays menu options in groups; Alphabetical , which displays all menu options in a single alphabetized group; The Toolbar visible option, which displays buttons that switch between Categorized and Alphabetical display modes; and the Help visible option, which displays help for the currently selected property at the bottom of the property menu

 Property Menu Options:

Right click in whitespace for menu options

It is notpossible to display a default value for a field in a grid's new record row. However, you can insert a default value if the user leaves the field blank by inserting a script into the grid's BeforeValidateNewRecordsevent.

Display Settings

 Control type

If your grid is ' Read only ', then the fields that you put on the grid will be displayed by default using Label  controls. If the grid is Updateable , then the fields initially will be displayed using textbox controls. Label controls display the value of the field but do not have a width setting. In contrast, Textbox controls always have a specified character width, even if the field is Read only. For some data types, such as Images  and dates, you will have to manually select the control type. You can select other control type by using the Control Type dropdown under Display Settingsin the Field Properties list. The types of controls that you can place on a grid are:

  •  Label

    A read-only control suitable for character, numeric, and date/time data.

  •  Textbox

    An editable control suitable for character, numeric, and date/time data.

  •  TextArea

    Similar to a text box, but with multiple lines.

  •  Link

    A link that may open another page or select a record to display.

  •  Image

    Displays either embedded or linked images.

  •  DropDownBox

    A list box that appears as either a list or combo box. Drop-down boxes present a selection from an existing list of values; that is hard coded or retrieved from a table.

  •  RadioButton

    A circular button that allows users to select from a list of values.

  •  Checkbox

    A square box that allows a selection from a list of values.

  •  Custom

    You define the data to display and its formatting using Xbasic and HTML.

  •  Hidden

    Hides controls without hiding the column that contains them.

    tmpl.Field_Info[N] .controltype as C

 Control javascript

You can specify Javascript for each control in the Grid's Grid part or Detail View part. This makes it very easy to use 3rd party libraries, such as jQuery, to decorate controls. When you define the Javascript for a control, you can use the special {grid.controlId} placeholder. This placeholder gets replaced at run-time with the actual Id of the control. Example code to use the jQuery datepicker (ignore any markers you see):

jQuery('#{Grid.ControlIdEscaped}').datepicker( { onSelect: function(dateText, inst) { //get the ID of the control var id=i nst.id; //the ID is encoded for jQuery ( periods are converted to \\.) - remove the encoding. id=$ u.s.tran(id,'\\',''); id=i
						d.split('.'); //get the name of the control. it is the word after the last period id=i d[id.length-1]; {grid.object}.setValue('G',id,{grid.rowNumber},dateText); } } );

Here is another, much simpler way of doing it. This causes the control's 'change' event to fire when the selection is made, thus causing the record to go dirty.

jQuery('#{Grid.ControlIdEscaped}').datepicker( { onSelect: function(dateText, inst) { $e.execute(this,'change') } } );

Notice that when the user makes a selection from the date picker, it puts the value in the control, but does not cause the row to go dirty. That's because jQuery did not automatically call the Grid's .setValue() method to set the field value (which would have caused the row to go dirty). Therefore, it is necessary to hook the jQuery date picker's onSelect event where we can call the Grid object's .setValue() method.

See Also, JQuery Support

 Grid and UX Component - jQuery Date Picker

The Grid and Dialog Component both have a 'Control Javascript' property. This property can be used to define any Javascript that you want to emit when the control is rendered. This property can be used to for many different reasons. This video shows how the property can be used to hook up the jQuery date picker.

See Also JQuery Support

 Display format

If the control type is Label, Link, TextBox, or TextArea, the Display Format property allows you to automatically change the presentation of your data. For example, a money value could be displayed with its currency symbol and commas, and with the correct number of decimal characters. An In-Line style overrides the formatting of the cascading style sheet. If you wanted the text to be bolded, or in a different font, point size, or color, this is where you would define the formatting. You may want to allow only certain users to see a field. To do this set a minimum user security level required before the field will display. You may want to allow the user to see the fields in a grid, but not edit, delete, or insert records. To do this, set three different permission properties that control grid update. You may also want to define validation rules to improve the quality of user input.

This expression formats the data after it has been entered into the field. Click to display the Display Format dialog box. This property should be set to one of the following values: Null (empty) An Xbasic expression that returns a character value. The expression should use & < value> as Placeholder for the field value, as in the following example: f_upper(& < value>).  Optionally, click Select Pre-Defined Format to select a format from the Pre-Defined Formats dialog box. Note : There are no predefined display formats for short time (Y) fields. However, you can write your own. Note : If the control type is "TextBox" and the field type is "Date", then a Date Picker will appear. You must set the tmpl.Field_Info[N].DatePicker.DateFormat to the same style. See Date Picker DateFormat.

  •  Display Format

    tmpl.Field_Info[N] .DisplayFormat as C
  •  Display unformat

    If you set a Display Format, you may also place a character expression in the this field. This expression reformats the data before it is stored in the database.

    tmpl.Field_Info[N] .DisplayUnFormat as C

 Create a Conditional Style for a Field:

  1. Open the Grid Builder and go to the Design tab. On the Component Type page select read-only

  2. On the Data Source page select either .dbf or SQL . This example uses the SQL table Northwindsdatabase.

  3. On Query(DBF) or Query(AlphaDAO) create the connection to your database and select a table to work with. This example uses the Order_detailstable.

  4. On the Fields page add some fields from the Available Fields: list to the Selected: fields list.

  5. Select a selected field, in this case Quantity, and scroll down the field's property list to the Summary values section.

  6. Check the Average checkbox under the Summary values section.

  7. Still in Field Properties , go to the Display Settings and click the Conditional style property button.

  8. The Conditional Style (Server-side) dialog will open. Click the Add condition button at the bottom of the dialog.

  9. The Edit Condition dialog will load. Click the ' Insert Fieldname ' hyperlink.

  10. Add the 'Quantity' field, or the fields you are using, to your expression. Then after it add '> summary.quantity.average' to complete the Expression.

    • Quantity> summary.quantity.average
  11. In the Style: menu click on the Font color selector button and change the font color. Click OK to add the Expression to the Conditional Style dialog.

  12. Click the Add condition button again. Add a second condition, this time using a less than < sign .

    Quantity < summary.quantity.average
  13. Set a different Font color for this condition. Click OK, the Conditional Style (Server-side) dialog should now look something like this:

  14. Now go to Live Preview > Full Preview . All of the records in the Quantity field should be colored differently, depending on if they are above or below the average. In the Quantity field blue is below and green above average

    •  Add Conditional images:

      Fields. choose image (insert) Conditional style Quantity > summary.quantity.average Choose image file. built in system image Quantity < summary.quantity.average Can insert custom javascript onto the control

 Validation rules

The Validation rules property defines how your grid component will respond when a user inputs data into an editable field. As with the Field Properties list, these rules change depending on what type of control you are working with.

  •  Invalid data type error message

    The 'Invalid data type error message' rule works with all fields except character fields. This rule allows you to define a message that will display if the user types in an invalid date, time, short time, or number into an input field.

Client Side Properties

'Client-side' properties for a Grid include Calculated Fields, Show/hide Fields, Enable Expressions, Conditional Styles, and Client-side Formatting. Client-side Calculated fields are computed using Javascript. The calculation is performed as soon as any of the operands, i.e. javascript variables, in the client-side calculation change. You must therefore add formatting logic into your client-side calculated expressions. To see an example watch this video.

 Show/hide Fields

Show/hide Fields can be used with any field or Container. If you want to show/hide multiple fields at once, wrap the fields in a the show/hide expression for the container. Hiding fields can be useful. For example, you might have a grid with a 'billing address'field, a 'shipping addressfield', and a " shipping address is the same as billing address' field. If the later is checked, you might then want to hide the entire shipping address part of the grid. Here is the video.

 Enable Expression

Enable Expression allows you to enable or disable an input control. Conditional Styles contain conditions that are evaluated in a Browser using Javascript. This makes it possible to dynamically style controls without having to make Ajax callbacks. For example, if a user enters an exceedingly large value into a Quantity field, the entry can immediately be displayed in red to show it is too big. In contrast to 'client-side' conditional styles, 'server-side' conditional styles use conditions that are expressed using Xbasic expressions. These conditions are then evaluated on the server. The video below shows how client-side conditional styles can be used to display a different font and background color depending for different ranges of values.

 Client-side Formatting

can be used to define masks for character fields or number formats for numeric fields. For example, you might use a mask in formatting a US Phone number: ( ) -. For more on using client side properties check out this video.

The Client-side expressions that are used to define Client side properties can reference system fields. System fields are fields that are inherent inside Alpha Anywhere and that are not defined in the Query table you are using to access your data. Using these references can be used make your expressions more dynamic and can be used with different types of data. For example, grid.rowIsCheckedis a logical system field that will return true if the current row is checked. grid.checkedRowCountis a numeric system field that holds a count of the number of checked rows.

 Client side formatting

 Format type

The Mask Builder Dialog

 Format definition

 Calculated field expression

 Show/hide expression

When you define a client-side show/hide expression, you can also specify an animation effect to execute when the target object is shown or hidden. As demonstrated in the image below, when you open the expression builder there is a checkbox ' Animate show/hide '. When this box is clicked, the 'Define Animation' button is shown. The image below shows the dialog that is shown when the button is pressed. When you examine the expression in the property Grid, it will look something like this:

  • [Fade,Slow|Fade,Fast]]Region=" MA"
  • The animation expression is added in front of the show/hide expression and is enclosed in braces ]. It shows the animation effect and duration for the 'show' action and the 'hide' action.

 Enable expression

 Conditional style

Conditional styling for a Grid row, checked rows are red. Unchecked rows are black.

 Label Properties

  •  In-line style

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    tmpl.Field_Info[N] .Label.InLineStyle as C

 TextBox Properties

The most important properties of a TextBox control are the Size and MaxLength properties. The MaxLength should match the field definition in your table. The size can be large>

  •  HTML5type

  •  Size

    Sets the width of the field in characters.

    No matter what you specify for height and width of a control, if the content is larger, then your browser will expand the table cell for you. There is no way to avoid this from the design of your grid or HTML. You can trim your data if it is crucial that your cells never expand. And even then, you have no control over the fonts being used by your user's browser so they could have things set to be really large and still be larger than the table cell.
  •  MaxLength

    Sets the maximum length of the user's input in characters.

  •  In-line style

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

  •  Container in-line style

  •  Is a password field

    If this is a password field, the characters will be replaced with bullets.

  •  Watermark

    Sometimes, the size of screen matters when a user is accessing an application you've created. So how do you build an effective application to be used when screen real estate is limited, such as an Ajax Web app that will run on an iPhone? That's why "liquid" forms are an increasingly popular platform for running Web applications today. Liquid forms automatically reconfigure themselves based on the screen size. That's necessary for something like a smart phone,ine- color: initial; " This first video  we put together will show how the grid makes it easy to design liquid forms. Watermark fields    are also an effective tool for dealing with small screen sizes. Watermark fields let you put the field label inside the field itself. This is a great way to save space when you don't have space to spare.

  •  Custom attributes

  •  Code Examples

    •  Size

      tmpl.Field_Info[N] .Textbox.Size as N
    •  MaxLength

      tmpl.Field_Info[N] .Textbox.MaxLength as N
    •  Date Picker

      Specifies whether the control should have a pop-up calendar.

      tmpl.Field_Info[N] .DatePicker.Display as L
    •  In-line style

      tmpl.Field_Info[N] .Textbox.InLineStyle as C
    •  Is a password field

      tmpl.Field_Info[N] .Textbox.IsPassword as L
    •  Control In-line error style

      Specifies style attributes that are used when a validation error occurs. Click to define the In-line style. Refer to the Style Editor for details.

      tmpl.Field_Info[N] .Textbox.ErrorInlineStyle as C

 TextArea Properties

The most important properties of a TextArea control are the Rows and Columns properties, which define its size.

  •  HTML editor

    If you are creating an Updateable grid you can check the HTML editor property checkbox and add an HTML editor to your grid. This will allow users to easily add HTML to their records. If you want to add this property to a number of fields then you will need to go to Display Settings in the Field Properties list and change the Control Type for each field to TextArea . After creating a second TextArea control, simply check the HTML property again for that control, or use the eyedroppertool.

  • The HTML editor comes with a number of additional properties. HTML editor width defines the width between columns that the unopened editor fills. Similarly HTML editor height specifies the row height of the unopened editor. These properties are for the default editor, where a user clicks on a given TextArea control to open the HTML editor for that record. However, you can also define a Popup mode by checking the HTML editor is popup property checkbox. When you add a popup HTML editor to the Grid, to edit HTML fields, the data in the Grid is not saved when the user closes the popup HTML editor. The data is only saved when the user clicks the Submit button. The Save grid data when closing popup editor property allows you to automatically submit the data in the Grid as soon as the popup HTML editor is closed. Unopened HTML editor width

  • An Open HTML editor

  •  Rows

    Sets the height of the control by specifying the number of rows.

    tmpl.Field_Info[N] .TextArea.Rows as N
  •  Columns

    Set the width of the control by specifying the number of columns.

    tmpl.Field_Info[N] .TextArea.Cols as N
  •  In-line Style

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    tmpl.Field_Info[N] .TextArea.InLineStyle as C
  •  Watermark

    Sometimes, the size of screen matters when a user is accessing an application you've created. So how do you build an effective application to be used when screen real estate is limited, such as an Ajax Web app that will run on an iPhone? That's why "liquid" forms are an increasingly popular platform for running Web applications today. Liquid forms automatically reconfigure themselves based on the screen size. That's necessary for something like a smart phone,ine- color: initial; " This first video  we put together will show how the grid makes it easy to design liquid forms. Watermark fields    are also an effective tool for dealing with small screen sizes. Watermark fields let you put the field label inside the field itself. This is a great way to save space when you don't have space to spare.

 Link Properties

An essential decision about a link control is what it will display. The options are: Value in field, Value from other field(s), Static text, Static image, Image in another control Link controls have choices for the Link address type. The link could be: a URL (presumably also a field value), an email address (presumably also a field value), a link to the detail view form, a value that is computed (see Link Address Builder ), a value that specifies filter, order, and/or linking informationfor the records in a second grid

with tmpl.field_info[N] .link.InLineStyle as C
  •  In-line style

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

  •  Display what in link?

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details. Specifies what is displayed in the link. The options are:"Value in field", "Value from other field(s)", "Static text", "Static image", "Image in another control"

    Field(s) to display - Specify the HTML to display in the link. Use field placeholders to include values from other fields in the grid. Typically, the fields that you reference will have the Hide row or Hide column properties checked. Static text - Specify the text to display in the link. Static image - Specify the image to display in the link. Dynamic image control - Specify the control that contains the image to display. Link address type

    with tmpl.field_info[N] .link.DisplayType as C
  •  Using Images in Link Fields:

    • Open the Grid Builder . On the Design tab click on the Component Type page and select Tabular in the Grid Layout menu.

    • Open the Data Source page and select either .dbf or SQL .

    • On the Query(DBF) or Query(AlphaDAO) page select the table you will work from.

    • Open the Fields page. Select several fields and move them from the Available Fields: list into the Selected: fields list; using the arrows between the two list.

    • Select the field that you want to contain the linking data.

    • Go to the selected field's Field Properties list. Under the Display Settings section find the Control type property. Set the control type to 'link '.

    • Now go to the Link Properties section of the Field Properties. Find the Display what in link? property and select "Image in another control ".

    • While in Link Properties set the Dynamic image control property to the name of the image field you wish to display. For the Link address type property select "DetailView link ".

    • Images may be used in hyperlinks and in link fields to detail view forms.

    •  Preview of the grid showing both ID and Thumbnail fields before modification.

      • 1. For the field that contains the linking data:

        • 1. In Display Settings > Control typeset the control type of the field to "link".

        • 2. In Link Properties > Display what in link?select "Image in another control".

        • 3. In Link Properties > Dynamic image controlselect the name of the image field that you wish to display.

        • 4. In Link Properties > Link address typeselect "DetailView link".

      • 2. For the field that contains the image you wish to display:

        • In Column Properties > Hide columncheck the check box. Preview of the grid after modification showing the Thumbnail image in the ID field:

  •  Static Text:

    You use the Link Display Valuedialog box to compose the HTML code that will be displayed in a link. The link may contain references to any of the fields on the grid.

    with tmpl.field_info[N] .StaticText as C
    • 1. Select the field placeholders in the Available Fieldslist that you want to use in the link expression.

    • 2. Arrange the field placeholders in the order that you want to see them in the expression.

    • 3. Optionally, add any text that you want around the fields.

    • 4. Optionally, click HTML Editorto use it to format the expression.

    • 5. Click OKto save your work or Cancelto discard it.

  •  Link address type

    You can specify that the link address type is 'Javascript'. Any Javascript function call or command can be added to the 'onclick' event. The Javascript will be executed when the link is clicked. "Field Value is a Link address" , "Field Value is an email address" , "DetailView link" , "Computed from fields in the grid" , "Javascript"

    with tmpl.field_info[N] .Link.Type as C
  • Javascript link with an onClick event opening an alert box.

  •  Link Address

    When the Link address type is "Computed from fields in the grid", this field appears. Click to define the link address in the Link Address Builder .

    with tmpl.field_info[N] .link.ComputedAddress
    •  Link Address Builder

      A common requirement is to open a page that contains a grid component, showing just records that match certain values. For example, assume that when you click the hyperlink, you want to open a page named CustomerInfo.A5w. We will make the following assumptions about this page:

      • The page contains a Grid component named customers.

      • The table has a field named Customer_ID.

    •  Alpha Anywhere .DBF Syntax

      If the data is coming from an Alpha Anywheretable, the filter expression that we want to apply to the customersgrid on the CustomerInfo.A5wpage is therefore:

      customer_id="{customerID}"
    • where {customerID}is the value in field for which we are defining the Link control. Grid components understand two special parameters: _Filterand _Order. So, to open the CustomerInfo.A5wpage showing just the records that we want, the computed link address is:

      CustomerInfo.A5w?customers_filter=customer_id="{customerID}"
    • Other example computed link address are:

      CustomerInfo.A5w?customers_filter=firstname="{firstname}".and.lastname="{lastname}"?customers_order="{lastname}" OrderInfo.A5w?orders_filter=orderid="{orderid}"
    •  SQL Syntax

      The syntax for the "Filter" and "Order" parameters must be appropriate for the database on which the Grid component is based. SQL syntax typically uses single quotes for character values and "AND" and "OR" to join conditions (as opposed to .AND.and .OR.which Alpha Anywhere uses for querying local tables). So the above examples would become:

      CustomerInfo.A5w?customers_filter=customer_id='{customerID}' CustomerInfo.A5w?customers_filter=firstname='{firstname}' AND lastname='{lastname}'?customers_order={lastname} OrderInfo.A5w?orders_filter=orderid='{orderid}'
    •  Composing a Link Address:

      If you have a field in your grid where the Display Settings > Control Type is "Link":

      • Click or in the Link Properties > Link Address field to display the Link Address Builder.

      • Select a page from the Pages in Project list and click Insert Page.

      • Position the cursor in the Link Address text box, select a field placeholder from the Grid Fields list, and click Insert Field. Repeat as Necessary.

      • Add additional syntax elements as Necessary to the Link Address text box.

      • Click OK to save your inputs or Cancel to discard them.

      • See Also, Creating Grid Components, Automatically Populating Linking Field Values

  •  Target frame or window

    The default is "Explicit". Defines where to display the linked page. The default is Null. The options are: Blank (opens in a new window) "Explicit", "WindowName" (e.g. "Window2"), "_blank", "_parent", "_self", "_search", "_top"

    tmpl.Field_Info[N] .Link.targetFrameOrWindow as C
    •  Clear Parameters

      The default is .F. . Specifies whether the target URL preserves existing parameters.

      tmpl.Field_Info[N] .Link.ClearParameters as L
    •  Scroll to Detail View

      The default is .T. . Specifies that the page should scroll down to display the detail view form when a record is selected.

      tmpl.Field_Info[N] .Link.ScrollToDetailView as L
    •  Additional Code Reference

      • Field(s) to display

        with tmpl.field_info[N] .link.DisplayExpression as C
      • Static image

        with tmpl.field_info[N] .StaticImage as C
      • Dynamic image control

        with tmpl.field_info[N] .link.AlternateImageControl

 Image Properties

This concerns Image properties for images based on field controls. For more information about using image files as Links, see using images in Link Fields.

  •  In-line style

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details .

    tmpl.Field_Info[N]         
    .Image.InLineStyle as C
  •  Text description

    The text description of the image. 

    tmpl.Field_Info[N]         
    .Image.Alt as C
  •  Embed image in HTML

  •  Scale image on server

  •  No image found image

  •  New record image

  •  Related Properties

    •  Image name

      The name of the image to display. 

      tmpl.Field_Info[N]         .Image.Imagename as C
    •  Is Hyperlink

      Is the image a hyperlink?

      tmpl.Field_Info[N]         
      .Image.IsHyperLink as L
    •  Hyperlink target

      The page to display when the link is clicked. 

      tmpl.Field_Info[N]         
      .Image.hyperlinkTarget as C
    •  Target frame

      The name of the window that will display the new page.

      tmpl.Field_Info[N]         
      .Image.hyperlinkTargetFrame as C
    •  Image path

      For image file references: the folder where the images are stored. 

      tmpl.Field_Info[N]          
      .Image.ImagePath as C

 DropDownBox Properties

DropDownBoxes are appropriate when you want to select a value from a large list of alternatives. The most important properties for a dropdownbox control is the definition of its choices and its height. A height of 1 produces a combo box. A height greater than 1 produces a list box. If you set the height to be more than 1 line, you can also set the multi-select allowed field to "Multiple". This allows the user to select more than one value to insert into the field. (Commas will separate the resulting selections) Note :DropDownBoxes do not allow the user to enter new values.

 Choices

Defines the choices the appear in the control. Click to define the true and false Choices set by the check box. Refer to Defining Choices for Check Boxes, Radio Buttons, and Drop Down Listsfor details.

 Dropdown Controls - Group Headings

You can now insert group headings in the data displayed in a Dropdown control. For example:

The above list was entered into the choices for the Dropdown control as follows:

[[[General Motors]]]
Camaro
Cadilac
GMC
[[[Ford]]]
Mustang
Lincoln
Focus
[[[BMW]]]
3 Series
5 Series
7 Series 

 Displaying Field1 While Storing Field2:

The following grid component displays a valuable capability of choice lists used by drop down lists and radio buttons. The sample grid below is based on the AlphaSports Invoice_Itemstable, which uses the Product_IDfield to link to the Producttable. The second column of the grid displays the Descriptionfield from the Producttable, while it stores the Product_IDfield from the Producttable. To implement this feature:

  1. Create an updateable grid based on the AlphaSports Invoice_Itemstable.

  2. Display the Grid > Fieldsmenu of the Grid Component Builder.

  3. Select the "Product_ID" field in the Available Fieldslist.

  4. Change the Display Settings > Control typeto "Dropdownbox".

  5. Click the in the DropDownBox Properties > Choicesfield to display the Define Choicesdialog.

  6. Select "Dynamic" in the Define Choices > List Typefield.

  7. Select "product" in the Data Source > Table namefield.

  8. Select "Description" in the Data Source > Display value field/ex pressionfield.

  9. Select "Product_ID" in the Data Source > Stored value field/ex pressionfield.

When you allow the user to select multiple values, the control returns an array. To convert an array to a character value, you need to use an expression like the following.

TargetVariable = crlf_to_comma(ControlName.dump()

 Related Properties

  •  Height

    Set the height of the label in lines. The default is 1, which produces a combo box. Values larger than 1 produce a list box.

    with tmpl.field_info[N]        .DropdownBox.Size as N
  •  Multi-select allowed

    Defines whether the user can select more than one value from the list. The options are: "Single" "Multiple"

    with tmpl.field_info[N]          
    .DropdownBox.selectStyle as C
  •  In-line style

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    with tmpl.field_info[N]          
    .DropdownBox.InLineStyle as C
  •  Not in list rule

    Specifies the value to display if the list contains a value not coded in the page. The options are:

    • "Add to list" - display the value

    • "Do Nothing" - show the first value in the list

    • with tmpl.field_info[N]            
      .DropdownBox.NotInListRule as C

 Displaying Multiple Fields in a Drop Down List:

Displaying multiple fields in a drop down list is a challenge because browsers automatically compress multiple white-space characters down to a single character. Thus, it is difficult to format columns. This example uses the underscore character "_" to guarantee that fields and columns are aligned. This example is based on the Invoice_Itemstable of the AlphaSports sample database.

 Creating the Drop Down List

  1. Create a grid based on the Invoice_Itemstable of the AlphaSports sample database.

  2. Display the Grid > Fieldsmenu.

  3. Move the "Invoice_Number" field to the Selected Fieldslist.

  4. Select the "Invoice_Number" field in the Selected Fieldslist.

    • 1. Set its Display Settings > Control typeproperty to "DropDownBox".

    • 2. Set its DropDownBox Properties > Heightproperty to 10.

    • 3. Set its DropDownBox Properties > In-line styleproperty to "font-family:Courier New; ".

    • 4. Set its DropDownBox Properties > Not in list ruleproperty to "Do Nothing".

    • 5. Set its Column Properties > Column headingproperty to "Select Invoice Item".

    • 6. Set its Column Properties > Heading in-line styleproperty to "font-family: Courier New; text-align: left;".

  5. Click in the DropDownBox Properties > Choicesproperty to display the Define Choicesdialog box.

    • 1. Set the Define Choices > List Typeproperty to "Dynamic".

    • 2. Set the Data Source > Data source typeproperty to "DBF-Table".

    • 3. Set the Data Source > Table nameproperty to "invoice_items".

    • 4. Click in the Data Source > Display value field/ex pressionproperty to display the Expression Builder.

    • 5. Enter the following expression and click OK.

      Invoice_Number+" "+alltrim(Product_Id) + " " + padl(str(Price,250,2,"$("),10,"_") + " " + padl(alltrim(str(quantity,10) ),10,"_") + " " + padl(str(Extension,250,2,"$("),10,"_")
  6. Display the Grid > Properties menu.

  7. Set the Layout Options > Rows of dataproperty to 1.

  8. Set the Customization > Total records message positionproperty to ""No Message.

  9. Click in the Freeform Edit Regions > Above gridproperty to display the HTML Editor.

  10. Switch to the Sourcetab and enter the following text into the body of the page.

    & ID& & & & PID&
    & & & & & Price& & & Quantity 
    face=Tahoma>& & & Extension
  11. Click Savein the HTML Editorand Savein the Grid Builder.

  12. Click Browser to preview your work. It should look something like the following.

 RadioButton Properties

RadioButton controls are appropriate when you want to select between a small number of choices. The most important property for a check box control is the definition of its choices. When you allow the user to select multiple values, the control returns an array. To convert an array to a character value, you need to use an expression like the following:

TargetVariable=crlf_to_comma(ControlName.dump()
  •  Choices

    This property opens the Define Choices for field (RadioButton) dialog. Here you will define what type of RadioButton you will have, 'Static', 'Dynamic', or 'Variable'. Static radio buttons are drawn from a static list of values. Dynamic radio buttons are dynamically computed from a database. If you specify "Dynamic" radio buttons, this opens a list of properties to define; including one to enter the maximum number of choices to show. Variable radio buttons are where a list is set to a variable such as a Server-side event, a session variable, or a page variable. Logical values are represented by the values "True" and "False".

  •  In-line style

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    tmpl.Field_Info[N]                  .RadioButton.InLineStyle as C
  •  Orientation

    The orientation of the label. The choices are: "Horizontal" and "Vertical"

  •  Not in list rule

  •  Additional Properties

    •  Type

      tmpl.Field_Info[N]                  
      .RadioButton.Typeas C
    •  Maximum choices

      tmpl.Field_Info[N]                  
      .RadioButton.maxchoices as N
    •  Style control if error

      Specifies whether to apply a second style to the field if a validation error occurs.

      with tmpl.field_info[N]            .RadioButton.StyleFieldIfError as L
    •  In-line style for errors

      Specifies style attributes that are used when a validation error occurs. Click to define the In-line style. Refer to the Style Editorfor details.

      tmpl.Field_Info[N]                  .RadioButton.ErrorInLineStyleas C

 

 CheckBox Properties

Check boxes are appropriate when you want to set a True/False value into a logical field. The most important property for a check box control is the definition of its choices.

  •  Choices

    Click to define the true and false choices set by the check box. Refer to Defining Choices for Check Boxes, Radio Buttons, and Drop Down Listsfor details.

  •  Orientation

    The orientation of the label. The choices are: "Horizontal" "Vertical"

    with tmpl.field_info[N]       .CheckBox.Orientation as C
  •  In-line style

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    with tmpl.field_info[N]       .CheckBox.InLineStyle as C
  •  Not in list rule

    Specifies the value to set if the user input does not match a specified choice. The options are:

    • "First Entry" - use the first entry in the list

    • "Null" - set the field to NULL

    • "Do Nothing" - accept the user input

    • with tmpl.field_info[N]      .CheckBox.NotInListRule as C

 Date Picker Properties

A date picker is a variation on a TextBox control. The date picker option appears in a TextBox control if the grid is updateable.

Pop-up blockers will prevent the Calendar Picker from appearing and will sometimes generate an error message. User grids and the server hosting the Application Server can use different date formats like yy-mm-dd or yy/mm/dd, as opposed to the US date format mm/dd/yy. In the Grid Component Builder set Grid Properties > Advanced > Date format on client does not match server to TRUE and enter the client date format in the following field. You may use different separators between the YY, MM, and DD parts of the date format. This property informs the Application Server that it needs to translate dates entered through this grid component.

 Custom Control Properties

The Custom control is a control where the data contents and formatting of a column (or row) is defined by your Xbasic and HTML code. A custom control can reference a number of grid component and data variables, including the value of data in other grid cells. A custom control can create its own variables to carry values between cells of the grid. There are no important constraints upon what the grid cell of a custom control can display, other than that it must contain valid HTML code. This means, for example, that row-by-row, the type of web control that appears in a grid cell could vary from label to textbox to drop down listbox.

Custom controls cannot be used for data entry to bound table fields.

A custom control with a dynamic background and font.

The following will show how to create a custom control similar to the one above. This is a custom control where Xbasic dynamically sets the font and background properties, depending on whether the Unit Price value is above or below the average. The Average for this grid is computed by simply adding an average Summary value to the component.

 Create a Custom Control:

  1. Open the Grid Builder and go to the Design tab. On the Data Source page choose either dbf or SQL .

  2. On the Query(DBF) or Query(AlphaDAO) page connect to a Table that has some numeric fields in it.

  3. From the Design menu open the Fields page. Move a number of fields from the Available Fields: list into the Selected: fields list.

  4. Select one of your numeric fields in the Selected list, this example uses a field called UnitPrice, and in its Field Properties list find the Display Settings section.

  5. Under Display Settings find the Control type property and click the button next to it. Select the Custom option from the Select Control Type dialog.

  6. The Field Properties list for custom controls will be displayed. In this list find the Custom Controls Properties section and under it the Definition property.

  7. Click the button [doc_img] next to the Definition property.

  8. The Define Xbasic for Custom Control: dialog will open. Delete the default code and replace it with the code below. If your field is not called UnitPrice, replace the name UnitPrice, wherever it occurs in this code, with the name of the field you are using.

    function UnitPrice_render as c (data as p, args as p, PageVars as p)  
    with PageVars  
    if data.UnitPrice > args.summary. UnitPrice.average then 
    UnitPrice_render = <<%html% 
    
    %html% + data. UnitPrice+ "
    " 
    else 
    UnitPrice_render = <<%html% 
    
    %html% + data. UnitPrice+ "
    " 
    end if 
    end 
    UnitPrice_XbasicError: 
    UnitPrice_render = "Error in custom control Xbasic: " + error_text_get() 
    end with 
    end function
    AlphaAnywhere will fill in some of the code above automatically, so if you wanted to you could just save the existing framework and fill in the blanks. In this example, the field name is UnitPrice. As a result, the function is named UnitPrice_Render(). If the name of your customized field is not UnitPricethen swap out UnitPricefor the name of the field you are using. The UnitPrice_Render()function will return a value that is composed of quoted HTML and unquoted Xbasic. In this example, the if and else clauses have similar content. Both are character strings that combine HTML coding and a reference to the quantity field, using the prefix " data. ". Although not a required technique, embedding the HTML inside the ... tags simplifies the coding. Likewise, embedding the tag inside the <<%html% ... %html string simplifies the coding by removing the requirement to escape special characters.
  9. You need to add an average summary value to your control. In the Field Properties list find the Summary values section and check the box next to the Average property.

  10. Done. View your custom control in Live Preview.

 Variables

You may dimension local variables of any type within the fieldname_render()function. However, if you want to create variables that have scope beyond the current grid cell, you must define it as an element of either the:

  • argspointer (valid for the grid page)

  • sessionpointer (valid for the session)

For example, this code is able to create a running total of the Extensionfield by adding values to session.rt.

if eval_valid(" session.rt") = .f. then  
    session.rt = Data.EXTENSION  
else  
    session.rt = session.rt + Data.EXTENSION   
end if

 Define Xbasic For Custom Control Dialog

As the example above on creating a custom control demonstrates, getting to the Define Xbasic for Custom Control Dialog is fairly straightforward. After defining a grid table you go to the Fields page and add some fields to the Selected: fields list. You then go to the Field Properties list and change the Control type of the selected field control to Custom . From there you go to the Custom Controls Properties and click the button next to the Definition property.

When the Define Xbasic for Custom Control dialog loads, you will see some code that lays out a default function for you based on whatever field you selected as your custom control. This is only a framework, you will have to create the code that determines what you want your custom control to do. There are, however, some tools to help make this task easier. The Insert button at the top of the dialog can add Row values, Grid Data Values, Summary values, and System variables to your function's code through a series of point and click events. To insert Current Row Values , i.e. the value of any field in the Current Row, click Insert select Data and then choose the FieldName that you want to add to your code . To insert Grid Data Values , or the value of any of the fields on any of the rows of the current grid page, click Insert > Args > Data > RowNumber > FieldName . If the grid has any Summary values , then you can insert any of them by clicking Insert, selecting Args, then Summary, FieldName, and finally the SummaryType you want. Finally, The Define Xbasic for Custom Control dialog provides several System variables that you can use in your calculations by clicking Insert > Args > Info > System variable .

 Current Row Values:

Insert > Data > FieldName

 Grid Data Values:

Insert > Args > Data > RowNumber > FieldName

 Summary Values:

Insert > Args > Summary > FieldName > SummaryType

 System Variables

Available System Variables

Name
Description
Args.Info.TotalPages

Numeric. The number of grid pages required to display all records.

Args.Info.CurrentPage

Numeric. The current grid page.

Args.Info.TotalRecords

Numeric. The number of records returned by the current table query.

Args.Info.RecordsPerPage

Numeric. The maximum number of records to display in a grid page

Args.Info.Database_type

Character. The type of database.

Args.Info.HasEmptyRows

Logical. Does the current grid page have an empty row?

Args.FirstEmptyRow

Numeric. The row number of the first empty row.

Args.IsNewRecord

Logical. Are you processing a newly input record?

Args.RowNumber

Numeric. The current row number.

Args.Summary

Pointer. The values of various summary calculations.

Insert > Args > Info > System variable

 Custom Controls on an Editable Grid

This topic illustrates several useful techniques when placing a custom control on an editable grid. The grid shown below displays the Extensionfield is in a custom control.

The code that creates the control is as follows. First, the standard boilerplate code.

function EXTENSION_render as c (data as p, args as p, PageVars as p)

with PageVars
   
on error goto EXTENSION_XbasicError

You cannot define the HTML for the new record rows in an editable grid. as a result, the first thing to do is test whether you are creating a new record. If Args.IsNewRecordis TRUE, then exit.

if Args.IsNewRecord = .t. then   
exit function
end if

This example simply changes the background color of the cell if the value of the Extensionfield is greater than 100. What you have to do here is define code that can be placed into the cell of a table. The grid is, after all, just a table. Items that you can place into a table cell include:

  • formatted HTML text

  • image

  • table

  • VariableContent- any legal HTML code

In this case the cell will contain a table. The cells will have different background colors ( bgcolor="#00FF00"and bgcolor="#FF0000") and right alignment ( align="right"). The alignment of the grid column has no effect inside this table, so, if you want right alignment, you need to explicitly define it. The table will be wide enough to contain any expected content ( width="80px"). The advantage of explicitly defining the table width is that it avoids having cell contents vary in width according to the data they contain; the behavior you see with label controls.

if Data.EXTENSION > 100 then
EXTENSION_render = <%html%
disp
%html%
else   
EXTENSION_render = <%html%
disp
%html%
end if
disp = alltrim( str (Data.EXTENSION,250,2,"$(") )
EXTENSION_render = stritran(EXTENSION_render, " disp", disp)
end
EXTENSION_XbasicError:
EXTENSION_render = "Error"
end with
end function

To simplify the formatting of the Extensionamount, the HTML contains the string " disp", which the script replaces with alltrim( str( Data.EXTENSION,250,2,"$(") ).

Advanced use of custom controls in a grid One of the control types available in the Alpha Five Version 10 grid is the custom control. This allows you to define an arbitrary Xbasic function to compute the HTML and Javascript for the control. In the example below, the grid is showing invoices. One of the cells in the grid shows the line items for the invoice. This could have been done using an embedded grid component, but the custom control is a lighter weight, faster solution.

See Also: Locking Individual Records Sorting a Grid on Multiple Fields

 Hidden Properties

The Hidden control type displays a grid column (or row), but does not display any data. This is different from the Hide property, that hides a grid column (or row). In this example we would like to achieve three goals:

  1. Set the value of a field with a script in the CanInsertRecordevent

  2. Display the value of said field.

  3. Prevent the user from editing the field.

 Updating Hidden Grid Fields using dbf:

  1. Open the Grid Builder and go to the Design tab. Go to the Component Type page and select Grid is: Updateable . On the Data Source page select .dbf .

  2. On the Query(DBF) page connect to the table that you will extract data from. This example uses the AlphaSports Customerstable.

  3. If you are using Query(DBF) click the Calculated fields button. The Calculated Values dialog will open. Create a calculated field definition similar to the one below and click OK .

    cust_id = customer_id
    This calculated field definition takes the customer_idfield in the Alpha Sports customers table and creates a new identical field named cust_id. This copy can be displayed but be placed in a non-editable label control.
  4. Open to the grid Fields page. Take the two fields that appeared in your calculated field definition and move them from the Available fields: list to the Selected: fields list.

  5. Add two additional fields to the Selected: fields list from the Available fields list. Position these fields in the middle of the Selected: fields list using the up and down arrows.

  6. Go to Live Preview . Your table should look something like this.

  7. In the Selected: fields list, click on the control of the field you copied in your calculated field definition; this example uses Customer_id.

  8. Go to the Field Properties list for this field control. Find the Display Settings section and under it the Control type property. Change Control type to ' Hidden '

  9. Scroll down the Field Properties list to the Column Properties section. Check the Hide column property checkbox.

  10. In the Selected: fields list, select the second field, in this case the firstnamefield.

  11. In the Field Properties list go to the Column Properties section again.

  12. Find the Column heading property and change it, in this case to 'First Name'. Also change the Heading in-line style property to ' text-align: left '.

  13. Check the Freeform layout property checkbox. The Freeform template property will appear. Click the button next to it to open the Freeform Column Layout dialog.

  14. In  the Freeform Column Layout dialog enter a field definition similar to the one below and click OK.

    {Customer_Id}{Firstname}
    This step is important. This step places the editable field that you copied, in this example "customer_ID", on the grid. This allows the event script to modify it. However, since, the "customer_ID" control is hidden, only the "firstname" field shows.
  15. Click on the third field in your Selected: fields list, in this case the "lastname" field.

  16. In Column Properties change the Column heading property, in this case to "Last Name", and set Heading in-line style to "text-align: left;"

  17. Finally, click on your calculated field in the Selected: fields list. Go back to the Column Properties section of the Field Properties list.

  18. Change the Column heading property. In this example our calculated field is cust_id so the heading will be "Customer ID". Also change the Heading in-line style property to "text-align: left;"

  19. Scroll up to the Display Setting section of the Field Properties list. Change the Control type to ' Label '.

  20. From the Design menu, open then Properties page. Find the Layout Options section and under it the Rows of data property. Set Rows of data to 5.

  21. Now click on the Update Settings page. Find the Permissions section of the page and in it the Number of new record rows property , set this to 1.

  22. Save the grid and go to Live Preview. Placing scripts in the CanInsertRecordevent will now update the Customer_IDfield.

 Custom Control Properties

with tmpl.field_info[N]            
.CustomControlXbasic as C

See Also: Suppressing Blank Fields in an Address| Creating a Grid that Looks Like a Dialog

 [Tab Control]

A tab control allows you to selectively hide and display different groups of fields. Refer to Setting Grid Tab Properties.

 Grid Component - Tab and Accordion Controls - Animation

You can now animate the tab and accordion controls in the Grid component. You can control the animation method to hide and show panes. The animation methods are 'slide' and 'fade'. You can use one method to show the pane, and another method to hide the pane. For example, you might choose to 'slide' the pane into view, but 'fade' it out of view.

 [Frame Begin]

When designing a grid component with Columnar formatting, you may position controls by placing them into frames. A frame has a label and places a box around selected fields. You can use the frame feature in columnar layouts, such as columnar grids, search forms, and detail view forms. This example shows how to create a columnar grid with 2 frames.

 Using Frames for Control Positioning:

  1. Open the Grid Builder and create a new blank grid. On the Component Type page select Form (Columnar) under the Grid Layout menu.

  2. Under Data Source select either .dbf or SQL .

  3. On the Query(DBF) or Query(AlphaDAO) page connect to the table that you will use to extract data. If using SQL make sure to set the primary key to a field you will use from your table.

  4. Go to the Fields page. There should be a number of fields in the Available Fields: list. Highlight a field

  5. Click the right arrow to move fields from the Available fields: list to the Selected: fields list.

  6. Add three more fields to the Selected: fields list. Next, check the editable? checkbox next to the Selected: fields title.

  7. The Notice dialog will appear. Select all fields and click OK .

  8. The fields you selected should now appear as textbox controls. Highlight the first two fields in your Selected fields: list by holding down the Shift key and clicking on each field.

  9. Click the Insert.. hyperlink underneath the Available fields: list.

  10. The Insert Special Control dialog will open. Select a [Frame begin] control and click OK .

  11. An Insert Frame dialog will appear. Give the frame a Label name that describes the two fields you selected. For example, Customerfor a Firstand a Lastnamefield or Locationfor an Addressand a Cityfield.

  12. You should now see a [Frame:] control and a [Frame End] Control around the first two field controls in the Selected: fields list.

  13. Add a second [Frame] control around the last two fields in your Selected fields list using the same steps.

  14. Go to Live Preview . You should see something like this:

    On the Grid > Properties page, under the Layout Options section, there is a Number of 'Layout' Columns  property that specifies the number of columns inside each record column. By default this is set to 1. Below you can see how changing this property will alter the look of your [Frame] control.
  15. Go to the Layout Options section on the Grid> Properties page. Change the Number of 'Layout' Columnsproperty to 2. Go back to Live preview, Framed fields now appear next to each other on the same row:

  16. On the Grid Properties page go to the Layout Options section and set the Repeating Columnsproperty to 1 and the Rows of Data property to 2. Go to Live Preview :

  17. On the Fields page add a third field to your second [Frame] control. You can use the Up and Down arrows to the right of the Selected: fields list to position the field vertically. Check field is editable?

  18. Layout Options > Number of "Layout" Columnsproperty to 3. The three framed fields appear in the same row.

 [ Static Text]

Unbound controls (these are in the Layout Controls section) There are a number of 'unbound' controls available in the Layout Controls section.

  • Static image (can be conditional based on data in the grid. Can also be based on comparisons with summary values)

  • Static text

  • Image based on a value in the grid and unbound text

 [Column Spacer] Properties

When designing a dialog component or a grid component with columnar formatting (where the Layout Options > Number of "Layout" Columnsproperty is greater than 1), you may position controls by inserting column spacers after controls.The following example shows the effects of adding column spacers. In this case the grids Number of 'Layout' Columnsproperty has been set to 2 and its Rows of data  property is 3. Both of these properties can be found in the Layout Options section of the Grid Properties page.

 Add a column spacer:

  1. Open the Grid Builder . On the Design tab open the Component Type page. From the Grid Layout menu select the Stacked Columnar option.

  2. On the Data Source page select either .dbf or SQL . Go to the Query(DBF) or Query(AlphaDAO) page and connect to the Table you will use for your data. Set the Primary key to a field you will use.

  3. Go to the Fields page and move 5 fields from the Available Fields: list into the Selected: fields list.

  4. From the Design menu open the Properties page. Find the Layout Options section of the grid properties and change the Number of 'Layout' columns property to 2.

  5. In the same Layout Options section, find the Rows of data property and enter a 3 next to it.

  6. Go to Live preview . Without column spacers your grid should look something like this:

  7. Open the Design tab again and go to the Fields page. Click on the Insert... hyperlink underneath the Available Fields: list.

  8. The Insert Special Control dialog will open. Select the [Column Spacer] option and click OK .

  9. Position the [Column Spacer] control so that it is fourth in your Selected: fields list. To move the control in the list use the up and down arrow buttons.

  10. Now go to Live Preview . The spacer should push your fourth field control down one row:

 [Merge Cells Begin]

Merges can be used to position controls in groups for both grid and UX components. Merging controls is only possible when the grid format is columnar and the Number of Layout Columns property, found under the Layout Options on the Properties page, is set to a value greater than 1. Merges can be used to combine multiple fields under one title. For example, if you have a firstnamefield and a lastnamefield, you could combine them under one merged group and give it the title 'Full Name'.

 Using Merges for Control Positioning:

  1. In the Grid Builder go to the Design tab and open the Component Type page. In the Grid Layout menu select Form (Columnar) .

  2. Open the Data Source page and select either .dbf or SQL . On the Query(DBF) or Query(AlphaDAO) connect to the table that you will draw data from.

  3. Click Select Primary Key and check a field that you will include in your grid.

  4. Open the grid's Fields page. Move 10 fields from the Available Fields: list to the Selected: Fields list.

  5. Go the the grid Properties page and under the Layout Options page change the Number of 'Layout' Columns property to 3.

  6. View your grid in Live Preview . It should look something like this:

  7. Return to the Fields page on the Design tab. Select a field in the Selected: fields list and then click the Insert... hyperlink; the link is located underneath the Available Fields: list.

  8. The Insert Special Control dialog will open. Select the [Merge Cells Begin] control and click OK .

  9. Now select a second field underneath [Merge Cells Begin] and click the Insert... hyperlink again. When the Insert Special Control dialog opens select [Merge Cells End] and click OK .

  10. Use the up and down arrows to the right of the Selected: fields list to move related fields inside the Merge Cell. For example, move all fields relating to a name or address inside the Merge cells.

  11. Click the [Merge Cells Begin] control in the Selected: fields list. In the Field Properties list in the Merge Cells Properties find the Row Heading property.

  12. Change the name of the Row Heading property to something that describes all of the fields contained inside the Merge cells.

  13. Repeat steps 7 through 12 to create a second set of Merge Cells with a Row heading.

  14. Go to the Live Preview tab and click Full Preview. The grid should look something like this.

    The Merge cell entitled ' Address' now combines the Address, PostalCode, City, Region, and Countryfields in this grid. The Merge cell named ' Contact' combines the ContactNameand ContactTitlefields.
  15. Go to the Design tab and open the Fields page again. Select one of the fields inside a Merge cell you defined. Go over to the Field Properties list and scroll down to Row Properties.

  16. Find the Break property and change it from 'None' to 'Break After' using the drop down. Repeat this process for your second Merge Cell.

    • Adding Breaks

    • Inserted Breaks

  17. Go to Live Preview.

    In this example Breaks have been added after the Contact Nameand PostalCodefields. Notice how this impacts the Contactand AddressMerge Cells that contain these fields. See also Number of 'Layout' Columns 

 [Merge Cells End]

[Merge Cells End] is used in conjunction with [Merge Cells Begin] to encapsulate fields inside a single cell. [Merge Cells End] does not contain any Field properties, these are defined in [Merge Cells Begin]. For more information on how to use merge cells see the example in [Merge Cells Begin]  .

Lookup Properties

The Lookup property allows you retrieve one or more field values from another grid. Your grid must be Updateable before you can add a Lookup property. You can set a field to be updateable from the the grid Fields page by clicking the (editable?) checkbox above the Selected: fields list. Lookups open in an Ajax window. This makes the lookup perform quickly and causes the Lookup window to open on the page, without requiring a new Browser window. Because of Ajax, popup blockers will not prevent the Lookup from opening. When you check the checkbox next to the Lookup property, you will notice that two additional properties appear. These are the Lookup Type and Lookup definition properties.

 Lookup

When checked, makes the Textbox or Textarea control able to open a secondary lookup grid and retrieve field values.

 Lookup Type

Lookup Type has a dropdown select list with these options: Grid Component , Auto-Suggest List , and Edit-Combo List . The Auto-Suggest list option creates Lookups that function much like a Google search toolbar. As you start typing into a textbox, a list of suggestions is supplied. With Grid Component Lookups, the suggestions can come from either a static list of values or, more commonly, from a table. For more on auto-suggest fields watch this video or this short video . Both the Auto-suggest and edit-combo controls allow you to enter multiple values in the field you are editing. For example, say you have a field called 'Send to' and you want to support a comma delimited list, such as 'Smith,Jones,King,Cohen' and you want the user to be able to select each entry in the list from the pick list. The edit-combo, or auto-suggest control can be used for this; video. For more on edit combo boxes you can check out this video and also this video on edit-combo box fields and how you can include edit-combo boxes in your grid components. 

Lookup Grid Component Type

Lookup with Auto-Suggest List

Lookup using an Edit-Combo List

 Lookup Definition

Lookup definition allows you to define what component and/or fields will be used in you Lookup, what filters will be used, and more. Both dynamic and static filters can be applied to a Lookup depending on what type of Lookup it is. Using a dynamic filter will cause the lookup to be created from data already entered into the Grid. For example, if a user were to enter the state 'ma' then only customers in 'ma' will be shown when the lookup is open. Going a step further, the list of choices can be filtered based on other fields previously filled in. For example, say that you have defined a "city" field to be an auto-suggest field. If you previously entered "CA" into the "state" field, then when you enter a "city" field, the list of suggestions will only show cities in California. While Lookups require an Updateable grid there are some options in terms of user interface. Lookups can be configured to force a user to select from the lookup, while not permitting users to enter data into the field with the lookup.

The Define Lookup Window

  •  Grid name

    Specifies the name of the grid to display in the lookup window.

  •  Window title

    Specifies the title of the lookup window.

  •  Width

    Sets the width of the lookup window in pixels.

  •  Height

    Sets the height of the lookup window in pixels.

  •  Window Position

    Specify where the window will be shown

  •  Resizable

    Enables or disables resizing of the lookup window.

  •  Inherit parent style

    Specifies whether to use its style sheet or inherit the style sheet of the parent page.

  •  Select record link label

    Specifies the text to display in the selection link.

  •  Select record link label style

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the ((Style Editor)) for details.

  •  Field map

    A comma delimited list of the fields to retrieve from the lookup window or fields to write in the grid.

  •  Link type

    Specifies whether to display text or a graphic as the link to the lookup window. The options are: "Text" and "Icon"

  •  Link label

    Appears if the Link type is text, defines what text is displayed.

  •  Link label style

    Specifies style attributes that override the settings inherited from the style sheet.

  •  Icon name

    If icon is selected for link type, defines the text to display.

A text box control on a grid component or ux component may have an associated lookup window that can be used to set the values of one or more fields with a single click. If you want to define a lookup for a text box control that is on the Search Part of a grid, then go to the Search Properties page and in the Search Options section set the Search style property to "1" and the Allow 'Query By Form ' property to "False".

Creating a text box Grid Component type Lookup takes three steps. 1.) First a Lookup grid needs to be defined. This is the "source" grid that will appear on the 'destination' when the Lookup is called. The Lookup grid can include all of the same or different tables as the destination grid. Being its own grid component it can also include such features as a Quick Search. 2.) Secondly, you must set the properties of the field control that initiates the Lookup. 3.) The final step is setting the properties of the field controls that will receive lookup values.

 Create the Lookup Grid:

  1. In the Grid Builder open the Design tab. On the Component Type page select Tabular from the Grid Layout menu. For the Grid is: selection click the Read only option.

  2. Under Data Source select either dbf or SQL. On Query(DBF) or Query(AlphaDAO) connect the table you will use. This example uses the Northwinds Customerstable.

  3. While on the Query page, click Select Primary Key and choose a field that you will use in your grid.

  4. Open the Fields page. Move 5 fields from the Available Fields: list into the Selected: fields list using the right arrow key. These are the fields you want to retrieve when the Lookup is called.

  5. Save your grid as something, like LookupOne.

  6. Go to Live Preview . This is the Grid that you will use to define your Lookup. Close the component

 Define the Destination grid and Lookup call:

  1. Create a new grid component. Open the Grid Builder and go to the Design page.

  2. On the Component Type page select Tabular on the Grid Layout menu. Click Grid is: Updateable .

  3. Under Data Source connect to a table that you want to use.

  4. On the Query(DBF) or Query(AlphaDAO) page connect to the a table. This can be the same table or a different table than the one used in your 'Source' grid.

  5. On the Fields page move several fields from the Available Fields list to the Selected: fields list.

  6. Select a TextBox control from the Selected: fields list. This is the field that will have the Lookup.

    You can use both TextBox and TextArea controls to initiate a Lookup field. By default, most fields added to an updateable grid appear as textbox controls automatically. When the destination grid is published, if a field is a lookup field, then an icon is shown to the right of the control. Pressing the icon opens a second browser window which displays the lookup window (the "source" grid component). When the user makes a selection in the lookup window, the 'source' grid will fill in one or more fields in the "destination" grid.
  7. Now go to the Field Properties list for the TextBox you selected. Find the Lookup properties section and check the Lookup checkbox.

  8. Under Lookup type select Grid Component .

  9. Click the button next to Lookup definition. The Define Lookup Window dialog will open.

  10. In the Define Lookup Window dialog find the Grid name property and click the button next to it. Select the Lookup grid that you created.

    The Define Lookup Window dialog gives you the option to customize a number properties: For example, you can set the Window title field. By default, this property takes the column label of the field you selected in the "destination" grid. You can also set the Lookup Width and Height . You can change the Select record link label and click the button next to the Select record link label style property to open the Style Editor . This will allow you to define your own custom HTML coding.
  11. In the Field Mapping section of the Define Lookup Window dialog find the Field map property. Click the button next to it to open the Define Field Mapping dialog

    The Define Field Mapping dialog allows you to specify a map between fields in the Lookup window and fields on your grid or dialog component. For example, your grid or dialog component might include these fields: ID, Fname, Lname, and Company. The Lookup window grid might have these fields on it: CustomerID, Firstname, Lastname, and CompanyName. You can map the CustomerIDfield to the IDfield, the Firstnamefield to the Fnamefield and so on. When the user makes a selection in the Lookup window, the Lookup window closes, and the corresponding data from the Lookup window is filled into the destination grid or dialog component. The Define Field Mapping dialog only shows fields that are displayed in text boxes in the Lookup window.
  12. Click Add Field , select a destination Field: from the drop-down list at left, select the source field (from the Lookup window) list at right, and click OK .

  13. Repeat for all the fields you wish to insert into a record.

  14. Click OK to return to the Define Lookup Window dialog.

  15. Find the Main Window of the Define Lookup Window dialog. Find Link type field and select "Text" or "Icon".

    This field specifies the link that appears to the right of the textbox or textarea control and that opens the Lookup window. If the choice in the previous field was " Icon ", enter the relative path to the graphic you want to use. If the choice was " Text ", enter the text to using Link label field, also found in the Main Window part. Optionally, define an in-line HTML style for the link label text using the Link label style field. Optionally, go to the Advanced section and click the button next to the Override settings property. This will display the Override Properties dialog. Use the Existing Properties tab and the Setting Grid Properties topic as references. Place new values into the Override Properties tab. 17. Optionally, add filter and order parameters into the Advanced > Query parameters property. This expression will select the records that appear in the lookup grid. For more information about formatting these expressions, see A5W Page Link, Filter, and Order Syntax and Automatically Populating Linking Field Values.
  16. Click OK to return to the Grid Builder. Go to the Live Preview tab and click Full Preview. Your grid should look something like this, This example also has a Quick Search field:

    Clicking next to a lookup field column will display the Lookup window. Clicking the Select link to the left of a row in the Lookup window copies all of the fields in that row to your page.

 Position the Lookup Window:

  1. Go back to the Fields page. Select the field control that initiates your lookup grid. Go to the Lookup section of the Field Properties list for this control.

  2. Click on the button next to Lookup definition property and open the Define Lookup Window dialog. Define Lookup Window

  3. In the Lookup Window section of the dialog, click on the button next to the Window position option.

  4. This will open Window Position dialog. Select one of the Position options: In-View , Center , Absolute , or Relative .

  5. Click OK , OK , and Save your grid.

    In order to be able to modify the data in fields, those fields must appear on a grid. This applies to cases where a lookup is used to populate a row. There are cases where you might not want all of the data that the Lookup inserts into a grid to be displayed. In these instances it is possible to hide these fields. The following example demonstrates how to do this.

 Hiding Controls filled by a Lookup Grid Component:

  1. In the Grid Builder  open the Design tab. On the Component Type  page select Tabular  from the Grid Layout menu. For the Grid is: selection click the Read only  option.

  2. Under Data Source select either dbf or SQL. On Query(DBF) or Query(AlphaDAO) connect the table you will use. This example uses the Northwinds Customerstable.

  3. While on the Query page, click Select Primary Key and choose a field that you will use in your grid.

  4. Open the Fields page. Move 5 fields from the Available Fields: list into the Selected: fields list using the right arrow key. Save  your grid as something, like LookupOne.

  5. Go to Live Preview. This is the Grid that you will use to define your Lookup. Close the component

  6. Create a second grid component. Open the Grid Builder and go to the Design page.

  7. On the Component Type  page select Tabular  on the Grid Layout menu. Click Grid is: Updateable .

  8. Under Data Source select the same data source that you used for the first grid component.

  9. On the Query(DBF) or Query(AlphaDAO)  page connect to the same table that you used to create the first grid component.

  10. On the Fields  page move the same five fields that you used in the first grid from the Available Fields  list to the Selected:  fields list.

  11. Add two additional new fields to the Selected: fields list. In this example the new fields are CustomerIDand CompanyName.

  12. Select the first 'new' field and move it to the top of the Selected list using the up arrow. In the Field properties under Display Settings , change this fields Control type  property to 'Label '.

  13. Select the second 'new' field, in this case CompanyName. Move it to the end of the Selected: fields list using the arrows.

  14. With the field highlighted, go over to its Field Properties. Under the Display Settings  properties, change the Control type  to ' Labe l'.

  15. In the Column Properties section check the Freeform layout  property checkbox. Find the Freeform layout template  property and click the button to the right of it.

  16. The Free-form Column Layout dialog will open. To the left is a list of Available fields created from the fields you selected.

  17. Choose the name of the current field, i.e. the second 'new field that was added, in this case CompanyName. Double click on the field name to add it to the code area.

  18. Next select three fields from the Available Fields  list that you wish to hide and add them to the code area. Click OK .

  19. Back on the Fields page again, for each field you wish to hide do the following. First click on the field in the Selected: fields list.

  20. Next, go to the Field Properties list for each field. Under Display Settings, change the Control Type to ' Hidden '. Under Column Properties check the Hide column checkbox.

  21. In your Selected: fields list there should now be two TextBox field controls, two 'Label' field controls, and three 'Hidden' field controls. Select the first TextBox field control.

  22. Go to the Field Properties list and in the Lookup section check the Lookup checkbox.

  23. Two more properties will appear. Under the first, Lookup Type , select Grid Component .

  24. Click the button to the right of the Lookup definition property. This will open the Define Lookup Window dialog.

  25. In the Define Lookup Window dialog, from the component list select the LookupOnegrid component that you created in steps 1 through 5.

  26. Find the Field Map property, under Field Mapping , and click the button next to it. This will display the Define Field Mapping dialog.

  27. Click the Add Field button.

  28. Click OK  and OK  again. Go to Live Preview :

    • In the Grid that calls the Lookup only 2 of the 5 Lookup fields are visible, 3 are hidden

    • The Lookup displays all 5 fields

 Code Reference

  •  Lookup

    tmpl.Field_Info[N]             .HasLookup as L
  •  Grid name

    tmpl.Field_Info[N]             .Lookup.GridName as C
  •  Window title

    tmpl.Field_Info[N]             .Lookup.WindowTitle as C
  •  Width

    tmpl.Field_Info[N]             .Lookup.WindowWidth as N
  •  Height

    tmpl.Field_Info[N]             .Lookup.WindowHeight as N
  •  Scrollbars

    Enables and disables scrollbars in the lookup window.

    tmpl.Field_Info[N]             .Lookup.HasScrollBars as L
  •  Resizable

    tmpl.Field_Info[N]             .Lookup.IsResizeable as L
  •  Inherit parent style

    tmpl.Field_Info[N]             .Lookup.LookupWindowInheritParentStyle as L
  •  Select record link label

    tmpl.Field_Info[N]             .Lookup.LookupGrid.LinkLabel as C
  •  Select record link label style

    tmpl.Field_Info[N]               .Lookup.LookupGrid.LinkLabelStyle as C
  •  Field map

    •  lookup

      tmpl.Field_Info[N]              .Lookup.LookupGrid.ReturnFields as  C
    •  grid

      tmpl.Field_Info[N]                .Lookup.FillinFields as C
  •  Link type

    tmpl.Field_Info[N]             .Lookup.LinkType as C
  •  Link label

    tmpl.Field_Info[N]             .Lookup.LinkLabel as C
  •  Link label style

    tmpl.Field_Info[N]             .Lookup.LinkLabelStyle as C
  •  Icon name

    tmpl.Field_Info[N]             .Lookup.IconName as C

See Also  A5W Page Link, Filter, and Order Syntax

Javascript

 Desktop Applications and Working Preview - Action Javascript to Print Report

If you use the 'client-side Xbasic' feature to add a button to a Grid component to print a Report, the report will also render when the Grid is running on the Desktop and Working Preview. This as opposed to the report only rendering if the Grid was running in the Browser or in Live Preview.

 Grid Component - Pop-up Ajax Windows

  •  Position

    You can now control the position of pop-up Ajax windows.

  •  New Window Properties

    When you use Action Javascript to open a child Grid, Report, or .a5w page in a pop-up Ajax window you can now set the title bar position to 'top' or 'bottom'. Previously the window title was always at the top of the window. You can also specify that the window should not be moveable. Previously, windows were always moveable.

  •  Javascript

    When you write the Javascript for the Window events, you can now use two new placeholders that make it very easy to execute methods on the child Grid that is opened in the pop-up Ajax window. The placeholders are:

    • {Grid.ChildComponentName}

    • {Grid.ChildObject}

 Ajax Windows

  •  Animation

    Animation effects have been added for pop-up Ajax windows. Ajax windows that contain IFrames, which in turn contain display PDF files, cannot be animated. As a result, the Animation property has not been made available for Ajax windows that host .a5w pages, since .a5w pages are hosted in an IFrame. There are several animation methods that have been exposed. The 'slide' and 'fade' methods are based on methods in the jQuery core library. All of the other methods are based on method in the jQueryUI library. By default, both of these libraries are loaded. The Web Project Properties dialog contains settings which control if these libraries are loaded, and from where they should be loaded. You can control the animation effect for the window display and the window close. You can also control the animation speed. If you use the smart field to choose an animation, the animation builder will pop up.

  • Certain animation styles will mess up the positioning of windows. If you find this to be the case, you should stick with the 'Fade' style for the 'show' animation.

  •  Background Style Property

    You can now set a background style property for pop-up Ajax windows. This will allow you, for example, to set a background color, or background image for the window.

  •  Centering Content

    Ajax Windows that display Grids, UX, or Custom Components can now automatically center the content in the window. You can specify if you want vertical, horizontal or both vertical and horizontal centering. The image below shows a pop-up Ajax window where a background color has been set, and the window contents has been centered on both the vertical and horizontal dimension.

See Also: JQuery Support

Time Picker Properties

You can enable a Time Picker for Short-time fields and Character fields. To turn on the Time Picker for these field types, check the 'Time Picker' property in the new 'Time Picker Properties' section. The Open how property lets you define whether a user clicking on an icon (ClickIcon) or clicking on a field (Focus) will open the Timepicker. The Time format property allows you to set how the time is displayed, there are , , and options. Checking the User must select from Time picker property will automatically open the time picker when the field control it is in gets focus. The OK button label property and Cancel button label property simply change the text on the OK and Cancel buttons that appear on the time picker. As with other labels you can introduce HTML directly into the label definition, to give the OK and Cancel buttons the appearance you want.

Time picker with icon

 Column Properties

Set Columnor RowProperties There are situations where you will want to hide a column or row. This will be true if you are placing the field in a different column or row using a Freeform template. A freeform layout allows to insert any HTML code plus any combination of fields on the grid into a grid column. For example, although your database had firstname and lastname fields, a freeform layout could display a single name field that combined these two values. In almost all cases you will want to define the column or row heading. If you want to control access to this field, you may set a minimum security level requirement (V7). A users with a too low security level will not be able to see the column. The column's cell in-line style field defines additional HTML formatting that you want to apply to the cell of the grid. If you wanted to change the border or background of the cell, this is where you would do it. The can sort property enables and disables the ability to click on the column heading and sort the current page based on the values in the selected column.

  •  Hide column, Hide row

    Hides the column or row that would contain this field. You might choose to hide the field if it was displayed in a free-form layout.

    tmpl.Field_Info[N] 
    .Column.Hide as L
  •  Column heading, Row heading

    The label that identifies the column o row.

    tmpl.Field_Info[N] 
    .Column.Heading as C
  •  Column in-line style, Row label in-line style

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    tmpl.Field_Info[N] 
    .Column.LabelInLineStyle as C
  •  Heading prefix, Label prefix

    Specify HTML text or the path to and name of an image to be displayed to the left of the row or above the column heading.

    tmpl.Field_Info[N] 
    .Column.Heading_Left as C
  •  Row label position

    • The position of the label in relationship to the control. The options are:

      • "Left"

      • "Right"

      • "Above"

      • "Below"

    • tmpl.Field_Info[N] 
      .Column.LabelPosition as C
  •  Can sort

    Specifies whether the grid will be sorted when the user clicks on the column or row heading.

    tmpl.Field_Info[N] 
    .Column.Sort as C
  •  Sort field

    Specify the field(s) to sort on when user clicks on the column or row title. Put commas between field names.

    tmpl.Field_Info[N] 
    .Column.Sort as C
  •  Freeform layout

    Specify if this column or row should display just this field, or allow a free-form layout. The options are: "Freeform"

    tmpl.Field_Info[N] 
    .Column.Type as C
  •  Freeform template

    Click the to display the Freeform Column Layoutdialog box to define the fields and formats to display in this grid cell.

    tmpl.Field_Info[N] 
    .Column.FreeFormTemplate = <<%html% 
    ' code here 
    %html%
  •  Cell in-line style

    Specifies style attributes that override the settings inherited from the style sheet. Click to define the In-line style. Refer to the Style Editor for details.

    tmpl.Field_Info[N] 
    .Column.InLineStyle as C
  •  Security level

    If the user is logged in with a security level that is lower than the security level you specify here, the column or row will be hidden. Set the security level to 0 to always show this column or row.

    tmpl.Field_Info[N] 
    .Column.SecurityLevel as N
  •  Bubble Help Text

    Optionally, set an initial value for the control to display.

    tmpl.Variable_Info[N] 
    .BubbleHelp as C
  •  Label Bubble Help Text

    Optionally, set an initial value for the control to display.

    tmpl.Variable_Info[N] 
    .BubbleHelpLabel as C
  •  Break Type

    • Forces a new row either before or after a control. The options are:

      • "None"

      • "Break before"

      • "Break after"

      • "Break before and after"

    • tmpl.Variable_Info[N] 
      .Breaktype as C
  •  Column Span

    The number of columns to group together.

    tmpl.Variable_Info[N] 
    .nCols as N

 Formatting Grid Controls

  •  Opening a Grid Component

    • Select "Web Components" in the left pane, so that you can see your new grid component.

    • Select "AlphaSports_Customer_Grid" and click Edit.

    • At this point your new grid should look something like the following (using the default cascading style sheet).

  •  Modifying Grid Controls

    There are many formatting options available through the Grid Component Buildermenus. We will just make a few modifications to some of the (textbox) controls show you how easy it is.

    • 1. Display the Grid > Fieldspage.

    • 2. Select "Customer_Id" in the Selected Fieldslist.

      • 1. Change its Column Properties > Column headingto "ID".

      • 2. Change its Column Properties > Heading in-line styleto "text-align: left;".

    • 3. Select "Firstname" in the Selected Fieldslist.

      • 1. Change its TextBox Properties > Sizeto 10.

      • 2. Change its Column Properties > Column headingto "First Name".

      • 3. Change its Column Properties > Heading in-line styleto "text-align: left;".

    • 4. Select "Lastname" in the Selected Fieldslist.

      • 1. Change its TextBox Properties > Sizeto 10.

      • 2. Change its Column Properties > Column headingto "Last Name".

      • 3. Change its Column Properties > Heading in-line styleto "text-align: left;".

    • 5. Select "Company" in the Selected Fieldslist.

      • 1. Change its TextBox Properties > Sizeto 20.

      • 2. Change its Column Properties > Heading in-line styleto "text-align: left;".

    • 6. Select "Phone" in the Selected Fieldslist.

      • 1. Change its TextBox Properties > Sizeto 17.

      • 2. Change its Column Properties > Heading in-line styleto "text-align: left;".

    • 7. Select "Fax" in the Selected Fieldslist.

      • 1. Change its TextBox Properties > Sizeto 17.

      • 2. Change its Column Properties > Heading in-line styleto "text-align: left;".

    • 8. Select the Live Previewtab. The grid should now look something like this.

See. Suppressing Blank Fields in an Address, Creating a Grid that Looks Like a Dialog

 Dynamic Column and Row Grid Headings

If you would like to be able to dynamically change the title of a grid column or row, the solution to creating conditional headings in grid components is to define a variable that contains the column or row heading that you want to display. Change "component_name" to the name of your component. Change "[1]" to reflect the index number of the column or row you wish to modify. Add additional Xbasic code to set the value of var1.

with tmpl_1
    componentName = "component_name"
    with field_info[1]
        .Column.Heading = var1
    end with
end with

See Also: Column Properties

 Row Properties

  •  Cell in-line Style

    The appearance of a control and the grid cell that contains it are set by the style sheet attached to the grid component. In the Grid or UX Component Builders, two properties can override these style sheet settings. These are the In-line style property found in the control's properties settings (i.e. Label Properties, Dropdown Properties, etc..) and the Cell in-line style property found in the Column (or Row) Properties section of the Field Properties list. The picture shows what this can look like. Here is a grid component with four field rows, Company Name, Contact Name, City, and Country. The last field, Country, has had its Cell in-line style properties modified so that the background and the border are green. Cell in-line style for Country field.

  •  Break

    The Break property works only with columnar formatting where the Number of 'Layout' Columns property is greater than 1. The Number of Layout Columns property is located in the Layout Options section of the Grid Properties page. A Break can be inserted before, after, or before and after and control. When a break is added to a grid is appears as a carriage return symbol in the Selected: fields list on the fields page.

    •  Using the Break property for Control Positioning:

    • This causes the Contact Name, City, and Country fields to wrap to a second row. The effect only visible on the City field due to the fact that this is the only field that would not wrap to the next row by default. By default, the grid also only shows the labels of the first row of controls. However, this can be overcome by changing the Column heading property.
  •  Column span

    The Column span property only works with columnar grids when the Number of 'Layout' Columns , found in the Layout Options portion of the grid Properties page, is set to a value greater than one. Changing the Column span value of a control helps position that control inside a grid or UX component. This is often achieved in concert with other layout properties such as the Number of "Layout" columns and the Repeating columns property.

    •  Using Column span for Control Positioning:

      1. In the Grid Builder go to the Design tab and open the Component Type page. In the Grid Layout menu select a Form (Columnar) grid.

    • 2. Open the Data Source page and select either .dbf or SQL as a data source.

    • 3. Click on the Query(DBF) or Query(AlphaDAO) page and connect to the table that you will pull data from. Click Select Primary Key and choose a field you will use.

    • 4. Open the Fields page. Move 6 fields from the Available Fields: list into the Selected: fields list using the arrow buttons.

    • 5. Now go to the grid Properties page . In the Layout Options section find the Number of 'Layout' columns property and set it to 2.

    • 6. Find the Repeating columns property, also located under Layout Options, and set the Repeating columns property to be 3.

    • 7. Now go to Live Preview and see how the records on your grid look:

    • 8. Return the the Design tab and on the Fields page click on the first field control in your Selected: fields list.

    • 9. Go to the Row Properties section of the Field Propertie s list. Find the Column spanproperty and set its value to 2.

    • 10. Now go to Live Preview again. Notice how changing the column span for the first field pushes the other fields down.

    • 11. Go back to the Fields page. Select the fourth field in your Selected: fields list. Go to the Field Properties list and again find the Row Properties section. Set the Column spanvalue for this property to 2.

    • 12. Open the grid in Live Preview :

 Update Settings

If the grid is editable and the control type is editable, you may optionally suppress editing of the field that you view through the control. You may also set a minimum security level required to change the field's contents.

  •  Updateable

    Specifies whether the field can be edited.

    with tmpl.field_info[N]         .Updateable as L
  •  Table alias

    This property defines the alias of the table that contains the field.

    with tmpl.field_info[N          .Table_Alias as C
  •  Field to update

    Specifies the field that binds to the control.

    with tmpl.field_info[N]         .FieldToUpdate as C
  •  Security level

    Specifies the minimum security level required to edit the contents of the field.

    with tmpl.field_info[N]       .UpdateSecurityLevel as N

 Summary Values

Summary values display various types of information about a field as it appears throughout the entire table. In other words these calculations summarize all values on all pages of the grid, not just values displayed on the visible page. Summary types include: Total (numeric fields only), Count (numeric fields only), Average (numeric fields only), Minimum, Maximum, Standard Deviation (numeric fields only), Variance (numeric fields only), First, and Last. You can have summaries of as many columns as you want. Summaries can appear on all pages or on the last page only.

Four Summary Values

  •  Total

    Displays the total value of the fields in all the records of the table.

    .Summary.total.has as L 
    .Summary.total.displayformat as C
  •  Count

    Displays the count of the fields in all the records of the table.

    .Summary.count.has as L 
    .Summary.count.displayformat as C
  •  Average

    Displays the average value of the fields in all the records of the table.

    .Summary.average.has as L 
    .Summary.average.displayformat as C
  •  Minimum

    Displays the minimum value found in the field.

    .Summary.min.has as L 
    .Summary.min.displayformat as C
  •  Maximum

    Displays the maximum value found in the field.

    .Summary.max.has as L 
    .Summary.max.displayformat as C
  •  Standard Deviation

    Displays the standard deviation of the fields in all the records of the table.

    .Summary.stddev.has as L 
    .Summary.stddev.displayformat as C
  •  Variance

    Displays the variance of the fields in all the records of the table.

    .Summary.var.has as L 
    .Summary.var.displayformat as C
  •  First

    Displays the first value found in the field.

    .Summary.first.has as L 
    .Summary.first.displayformat as C
  •  Last

    Displays the last value found in the field.

    .Summary.last.has as L 
    .Summary.last.displayformat as C
  • All summary types of a grid.

 Styling Summary Values

You can define inline styles for summary values. You can also use the new BeforeSummarySectionRenderevent to make the inline style conditional on the value of the summary field.

  •  Average

    tmpl.summary.average.label as C tmpl.field_info[N]
  •  Count

    tmpl.summary.count.label as C tmpl.field_info[N]
  •  First

    tmpl.summary.first.label as C tmpl.field_info[N]
  •  Last

    tmpl.summary.last.label as C tmpl.field_info[N]
  •  Maximum

    tmpl.summary.max.label as C tmpl.field_info[N]
  •  Minimum

    tmpl.summary.min.label as C tmpl.field_info[N]
  •  Standard Deviation

    tmpl.summary.stddev.label as C tmpl.field_info[N]
  •  Total

    tmpl.summary.total.label as C tmpl.field_info[N]
  •  Variance

    tmpl.summary.var.label as C tmpl.field_info[N]

 Setting Grid Control Properties

Allowed Control Types - purpose and action:

  •  RTF

    Rich Text Formatted (RTF) text

  •  Date field

    To create a control appropriate for s a date, set the control type to"calendar" or "textbox" and then modify Date picker properties.

  •  Image or image reference field

    To create a field that displays a picture, set the control type to "Image".

  •  Detail view link

    Set the control type of the field the that connects to the detail view to type "link".

  •  True/False choice

    Set the control type of the field to check box and define its Choiceproperties.

  •  Short list of choices

    Set the control type of the field to radio button and define its Choiceproperties. Choices can be static or dynamic (retrieved from a table).

  •  Long list of choices

    Set the control type of the field to drop down list box and define its Choiceproperties. Choices can be static or dynamic (retrieved from a table).

 Calendar Properties

The Calendar control is a control that a user can place on Grid and Dialog components. Compare it to the date picker control, which is a text box with a button that opens a calendar in a pop-up window. The Calendar control always displays the calendar on the page. The user does not have to click a button to open the calendar in a new window. The Calendar control can be read-only or set the value of table field.

This allows the user's grid and touse different date formats. This feature was added in V7 to resolve the problem where the server was using a US style date format (dd/mm/yy), but the application needed to use a date format such as yy-mm-dd or yy/mm/dd. In the Grid Component Builderset Grid Properties > Advanced > Date format on client does not match serverto TRUE and enter the client date format in the following field. You may use different separators between the YY, MM, and DD parts of the date format. This property informs the Application Serverthat it needs to translate dates entered through this grid component.
  •  Date format

    Specify the format in which date values are passed to the calendar control. e.g. mm/dd/yyyy .

    with tmpl.field_info[N] 
    .Calendar.DateFormat as C
  •  Read only

    Specify if the calendar control is for displaying date values only, or should it allow the user to also set date values. If the calendar control is read only, then the user cannot click on any of the days, and the buttons at the top of the control to change the year and month are hidden.

    with tmpl.field_info[N] 
    .Calendar.Readonly as L
  •  Switch year

    This property is available on if the Read only property is not set. If a date value has a two digit year, specify which year to switch from 1900 to 2000.

    with tmpl.field_info[N] 
    .CalendarSwitchYear as N
  •  Combo boxes

    When enabled, displays the combo boxes for the year and month pickers.

    with tmpl.field_info[N] 
    .Calendar.UseComboBoxes as L
  •  Low year

    Specifies the low year in the year picker.

    with tmpl.field_info[N] 
    .Calendar.LowYear as N
  •  High year

    Specifies the high year in the year picker.

    with tmpl.field_info[N] 
    .Calendar.HighYear as N

A columnar grid with a calendar control.

 Date Picker Properties

Here are the Date Picker Properties

  •  Date format

    Refer to Date and Time Format Elementsfor supported formats.

    with tmpl.field_info[N] 
    .DatePicker.DateFormat as C
  •  Date picker icon

    Selects the icon that appears to the right of the field. The options are:

    with tmpl.field_info[N] 
    DatePicker.IconNumber as N
  •  Switch year

    The number that is used to place 2 year dates into the current or prior century.

    with tmpl.field_info[N] 
    .DatePicker.SwitchYear as N
  •  Use combo boxes

    Enables or disables the month and year combo boxes.

    with tmpl.field_info[N] 
    .DatePicker.UseComboBoxes as L
  •  Low year

    The lowest number year shown in the year list box.

    with tmpl.field_info[N] 
    .DatePicker.LowYear as N
  •  High year

    The highest number year shown in the year list box.

    with tmpl.field_info[N] 
    .DatePicker.HighYear as N

The Calendar control appears when the user clicks the calendar icon to the right of the date field.

The size of the pop-up calendar of the date picker is defined in a JavaScript file named a5_html_calendar.js . To change the size of the calendar modify the pixel offset values associated with offsetWidth (30) and offsetHeight (40) in the following line in this file.

'<body class="'+style+'PAGEBODY" 
on load="fill_calendar('+old_month+', '+old_year+', settings, '+month_type+', '+day_type+'); 
window.resizeTo(document.getElementById(\'cal_layout_table\').offsetWidth+ 30  , 
document.getElementById(\'cal_layout_table\').offsetHeight+ 40  )" style="margin:0px; 
overflow: hidden;">\n'+

Drop down list, radio button, and check box controls. Dropdown list controls optionally allow multiple selections.