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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Encoded: Indicates whether the editor submits encoded HTML.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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:

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:

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:

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.

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.

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:

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:

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:

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.

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.

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:

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.

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.

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:

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:

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:

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.

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.

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:

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.

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.

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.

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.