Creating an app : Adding and editing views : Blank view : Adding content
  
Adding content
The Blank view offers a variety of data management, editing, scheduling, and navigational components. All of the components have an Id property:
*Id: A unique string with a default value that is automatically generated by the Designer for each component. You can use this to associate two components, like a label and a check-box, for example. Drag and drop a label and check-box, and then input the check-box's ID into the For property of the label to attach that label to the check-box. You can edit the Id to a more meaningful value as you require; however, it cannot be empty and must be unique among all component Id values in the view.
Like the predefined, data-driven views, the Blank view also provides the option for a custom section:
*Custom Section: You can add your own custom HTML code in this section. The Designer automatically generates a topSection.html file for you in the folder application-folder\app\src\modules\module-folder\view-folder. Add your custom HTML code to this file as desired. This file is typically used to add template code for the *Template* properties of content components added to the Blank view.
Note: Unlike the custom section files generated for the predefined, data-driven views, none of the HTML content added to the the Blank view's topSection.html file is visible in the view.
Note: This topic covers data management, editing, charting, and scheduling components. The navigation components are described in Adding navigation.
Table 2. Data management components
Component
Properties and notes
Grid
A grid component similar to the grid provided with the pre-defined Data-Grid view.
*Data Source Name: A grid data source instance that you have defined for the Blank view.
*Edit Mode:
*ReadOnly: This mode supports read-only access to data in the grid.
*Incell: This mode supports edits to multiple rows at a time in the grid. Data editing is supported using the fields of the grid itself. You initiate editing by clicking a column within a row. Each row also provides a button to delete the associated row in the grid. In this mode, the toolbar above the grid provides buttons to create a new row, and to save all changes or cancel all changes to the rows in the grid.
*Inline: This mode supports edits to a single row at a time in the grid. Data editing is supported using the fields of the row itself. You initiate editing by clicking an edit button on the row you want to update. Each row also provides a button to delete the associated row in the grid. In this mode, the toolbar above the grid provides a single button to create a new row in the grid.
*Popup: This mode supports edits to a single row at a time in the grid. Data editing is supported using a pop-up form. You initiate editing by clicking an edit button on the row you want to update. Each row also provides a button to delete the associated row in the grid. In this mode, the toolbar above the grid provides a single button to create a new row in the grid.
*Edit Options:
*Allow Insert: An option that allows new rows to be created in the grid.
*Allow Edit: An option that allows existing rows to be edited in the grid.
*Allow Delete: An option that allows existing rows to be deleted in the grid.
*Toolbar Button Labels:
*Cancel: A custom label for the button that cancels all pending edits in the grid. The default is "Cancel changes".
*Create: A custom label for the button that creates a new row in the grid. The default is "New".
*Save: A custom label for the button that saves all pending edits in the grid. The default is "Save changes".
*Row Button Labels:
*Cancel Edit: A custom label for the button that cancels all pending edits in the row. The default is "Cancel".
*Delete: A custom label for the button that deletes the row. The default is "Delete".
*Edit: A custom label for the button that initiates editing in the row. The default is "Edit".
*Update: A custom label for the button that confirms any pending delete or edits to the row. The default is "Update".
*Grid Columns: Click Edit to change the included columns and various properties of the columns. See Editing grid columns for more information.
*Row Template Function: The name of a JavaScript function that returns the text for a Kendo UI rowTemplate. If specified, the row template is used to format all the rows in the grid unless you also define an altRowTemplate. For more information, see the entry for rowTemplate at http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-rowTemplate, in the Kendo UI by Progress Documentation and API Reference. For more information on defining a rowTemplate for a Kendo UI Builder editable grid, see Kendo UI Builder by Progress: Modernizing OpenEdge Applications.
*Alt Row Template Function: The name of a JavaScript function that returns the text for a Kendo UI altRowTemplate. If specified, the altRowTemplate is used to format every other row in the grid. For more information, see the entry for altRowTemplate at http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-altRowTemplate, in the Kendo UI by Progress Documentation and API Reference. For more information on defining a rowTemplate for a Kendo UI Builder editable grid, see Kendo UI Builder by Progress: Modernizing OpenEdge Applications
*Row Template Id: The ID of an HTML rowTemplate. If specified, the rowTemplate must be defined in either the application-folder\app\src\modules\module-folder\view-folder​\topSection.html file, the \middleSection.html file, or the \bottomSection.html file. If both a Row Template Function and a Row Template Id are specified, the Row Template Id takes precedence.
*Alt Row Template Id: The ID of an HTML altRowTemplate. If specified, the altRowTemplate must be defined in either the application-folder\app\src\modules\module-folder\view-folder​\topSection.html file, the \middleSection.html file, or the \bottomSection.html file. If both an Alt Row Template Function and an Alt Row Template Id are specified, the Row Template Id takes precedence.
*Enable Column Filtering: Provides the app user with the ability to filter the displayed information based on content, including filters for numeric values (e.g., is equal to, is not equal to) and text fields (e.g., starts with, does not contain, etc.).
*Enable Grouping: Provides the app user with the ability to group the rows according to the value of a particular column. For example, in a grid with columns representing customer names and order numbers, grouping by customer name will arrange the rows so that all of the order numbers from each given customer are grouped together. Grouping should only be used with client-side processing.
*Enable Column Resize: Provides the app user with the ability to resize the columns by dragging the column divider(s).
*Enable Column Reordering: Provides the app user with the ability to reorder the columns by dragging and dropping the column headers.
*Enable Sorting: Provides the app user with the ability to reorder rows by ascending or descending value in a given column.
*Selection Type: Determines if rows in a grid can be selected:
*None: No row selection is allowed (default).
*Single: One row can be selected at a time.
*Multiple: Multiple rows can be selected at one time.
Note: Row selection has no function except to invoke the Row Select Event for each selected row.
*Model: The grid component can be bound directly to a data source or associated with a data source through a model. For the latter, select the model instance with this menu.
*Events:
*Row Select Event Function: The name of a JavaScript function that runs when a grid row is selected by the app user.
*Data Bound Event Function: The name of a JavaScript function that runs when the grid is bound to its data source.
*Row Create Event Function: The name of a JavaScript function that runs before a row is created for a new data source record.
*Row Update Event Function: The name of a JavaScript function that runs before an existing data source record is updated in the row.
*Row Delete Event Function: The name of a JavaScript function that runs before an existing data source record is deleted in the row.
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.
List View
A list component that presents data for display and editing from the records of a selected data source based on separate display and edit templates.
*Data Source Name: A list view data source instance that you have defined for the Blank view.
*Template Function: The list view requires custom code to display data. See the code example below this table. Any function you name in this field must be defined in application-folder\app\src\modules\module-folder\view-folder​\controller.public.js.
*Template Id: The Id of an HTML row template. If specified, the row template must be located in the application-folder\app\src\modules\module-folder\view-folder​\topSection.html file.
*Edit Template Function: A function used when the list view is in edit mode. Any function you name in this field must be defined in application-folder\app\src\modules\module-folder\view-folder​\controller.public.js.
*Edit Template Id: The Id of an HTML row template when the list view is in edit mode. If specified, the row template must be located in the application-folder\app\src\modules\module-folder\view-folder​\topSection.html file.
*Selection Type: Determines if items in the list view can be selected:
*None: No item selection is allowed (default).
*Single: One item can be selected at a time.
*Multiple: Multiple items can be selected at one time.
Note: Item selection has no function except to invoke the Select Event for each selected item.
*Model: The list view component can be bound directly to a data source or associated with a data source through a model. For the latter, select the model instance with this menu.
*Events:
*Cancel Event Function: The name of a JavaScript function that runs when the user cancels an operation.
*Select Event Function: The name of a JavaScript function that runs when the user selects an item in the list view.
*Data Bound Event Function: The name of a JavaScript function that runs when the list view is bound to its data source.
*Edit Event Function: The name of a JavaScript function that runs when the user makes an edit to an item in the list view.
*Remove Event Function: The name of a JavaScript function that runs when the user removes an item from the list view.
*Save Event Function: The name of a JavaScript function that runs when the user saves a change to the list view.
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.
Sample template function for a list view:
templateFunction: function(data) {
var template = kendo.template("<div id='box'>#: Name #</div>");
var result = template(data); //Passing the data to the template
return result;}
Table 3. Editor components
Component
Properties, events, and notes
Auto Complete
A text box that automatically suggests options for a value based on the user's typed input.
*Data Source Name: A data source instance that you have defined for the Blank view. The value you enter is entered and displayed from this data source.
*Model: The data model associated with this component.
*Data Text Field: A field from the data source associated with the component. This is the field that displays the value from the data source that you can enter or change.
*Title Text: This optional text appears when a user hovers over the component.
*Value Primitive: Restricts the model to one field of the record.
*Filter Method: If the user begins typing in the auto complete, the choices available will be limited as follows:
*StartsWith: Values that begin with the first characters they type. For example, if they type w, the options will be restricted to those values that begin with "w".
*EndsWith: Values that end with the last characters they type. For example, if they type e as the last character, the options will be restricted to those values that end with "e".
*Contains: Values that contain the characters they type. For example, if they type ove, the options will be restricted to those values that contain "ove".
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component value.
*Filtering Event Function: The name of a JavaScript function that runs after the user filters the results.
*Select Event Function: The name of a JavaScript function that runs when the user selects a value among the choices offered.
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.
Boolean Radio Button List
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).
*Model: The data model associated with this component.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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.
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.
*Model: The data model associated with this component.
*Title Text: This optional text appears when a user hovers over the component.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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
This component binds to both a data source instance and a model to display a list of values that the user can both select and edit.
*Data Source Name: A data source instance that you have defined for the Blank view. The list of values for the combo box are loaded from this data source.
*Model: The data model associated with this component. The value initially displayed in the combo box is loaded from this model.
*Data Text Field: A field from the data source associated with the component. This is the field displayed in the combo box.
*Data Value Field: A field from the data source that uniquely identifies the selected item. For example, employee records could have an Employee Number field that uniquely identifies employees with the same last name.
*Cascade from: The ID of another combo box in the Blank view. You use this property when you want to build cascading combo boxes in the view. For example, one combo box may display a list of product categories. When a user makes a selection, the selected category is cascaded to another combo box, which then displays a list of products for that category. Click here to see an example of cascading combo boxes.
Note: To build cascading combo boxes, you must ensure that the data sources of the combo boxes are related. Kendo UI Builder extracts this relationship from the JSDO catalog of the data provider.
*Cascade from field: A field in the data source of the combo box from which a selection is cascaded to the current combo box.
*Title Text: This optional text appears when a user hovers over the component.
*Value Primitive: Restricts the model to one field of the record.
*Filter Method: If the user begins typing in the combo box, the choices available will be limited as follows:
*None: No filtering of values.
*StartsWith: Values that begin with the first characters they type. For example, if they type w, the options will be restricted to those values that begin with "w".
*EndsWith: Values that end with the last characters they type. For example, if they type e as the last character, the options will be restricted to those values that end with "e".
*Contains: Values that contain the characters they type. For example, if they type ove, the options will be restricted to those values that contain "ove".
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component value.
*Filtering Event Function: The name of a JavaScript function that runs after the user filters the results.
*Select Event Function: The name of a JavaScript function that runs when the user selects a value among the choices offered.
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.
Currency Text Box
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.
*Model: The data model associated with this component.
*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 component.
*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 component 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
A specialized drop down component 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 component.
*Model: The data model associated with this component.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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
A specialized drop down component 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 component.
*Model: The data model associated with this component.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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
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.
*Model: The data model associated with this component.
*Title Text: This optional text appears when a user hovers over the component.
Drop Down List
This component binds to both a data source instance and a model to display a list of values that the user can select.
*Id: A unique identifier for the component.
*Name Attribute: A value for the HTML name attribute.
*Data Source : A data source instance that you have defined for the Blank view. The list of values for the drop down list are loaded from this data source.
*Data Text Field: A field from the data source or model associated with the component. This is the field displayed in the drop down list.
*Data Value Field: A field from the data source that uniquely identifies the selected item. For example, employee records could have an Employee Number field that uniquely identifies employees with the same last name.
*Cascade from: The ID of another drop down list in the Blank view. You use this property when you want to build cascading drop down lists in the view. For example, one drop down list may display a list of product categories. When a user makes a selection, the selected category is cascaded to another drop down list, which then displays a list of products for that category. Click here to see an example of cascading drop down lists.
Note: To build cascading drop down lists, you must ensure that the data sources of the drop down lists are related. Kendo UI Builder extracts this relationship from the JSDO catalog of the data provider.
*Cascade from field: A field in the data source of the drop down list from which a selection is cascaded to the current drop down list.
*Value Primitive: Restricts the model to one field of the record.
*Default Item: The item initially displayed in the drop down list. The user can then change the selected item as needed.
*Title Text: This optional text appears when a user hovers over the component.
*Model: The data model associated with this component. The value displayed in the drop-down list is initially loaded from this model.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component value.
*Select Event Function: The name of a JavaScript function that runs when the user selects a value among the choices offered.
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.
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 component.
*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.
*Model: The data model associated with this component.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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
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 component.
*Model: The data model associated with this component.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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
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.
*Min and Max: The minimum and maximum values allowed, respectively.
*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 component.
*Up Arrow Text: The text shown when the user hovers over the up arrow.
*Model: The data model associated with this component.
*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 component 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.
Label
A label for another Blank view component.
*For: An Id of another component, which this label will be associated with. This is optional; for example, you can use a label as a user aid without tying it to a specific component.
*Text: The actual text of the label.
Masked Text Box
A specialized version of a text-box that supports an input mask.
*Mask: Specifies the input mask. See http://docs.telerik.com/kendo-ui/api/javascript/ui/maskedtextbox#configuration-mask for the supported mask rules.
*Prompt Char: The character displayed in the mask before the user inputs anything. Defaults to "_".
*Default Value: The text initially displayed in the text box. The Prompt Char value appears whenever the user deletes this text without replacing it with an acceptable value.
*Title Text: This optional text appears when a user hovers over the component.
*Model: The data model associated with this component.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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
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.
*Min and Max: The minimum and maximum values allowed, respectively.
*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 component.
*Up Arrow Text: The text shown when the user hovers over the up arrow.
*Model: The data model associated with this component.
*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 component 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
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 component.
*Debounce: The delay, in milliseconds, between user input and the running of the Change Event Function.
*Model: The data model associated with this component.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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
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.
*Min and Max: The minimum and maximum values allowed, respectively.
*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 component.
*Up Arrow Text: The text shown when the user hovers over the up arrow.
*Model: The data model associated with this component.
*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 component 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
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.
*Min and Max: The minimum and maximum values allowed, respectively.
*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 component.
*Up Arrow Text: The text shown when the user hovers over the up arrow.
*Model: The data model associated with this component.
*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 component 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
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 component.
*Model: The data model associated with this component.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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.
Radio Button List
A radio button set with multiple values based on the instances of a specified field in the data source result set. This component binds to both a data source instance and a model to provide field values for the buttons in the list. The selected button represents the value of the specified field from the corresponding record.
*Data Source Name: A data source instance that you have defined for the Blank view. The list of values corresponding to the buttons in the list are loaded from this data source.
*Data Text Field: A field from the data source or model associated with the component. This is the field displayed as the value of each button in the list.
*Data Value Field: A field from the data source that uniquely identifies the selected item. For example, employee records could have an Employee Number field that uniquely identifies employees with the same last name.
*Value Primitive: Restricts the model to one field of the record.
*Orientation: Chooses a horizontal or vertical orientation for the button list.
*Height (px): Height of the button list in pixels.
*Max Height (px): Maximum height of the button list in pixels.
*Model: The data model associated with this component. The values displayed in the button list are loaded from this model.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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.
Slider
A rich input component for selecting numeric values.
*Min and Max: The minimum and maximum values allowed, respectively.
*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 component.
*Model: The data model associated with this component.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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 Area
A multi-line version of a text box.
*Default Text: The text that initially appears in the text box. The user can edit or delete this text as needed.
*Placeholder: Text that initially appears 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 component.
*Debounce: The delay, in milliseconds, between user input and the running of the Change Event Function.
*Rows: The number of lines of text visible in the text box.
*Columns: The width of the text box measured in average character widths.
*Model: The data model associated with this component.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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.
Text Box
A general purpose text box.
*Default Text: The text that initially appears in the text box. The user can edit or delete this text as needed.
*Placeholder: Text that initially appears 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 component.
*Debounce: The delay, in milliseconds, between user input and the running of the Change Event Function.
*Model: The data model associated with this component.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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.
Time Picker
Allows users to select a time value from a predefined time drop-down menu or to enter a new time value.
*Default Time: The time value initially displayed.
*Time Format: The format for how the time value is 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 component.
*Model: The data model associated with this component.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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
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.
*Default Text: The URL initially displayed in the text box. The user can edit or delete this text as needed.
*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 component.
*Model: The data model associated with this component.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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.
Table 4. Chart components
Component
Properties and notes
Area Charts
Charts that plot one or more series of item values as the area under a line plotted along the item points for each series. The line and area for each item series gets a distinguishing color.
*Data Source Name: A chart data source instance that you have defined for the Blank view.
*Title:
*Text: A string that specifies a title for the chart.
*Legend: Identifies each item series plotted in the chart by a key showing the value of its Item Name field (see the Chart series property) and a corresponding line and area color:
*Background: A color selection for the legend background of the chart. Choose a color that does not mask a generated legend color.
*Position: The location in the chart to display the legend, which you can select from Top, Bottom, Left, or Right.
*Visible: Indicates if the legend is displayed for the chart.
Note: The user can identify a corresponding series in the chart by clicking its legend key, which alternately removes and re-inserts its plotted line and area in the chart.
*Value axis configuration: Configures the axis for plotting series item values in the chart:
*Labels: Presentation of the major item increment values along this axis:
*Format: This can be used to customize how the increment values appear along the axis. Use the argument {0} to represent the increment value. You can also add additional text to be displayed. For example, if the axis is used to plot numeric values measured in kilograms, {0} kg appends " kg" to every major increment. You can also add specifiers to control the format of the increment values. If the increments are date values, you can specify that they display dates in long form, e.g., Wednesday, October 3, 1997, using this syntax:
{0:D}
*Rotation of the angle:
Angle: The angle of rotation for displaying the increment values.
*Line:
*Visibility of line: Indicates if the axis line is displayed.
*Major unit: The size of the major increments labeled along the axis.
*Max axis: The maximum item value plotted on the axis.
*Min axis: The minimum item value plotted on the axis.
*Category axis: Configures the axis used to identify a category for each plotted item:
*Field: The name of a data source field that identifies the category for the item value. For example, a Country field in a Customer data source that identifies a national category for Balance item values.
*Labels: Presentation of the category values along this axis:
*Format: This can be used to customize how the categories appear along the axis. Use the argument {0} to represent the category Field value. You can also add additional text to be displayed. For example, if the axis is used to plot numeric values that identify an age in years, {0} years appends " years" to every Field value. You can also add specifiers to control the format of the Field values. If the Field represents date values, you can specify that they display dates in long form, e.g., Wednesday, October 3, 1997, using this syntax:
{0:D}
*Rotation of the angle:
Angle: The angle of rotation for displaying the category values.
*Series default settings: Default settings for displaying series item values in the chart:
*Labels setting: Presentation of every series item label:
*Visible: Indicates if a label is displayed for the plot point of each item value.
*Chart series: Click Edit to add or change each series item to plot, including the properties of an item. See Editing chart series for more information.
*Tooltip settings: Settings for displaying the item value when the pointer hovers over a plot point:
*Format: This can be used to customize how the tooltip for each item value appears over its plot point. Use the argument {0} to represent the item value. You can also add additional text to be displayed. For example, if the items are numeric values measured in kilograms, {0} kg appends " kg" to every item value. You can also add specifiers to control the format of the increment values. If the increments are date values, you can specify that they display dates in long form, e.g., Wednesday, October 3, 1997, using this syntax:
{0:D}
*Template Function: Tooltips require custom code to display the item value. See the code example below this table. Any function you name in this field must be defined in application-folder\app\src\modules\module-folder\view-folder​\controller.public.js.
*Template Id: The Id of an HTML <div> template for item tooltips. If specified, the template must be located in the application-folder\app\src\modules\module-folder\view-folder​\topSection.html file.
*Visible: Indicates if each item value is displayed in the chart as a tooltip.
*Model: The chart component can be bound directly to a data source or associated with a data source through a model. For the latter, select the model instance with this menu.
*Events:
*Data Bound Event Function: The name of a JavaScript function that runs when the chart is bound to its data source.
*Click Event Function: The name of a JavaScript function that runs when the user clicks on an item series in the chart.
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.
Bar Charts
Charts that plot one or more series of item values as either horizontal bars or vertical columns (depending on the chart type) plotted along the item points for each series. The bar or column for each item series gets a distinguishing color.
*Data Source Name: A chart data source instance that you have defined for the Blank view.
*Title:
*Text: A string that specifies a title for the chart.
*Legend: Identifies each item series plotted in the chart by a key showing the value of its Item Name field (see the Chart series property) and a corresponding bar or column color:
*Background: A color selection for the legend background of the chart. Choose a color that does not mask a generated legend color.
*Position: The location in the chart to display the legend, which you can select from Top, Bottom, Left, or Right.
*Visible: Indicates if the legend is displayed for the chart.
Note: The user can identify a corresponding series in the chart by clicking its legend key, which alternately removes and re-inserts its plotted bars or columns in the chart.
*Value axis configuration: Configures the axis for plotting series item values in the chart:
*Labels: Presentation of the major item increment values along this axis:
*Format: This can be used to customize how the increment values appear along the axis. Use the argument {0} to represent the increment value. You can also add additional text to be displayed. For example, if the axis is used to plot numeric values measured in kilograms, {0} kg appends " kg" to every major increment. You can also add specifiers to control the format of the increment values. If the increments are date values, you can specify that they display dates in long form, e.g., Wednesday, October 3, 1997, using this syntax:
{0:D}
*Rotation of the angle:
Angle: The angle of rotation for displaying the increment values.
*Line:
*Visibility of line: Indicates if the axis line is displayed.
*Major unit: The size of the major increments labeled along the axis.
*Max axis: The maximum item value plotted on the axis.
*Min axis: The minimum item value plotted on the axis.
*Category axis: Configures the axis used to identify a category for each plotted item:
*Field: The name of a data source field that identifies the category for the item value. For example, a Country field in a Customer data source that identifies a national category for Balance item values.
*Labels: Presentation of the category values along this axis:
*Format: This can be used to customize how the categories appear along the axis. Use the argument {0} to represent the category Field value. You can also add additional text to be displayed. For example, if the axis is used to plot numeric values that identify an age in years, {0} years appends " years" to every Field value. You can also add specifiers to control the format of the Field values. If the Field represents date values, you can specify that they display dates in long form, e.g., Wednesday, October 3, 1997, using this syntax:
{0:D}
*Rotation of the angle:
Angle: The angle of rotation for displaying the category values.
*Series default settings: Default settings for displaying series item values in the chart:
*Labels setting: Presentation of every series item label:
*Visible: Indicates if a label is displayed for the plot point of each item value.
*Type: A choice of two chart types:
*Bar: Horizontal item bars plotted along a horizontal value axis and vertical category axis.
*Column: Vertical item columns plotted along a vertical value axis and horizontal category axis.
*Chart series: Click Edit to add or change each series item to plot, including the properties of an item. See Editing chart series for more information.
*Tooltip settings: Settings for displaying the item value when the pointer hovers over a plot point:
*Format: This can be used to customize how the tooltip for each item value appears over its plot point. Use the argument {0} to represent the item value. You can also add additional text to be displayed. For example, if the items are numeric values measured in kilograms, {0} kg appends " kg" to every item value. You can also add specifiers to control the format of the increment values. If the increments are date values, you can specify that they display dates in long form, e.g., Wednesday, October 3, 1997, using this syntax:
{0:D}
*Template Function: Tooltips require custom code to display the item value. See the code example below this table. Any function you name in this field must be defined in application-folder\app\src\modules\module-folder\view-folder​\controller.public.js.
*Template Id: The Id of an HTML <div> template for item tooltips. If specified, the template must be located in the application-folder\app\src\modules\module-folder\view-folder​\topSection.html file.
*Visible: Indicates if each item value is displayed in the chart as a tooltip.
*Model: The chart component can be bound directly to a data source or associated with a data source through a model. For the latter, select the model instance with this menu.
*Events:
*Data Bound Event Function: The name of a JavaScript function that runs when the chart is bound to its data source.
*Click Event Function: The name of a JavaScript function that runs when the user clicks on an item series in the chart.
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.
Donut Charts
Charts that plot one or more series of item values as segments of one or more concentric donuts, where each donut plots items for a single series. The segments for each item series therefore occupy one of the concentric donuts. The size of each segment in a given donut occupies space that is sized relative to the item value it represents in that series.
*Data Source Name: A chart data source instance that you have defined for the Blank view.
*Title:
*Text: A string that specifies a title for the chart.
*Legend: Identifies each donut segment by a key that shows the value of the Item Category Field selected for the plotted item series (see the Chart series property) and a corresponding segment color:
*Background: A color selection for the legend background of the chart. Choose a color that does not mask a generated legend color.
*Position: The location in the chart to display the legend, which you can select from Top, Bottom, Left, or Right.
*Visible: Indicates if the legend is displayed for the chart.
Note: The user can identify a corresponding segment in the chart by clicking its legend key, which alternately removes and re-inserts the plotted segment in the chart.
*Series default settings: Default settings for displaying series item values in the chart:
*Labels setting: Presentation of every series item label:
*Background: A background color selection for item value labels. Choose a color that is not masked by a generated segment color for an item category.
*Position: The location in the chart to display the item labels, which you can select from above, below, center, insideBase, left, outsideEnd, right, top, or bottom. Choose the value that best distinguishes item labels both within and among different item series (donuts).
*Template Function: Item labels require custom code to display the item value. See the code example below this table. Any function you name in this field must be defined in application-folder\app\src\modules\module-folder\view-folder​\controller.public.js.
*Template Id: The Id of an HTML <div> template for item labels. If specified, the template must be located in the application-folder\app\src\modules\module-folder\view-folder​\topSection.html file.
*Visible: Indicates if an item label is displayed for every donut segment.
*Chart series: Click Edit to add or change each series item to plot, including the properties of an item. See Editing chart series for more information.
*Tooltip settings: Settings for displaying the item value when the pointer hovers over its donut segment:
*Format: This can be used to customize how the tooltip for each item value appears over its donut segment. Use the argument {0} to represent the item value. You can also add additional text to be displayed. For example, if the items are numeric values measured in kilograms, {0} kg appends " kg" to every item value. You can also add specifiers to control the format of the increment values. If the increments are date values, you can specify that they display dates in long form, e.g., Wednesday, October 3, 1997, using this syntax:
{0:D}
*Template Function: Tooltips require custom code to display the item value. See the code example below this table. Any function you name in this field must be defined in application-folder\app\src\modules\module-folder\view-folder​\controller.public.js.
*Template Id: The Id of an HTML <div> template for item tooltips. If specified, the template must be located in the application-folder\app\src\modules\module-folder\view-folder​\topSection.html file.
*Visible: Indicates if each item value is displayed in the chart as a tooltip.
*Model: The chart component can be bound directly to a data source or associated with a data source through a model. For the latter, select the model instance with this menu.
*Events:
*Data Bound Event Function: The name of a JavaScript function that runs when the chart is bound to its data source.
*Click Event Function: The name of a JavaScript function that runs when the user clicks on an item series in the chart.
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.
Line Charts
Charts that plot one or more series of item values as a line plotted along the item points for each series. The line for each item series gets a distinguishing color.
*Data Source Name: A chart data source instance that you have defined for the Blank view.
*Title:
*Text: A string that specifies a title for the chart.
*Legend: Identifies each item series plotted in the chart by a key showing the value of its Item Name field (see the Chart series property) and a corresponding line color:
*Background: A color selection for the legend background of the chart. Choose a color that does not mask a generated legend color.
*Position: The location in the chart to display the legend, which you can select from Top, Bottom, Left, or Right.
*Visible: Indicates if the legend is displayed for the chart.
Note: The user can identify a corresponding series in the chart by clicking its legend key, which alternately removes and re-inserts its plotted line in the chart.
*Value axis configuration: Configures the axis for plotting series item values in the chart:
*Labels: Presentation of the major item increment values along this axis:
*Format: This can be used to customize how the increment values appear along the axis. Use the argument {0} to represent the increment value. You can also add additional text to be displayed. For example, if the axis is used to plot numeric values measured in kilograms, {0} kg appends " kg" to every major increment. You can also add specifiers to control the format of the increment values. If the increments are date values, you can specify that they display dates in long form, e.g., Wednesday, October 3, 1997, using this syntax:
{0:D}
*Rotation of the angle:
Angle: The angle of rotation for displaying the increment values.
*Line:
*Visibility of line: Indicates if the axis line is displayed.
*Major unit: The size of the major increments labeled along the axis.
*Max axis: The maximum item value plotted on the axis.
*Min axis: The minimum item value plotted on the axis.
*Category axis: Configures the axis used to identify a category for each plotted item:
*Field: The name of a data source field that identifies the category for the item value. For example, a Country field in a Customer data source that identifies a national category for Balance item values.
*Labels: Presentation of the category values along this axis:
*Format: This can be used to customize how the categories appear along the axis. Use the argument {0} to represent the category Field value. You can also add additional text to be displayed. For example, if the axis is used to plot numeric values that identify an age in years, {0} years appends " years" to every Field value. You can also add specifiers to control the format of the Field values. If the Field represents date values, you can specify that they display dates in long form, e.g., Wednesday, October 3, 1997, using this syntax:
{0:D}
*Rotation of the angle:
Angle: The angle of rotation for displaying the category values.
*Series default settings: Default settings for displaying series item values in the chart:
*Labels setting: Presentation of every series item label:
*Visible: Indicates if a label is displayed for the plot point of each item value.
*Chart series: Click Edit to add or change each series item to plot, including the properties of an item. See Editing chart series for more information.
*Tooltip settings: Settings for displaying the item value when the pointer hovers over a plot point:
*Format: This can be used to customize how the tooltip for each item value appears over its plot point. Use the argument {0} to represent the item value. You can also add additional text to be displayed. For example, if the items are numeric values measured in kilograms, {0} kg appends " kg" to every item value. You can also add specifiers to control the format of the increment values. If the increments are date values, you can specify that they display dates in long form, e.g., Wednesday, October 3, 1997, using this syntax:
{0:D}
*Template Function: The tooltip requires custom code to display the item value. See the code example below this table. Any function you name in this field must be defined in application-folder\app\src\modules\module-folder\view-folder​\controller.public.js.
*Template Id: The Id of an HTML <div> template. If specified, the template must be located in the application-folder\app\src\modules\module-folder\view-folder​\topSection.html file.
*Visible: Indicates if each item value is displayed in the chart as a tooltip.
*Model: The chart component can be bound directly to a data source or associated with a data source through a model. For the latter, select the model instance with this menu.
*Events:
*Data Bound Event Function: The name of a JavaScript function that runs when the chart is bound to its data source.
*Click Event Function: The name of a JavaScript function that runs when the user clicks on an item series in the chart.
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.
Pie Charts
Charts that plot item values from one or more series as slices of a single pie. The size of each slice is relative to the item value it represents in its series.
Note: The space constraints of a single pie make this chart most appropriate for plotting a single item series at one time.
*Data Source Name: A chart data source instance that you have defined for the Blank view.
*Title:
*Text: A string that specifies a title for the chart.
*Legend: Identifies each slice by a key that shows the value of the Item Category Field selected for each plotted item series (see the Chart series property) and a corresponding color:
*Background: A color selection for the legend background of the chart. Choose a color that does not mask a generated legend color.
*Position: The location in the chart to display the legend, which you can select from Top, Bottom, Left, or Right.
*Visible: Indicates if the legend is displayed for the chart.
Note: The user can identify a corresponding slice in the chart by clicking its legend key, which alternately removes and re-inserts the plotted slice in the chart.
*Series default settings: Default settings for displaying series item values in the chart:
*Labels setting: Presentation of every series item label:
*Background: A background color selection for item value labels. Choose a color that is not masked by a generated slice color for an item category.
*Template Function: Item labels require custom code to display the item value. See the code example below this table. Any function you name in this field must be defined in application-folder\app\src\modules\module-folder\view-folder​\controller.public.js.
*Template Id: The Id of an HTML <div> template for item labels. If specified, the template must be located in the application-folder\app\src\modules\module-folder\view-folder​\topSection.html file.
*Visible: Indicates if an item label is displayed for every slice.
*Chart series: Click Edit to add or change each series item to plot, including the properties of an item. See Editing chart series for more information.
*Tooltip settings: Settings for displaying the item value when the pointer hovers over its pie slice:
*Format: This can be used to customize how the tooltip for each item value appears over its pie slice. Use the argument {0} to represent the item value. You can also add additional text to be displayed. For example, if the items are numeric values measured in kilograms, {0} kg appends " kg" to every item value. You can also add specifiers to control the format of the increment values. If the increments are date values, you can specify that they display dates in long form, e.g., Wednesday, October 3, 1997, using this syntax:
{0:D}
*Template Function: Tooltips require custom code to display the item value. See the code example below this table. Any function you name in this field must be defined in application-folder\app\src\modules\module-folder\view-folder​\controller.public.js.
*Template Id: The Id of an HTML <div> template for item tooltips. If specified, the template must be located in the application-folder\app\src\modules\module-folder\view-folder​\topSection.html file.
*Visible: Indicates if each item value is displayed in the chart as a tooltip.
*Model: The chart component can be bound directly to a data source or associated with a data source through a model. For the latter, select the model instance with this menu.
*Events:
*Data Bound Event Function: The name of a JavaScript function that runs when the chart is bound to its data source.
*Click Event Function: The name of a JavaScript function that runs when the user clicks on an item series in the chart.
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.
Sample template function for a chart item value tooltip or label:
templateFunction: function(data) {
var template = kendo.template("<div id='box'>#: Balance #</div>");
var result = template(data); //Passing the data to the template
return result;}
Table 5. Scheduling components
Component
Properties and notes
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.
*Model: The data model associated with this component.
*Events:
*Change Event Function: The name of a JavaScript function that runs when the user makes a change to the component 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.
Table 6. Media components
Component
Properties and notes
Image
Enables you to add images. Supported file extensions include BMP, JPG, GIF, and PNG. You can either specify the location of an image file using the Source property or specify a data model. When you specify a data model, you also specify a field in the data model that contains an image binary. Doing this updates the image when the data model is updated. This is useful in cases where, for example, your view contains a data grid and you want the image updated when a user selects a row in the data grid.
*Id: A unique identifier for the image.
*Alternative Text: The text that will appear if the image cannot be displayed.
*Source: The filepath of the image file. To specify the filepath, click the folder icon and navigate to the location of the image file. The image file gets copied to app/src/images when files for the view are generated.
*Width: The image width in pixels (px).
*Height: The image height in pixels (px).
*Model: The data source and the field (an image binary) that you want to use for the image.
Table 7. Custom components
Component
Properties and notes
Custom HTML
A custom component defined using valid HTML.
*HTML: Clicking Edit on this property opens the Monaco editor to a default <div> block that you can edit using HTML to define your own custom component.
* Editing chart series