Creating an app : Adding and editing views : Data-Grid-Form view : Editing form fields
  
Editing form fields
From the Form Fields dialog, you can change several properties of the fields displayed in the form:
*You can use the Include all and Exclude all buttons to move the entire list of fields back and forth between Included Fields and Excluded Fields lists. You can also drag and drop individual fields back and forth between the field lists. The order that the fields appear in the Included Columns list is the default order that will be used for the form, so drag and drop the included fields into the order you prefer.
*By default all fields are put into one field group with the default label, New Group. You can change the label by clicking the group item, which displays the Name property under Properties where you can enter a new label value. You can use the + Add Group button to add one or more field groups to the Included Fields list with the default label, New Group. You can populate any field group by clicking the down arrow on the group item to open it and dragging and dropping fields from one field group to any other open field group. Field groups do not appear in your form unless you populate them with field items and you have more than one field group created. At runtime, field groups are displayed as tab folders on the form.
*When you select an field item in the Included Fields list, you can view or set the following Properties:
*Format: This can be used to customize how the field is presented. Use the argument {0} to represent the content of the field. You can also add additional text to be displayed. For example, if a field holds a numeric value measured in kilograms, {0} kg appends " kg" to every value of the field. You can also add specifiers to control the format of the field. If a field is a date value, you can specify that it display dates in long form, e.g., Wednesday, October 3, 1997, using this syntax:
{0:D}
See http://docs.telerik.com/kendo-ui/framework/globalization/numberformatting and http://docs.telerik.com/kendo-ui/framework/globalization/dateformatting for more information on number and date formatting options, respectively.
*Label Text: A field label that you can change from the default, which is the Label set for the selected field in the view data source.
*Field Name: Read-only name of the selected field in the list.
*You can also set additional properties and events under Editor Type. These are properties and events for the specified editor type that you can change to modify its default appearance and behavior in the form, as described below.
All of the editor types have an Id property:
*Id: A unique string with a default value that is automatically generated by the Designer for each component. You can edit the Id to a more meaningful value as you require; however, it cannot be empty and must be unique among all the editor type Id values in the view.
The remaining editor type properties and events are listed for each editor type in the following table, where Editor Type in Form Fields is the name of the editor type listed for the selected field in the Form Fields dialog, and Editor Type in Data Source is the name used to select the editor type for the same field in the Edit Data Source dialog.
Table 9. Editor Type properties and events
Editor Type in Form Fields
Editor Type in Data Source
Properties, events, and notes
Boolean Radio Button List
bool-radio-set
A radio button set with two possible boolean values (true or false).
*Default Value: Sets the initial state of the buttons. Check the box to set the True button value, or leave unchecked to set the False button value (the default).
*True text: The label that appears next to the True button ("True" by default).
*False text: The label that appears next to the False button ("False" by default).
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for this event function must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Calendar
calendar
A graphical calendar that supports navigation and selection.
*Min and Max Date (optional): The minimum (earliest) and maximum (latest) dates that can be displayed.
*Default Date (optional): The date initially displayed.
*Date Format: Specifies the date format used by the calendar component's underlying value( ) function. See http://docs.telerik.com/kendo-ui/api/javascript/ui/calendar#configuration-value for more information.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for these event functions must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Check Box
check-box
A box that displays with a check mark or empty, depending on the boolean value of the component.
*Value: Check this box to set the initial state of the component to true, or leave the box empty to set its initial state to false.
*Disabled: Check this box to disable the check box, or leave it unchecked to make the check box active.
*Title Text: This optional text appears when a user hovers over the editor type.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for this event function must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Combo Box
combo-box
This editor type binds to a data source to display a list of values that the user can both select and edit.
*Title Text: This optional text appears when a user hovers over the editor type.
Note: This editor type supports the Lookup semantic type that identifies foreign key fields defined in a data source. Most of the properties of this editor type are provided by the data source where the foreign keys are defined, some of which you must set to identify the lookup (reference) data source and its displayed field. For more information, see Adding data sources.
Currency Text Box
currency-input
A specialized version of a text-box for currency.
*Decimals: The number of decimal places displayed.
*Default Value: The amount initially displayed in the text box. The user can edit or delete this amount as needed.
*Down Arrow Text: The text shown when the user hovers over the down arrow.
*Min and Max: The minimum and maximum values allowed, respectively.
*Placeholder: The amount that initially appears in the text box. Unlike Default Value, this text automatically disappears when the user clicks on the text box.
*Step: The interval the entered value changes for each click of the down or up arrow.
*Title Text: This optional text appears when a user hovers over the editor type.
*Up Arrow Text: The text shown when the user hovers over the up arrow.
*Show Spinners: Select to display up and down arrows that change the field value when clicked by the increasing or decreasing Step-specified interval. Not selected by default.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for this event function must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Date Picker
date-input
A specialized drop down editor type that allows you to select a date value from a drop down calendar.
*Min and Max Date: The minimum (earliest) and maximum (latest) dates that can be displayed.
*Default Date: The date initially displayed.
*Date Format: The format the date is displayed in once the user has made a selection.
*Title Text: This optional text appears when a user hovers over the editor type.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for this event function must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Date Time Picker
date-time-input
A specialized drop down editor type that allows you to select a date and time value from a drop down calendar.
*Min and Max Date: The minimum (earliest) and maximum (latest) dates and times that can be displayed.
*Default Date: The date and time initially displayed.
*Date Format: The format for how the date and time are displayed.
*Time Interval: The interval, in minutes, between selectable values in the time drop-down menu, e.g., a value of 30 gives users the choice of 1:00, 1:30, 2:00, etc.
*Title Text: This optional text appears when a user hovers over the editor type.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for this event function must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Disabled Text Box
plain-text
Use the disabled text box to display read-only text.
*Default Value: The text initially displayed in the text box. You can edit or delete this text as needed.
*Title Text: This optional text appears when a user hovers over the editor type.
Drop Down List
drop-down-list
This editor type binds to a data source to display a list of values that the user can select.
*Title Text: This optional text appears when a user hovers over the editor type.
Note: This editor type supports the Lookup semantic type that identifies foreign key fields defined in a data source. Most of the properties of this editor type are provided by the data source where the foreign keys are defined, some of which you must set to identify the lookup (reference) data source and its displayed field. For more information, see Adding data sources.
Editor
editor
A customizable HTML editor.
*Encoded: Indicates whether the editor submits encoded HTML.
*Resizable
*Content: If checked, the user can resize the editor.
*Min and Max: The smallest and largest size the user can choose for the size of the editor.
*Toolbar: When checked, the formatting tools are limited to one row at the top of the editor, with the tools that do not fit organized into a drop-down menu. When unchecked, the tools are organized into as many rows as necessary.
*Title Text: This optional text appears when a user hovers over the editor type.
*Tools: Select one or more formatting tools available to your users. Once selected, any tool can be removed by clicking the X next to its name.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for this event function must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Email Text Box
email-input
A specialized version of a text-box for e-mail addresses.
*Debounce: The delay, in milliseconds, between user input and the running of the Change Event Function.
*Default Value: The e-mail address initially displayed in the text box. The user can edit or delete this text as needed.
*Placeholder: The e-mail address initially displayed in the text box. Unlike Default Value, this text automatically disappears when the user clicks on the text box.
*Title Text: This optional text appears when a user hovers over the editor type.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for this event function must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Integer Text Box
integer-input
A specialized version of a text-box for integer values only.
*Default Value: The integer initially displayed in the text box. The user can edit or delete this text as needed.
*Down Arrow Text: The text shown when the user hovers over the down arrow.
*Placeholder: The integer initially displayed in the text box. Unlike Default Value, this text automatically disappears when the user clicks on the text-box.
*Step: The interval the entered value changes for each click of the down or up arrow.
*Title Text: This optional text appears when a user hovers over the editor type.
*Up Arrow Text: The text shown when the user hovers over the up arrow.
*Show Spinners: Select to display up and down arrows that change the field value when clicked by the increasing or decreasing Step-specified interval. Not selected by default.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for this event function must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Numeric Text Box
numeric-input
A specialized version of a text-box for numeric values only.
*Decimals: The number of decimals displayed.
*Default Value: The number initially displayed in the text box. The user can edit or delete this text as needed.
*Down Arrow Text: The text shown when the user hovers over the down arrow.
*Format: The numeric format for the input. See http://docs.telerik.com/kendo-ui/api/javascript/ui/maskedtextbox#configuration-mask for the supported numeric types.
*Placeholder: The number initially displayed in the text box. Unlike Default Value, this text automatically disappears when the user clicks on the text-box.
*Step: The interval the entered value changes for each click of the down or up arrow.
*Title Text: This optional text appears when a user hovers over the editor type.
*Up Arrow Text: The text shown when the user hovers over the up arrow.
*Show Spinners: Select to display up and down arrows that change the field value when clicked by the increasing or decreasing Step-specified interval. Not selected by default.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for this event function must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Password Text Box
password-input
A specialized version of a text-box for passwords.
*Placeholder: The text initially displayed in the text box. This text automatically disappears when the user clicks on the text box.
*Title Text: This optional text appears when a user hovers over the editor type.
*Debounce: The delay, in milliseconds, between user input and the running of the Change Event Function.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for this event function must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Percent Text Box
percent-input
A specialized version of a text-box for percent values only. Use this when the percent values in the database must be multiplied by 100 before appending the % symbol for proper display (e.g., the database value of 0.256 will be displayed as 25.6%).
*Decimals: The number of decimal places displayed.
*Default Value: The value that initially appears in the text box. The user can edit or delete this text as needed.
*Down Arrow Text: The text shown when the user hovers over the down arrow.
*Placeholder: The value that initially appears in the text box. Unlike initial text, this text automatically disappears when the user clicks on the text-box.
*Step: The interval the entered value changes for each click of the down or up arrow.
*Title Text: This optional text appears when a user hovers over the editor type.
*Up Arrow Text: The text shown when the user hovers over the up arrow.
*Show Spinners: Select to display up and down arrows that change the field value when clicked by the increasing or decreasing Step-specified interval. Not selected by default.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for this event function must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Percent Value Text Box
percent-value-input
A specialized version of a text-box for percent values only. Use this when the percent values in the database only need the addition of the % symbol for proper display (e.g., the database value of 25 will be displayed as 25%).
*Decimals: The number of decimal places displayed.
*Default Value: The value that initially appears in the text box. The user can edit or delete this text as needed.
*Down Arrow Text: The text shown when the user hovers over the down arrow.
*Placeholder: The value that initially appears in the text box. Unlike Default Value, this text automatically disappears when the user clicks on the text-box.
*Step: The interval the entered value changes for each click of the down or up arrow.
*Title Text: This optional text appears when a user hovers over the editor type.
*Up Arrow Text: The text shown when the user hovers over the up arrow.
*Show Spinners: Select to display up and down arrows that change the field value when clicked by the increasing or decreasing Step-specified interval. Not selected by default.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for this event function must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Phone Text Box
phone-number-input
A specialized version of a text-box for phone numbers.
*Mask: Specifies the input mask. For example, (000) 000-0000 allows the user to enter a standard U.S., 10-digit phone number.
*Default Value: The value that initially appears in the text box. The user can edit or delete this text as needed.
*Title Text: This optional text appears when a user hovers over the editor type.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for this event function must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Slider
numeric-slider
A rich editor type for selecting numeric values.
*Orientation: Chooses a horizontal or vertical orientation for the slider.
*Show Buttons: Select to display decrease and increase arrow buttons on either end of the slider. Selected by default.
*Step: The interval that determines which values on the slider are valid, e.g., a step of 0.5 on a range of 1 to 10 allows users to select 1, 1.5, 2, 2.5, etc.
*Default Value: The number at which the slider is initially positioned.
*Title Text: This optional text appears when a user hovers over the editor type.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
*Slide Event Function: The name of a JavaScript function that runs when the user moves the drag handle.
The code for these event functions must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Text Box
text-input
A general purpose text box.
*Placeholder: Text that initially appears in the text box. This text automatically disappears when the user clicks on the text box.
*Title Text: This optional text appears when a user hovers over the editor type.
*Debounce: The delay, in milliseconds, between user input and the running of the Change Event Function.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for these event functions must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.
Url Text Box
url-input
A specialized version of a text-box for URLs.
*Debounce: The delay, in milliseconds, between user input and the running of the Change Event Function.
*Placeholder: The URL initially displayed in the text box. Unlike Default Text, this text automatically disappears when the user clicks on the text box.
*Title Text: This optional text appears when a user hovers over the editor type.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the underlying field value.
The code for these event functions must be included in the file, application-folder\app\src\modules\module-folder\view-folder​\controller.public.js. See Kendo UI Builder by Progress: Modernizing OpenEdge Applications for more information about extensions and event functions.