Property Grid Control

Description

The Property Grid control is a new UX control that lets you add a property-grid style editor to your UX components. Property Grids are used extensively throughout the Alpha Anywhere IDE; you can reuse the same definitions for the Property Grid that are used in the desktop application.

Property Grid in the IDE

Property Grid in a UX Component

Styling Example (Alpha-Dark-Green)

Getting started adding a Property Grid to a UX.

In the UX Builder toolbox, locate the Data Bound Controls section and select More....

Choose the Property Grid control from the list of available controls.

After adding the control, click the smart field for the Control properties property to open the builder.

Type Options

The Type property defines how the Property Grid is built:

• JSON

  JSON — Provide a JSON string that defines the controls in the Property Grid.

• Xdialog

  Xdialog — Use the Xdialog syntax (as used in desktop applications) to define the grid.

• SQL Table

  SQL Table — Select fields from a SQL table and automatically generate the Property Grid for those fields.

• List

  List — Specify the name of a List control in the UX and automatically generate a Property Grid with controls for each List field.

Field Properties and Data Sources

• The Xdialog, SQL Table, and List options expose a Field Properties property where you can customize how each field is rendered in the Property Grid. For example, the Country field can be configured as an EditCombo whose choices are populated by a SQL query.

• Field Properties Example

  

Client-side Filtering for Pick Lists

• When a Combo or EditCombo pick list is populated via SQL, you can filter its results client-side. For example, filter City choices by the selected Country. Ensure the Country field is included as an Additional field in the SQL Select for the Country pick list.

• 

Filter Script Example (JavaScript)

Define a Filter - client-side expression like the following:

The value selected in the Country field in the Property Grid is referenced via this.data.v.Country.

if (data.Country === this.data.v.Country) return true;
return false;

Defining the Property Grid Using the SQL Table Option

• Specify the connection string, the SQL table name, and choose the fields to include. By default, selected fields are rendered as text boxes with generated labels and help text. Use Field Properties to further customize field behavior and appearance.

• 

How to populate a Property Grid with Data from a SQL Table

• When you create a Property Grid control you can specify that the Property Grid should be created from fields in a SQL Table. In this video we show how you can populate a Property Grid that is build from a SQL table.

• Watch video

• Download

  Download component: howTopopulateAProgGridWithDQLdata.zip

  Date added - 2023-05-26

Defining the Property Grid Using the Xdialog Option

Provide an Xdialog definition for the Property Grid. The Xdialog syntax supports events on items using the form event=eventName. When a field value changes on an item with an event, a JavaScript event is fired. Define handlers in the Xdialog Syntax Javascript Event property; your script can reference eventName.

Example Xdialog snippet:

^^Category
    state=opened
    ++Item1
        var=v.Item1
        event=event1
    ++Item2
        var=v.Item2
        type=smart
        data=smartevent1
    ++Item3
        var=v.item3
        html_help=<b>this is bold</b> and this is normal.

• Xdialog Smart Field in Builder

  

• Xdialog Smart Field Rendered in UX

  (Image shows the three dots (ellipsis) representing the smart field.)

  

Smart Field Event Variables

• smartField">smartField

  The value of the data property for the field. For example, if Item1 has data=smartevent1, then smartField will be smartevent1.

• ele">ele

  A pointer to the Smart Field object.

Defining the Property Grid Using the List Option

Specify the name of a List control in the UX. The Property Grid will include controls corresponding to each field in the List.

Styling a Property Grid

• By default, the Property Grid uses generic styling. You can apply a predefined style by clicking the Set default class names link at the bottom of the Property Grid Builder window. This adds CSS class definitions to the CSS property and assigns class names to the various sections of the grid.

• Applying Default Class Names

  

Using a Property Grid as a Detail View for a List

• By default, a List with a Detail View creates individual controls on the UX for each field, mapping List fields to Detail View fields using a Field Map. Alternatively, set the Detail View type to PropertyGrid to use a Property Grid for the Detail View. You can either provide a predefined Property Grid definition (set the Property Grid definition property to Pre-defined), or allow Alpha Anywhere to generate a Property Grid based on the List structure. A sample UX template is available to get started quickly: ListWithPropertyGridForDetailView.

• Property Grid as List Detail View

  

Videos

In these videos we show how you can define a Property Grid control to edit data in a List and how the Property Grid can be placed in a Panel Window so that it is only shown when the user double clicks on a row in the List.

• Watch video - part 1
• Watch video - part 2
• Watch video - part 3

Download

Download component

Date added - 2023-05-19