Data-Grid view

Grid Title: The title that appears when this view is displayed on the screen for the app.

Data Provider: The selected data provider for this view.

Data Source: The selected data source from the chosen data provider.

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".

Toolbar Button Icons:

Cancel Icon: An icon for the cancel button.

Create Icon: An icon for the create button.

Save Icon: An icon for the save button.

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".

Row Button Icons:

Delete Icon: An icon for the delete button in the row.

Edit Icon: An icon for the edit button in the row.

Grid Columns: Click Edit to change the included columns and various properties of the columns. See Editing grid columns for more information.

Page Size: The number of rows that will be displayed per page in the grid.

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

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.

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.

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.

CSS Class List: The CSS classes that need to be applied to the view. The classes must be defined in the view's style.css file, which can be opened and edited by clicking the Edit CSS button in the View Styles pane on top.

Events:

Row Select Event Function: The name of a JavaScript function that runs when a grid row is selected by the app user.

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.

Custom top html section: Located in the area above the Grid Title, the text in this placeholder introduces the view path name of the topSection.html file where you can add your custom HTML.

Custom middle html section:: Located in the area below the Grid Title but above the grid itself, the text in this placeholder introduces the view path name of the middleSection.html file where you can add your custom HTML.

Custom bottom html section:: Located in the area below the grid, the text in this placeholder introduces the view path name of the bottomSection.html file where you can add your custom HTML.