Selecting the Data-Grid-Form view creates a horizontally split screen. On the left, a grid arranges rows of included fields from your data source by column, and in the same order as they appear in the Included Columns list of the Grid Columns dialog (described below). On the right, any single row that you select in the grid is presented in a form, with its fields displayed in the same order as they appear in the Included Fields list of the Form Fields dialog (described below). This view can be read-only or user editable, where the editing of any single row is available using the form.
The Data-Grid-Form view has a number of customizable properties, listed on the right side of the view design page:
Title: The title that appears when this view is displayed on the screen for the app.
New Title: The title that appears when the app user adds a new record. (This is only relevant for an editable view.)
Edit Title: The title that appears when the app user edits an existing record. (This is only relevant for an editable view.)
Confirm Delete: When checked, the user is prompted with a confirmation dialog when deleting an existing record. (This is only relevant for an editable view.)
Data Provider: The selected data provider for this view.
Data Source: The selected data source from the chosen data provider.
Edit Mode: Choose Read-Only or Read-Only to Edit. Read-Only to Edit means that app users will be allowed to edit data in the form on the same screen. (The Title will change to Edit Title or New Title, depending on the type of edit the user is making.) The user's options for editing are determined by the default or overridden editor type, e.g., users will have access a basic editor with formatting capabilities for a rich text field.
Grid Columns: Click Edit to change the included columns and various properties of the columns. See Editing grid columns for more information.
Form Fields: Click Edit to change the included fields and various properties of the form fields. See Editing form fields 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.
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 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.
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.).
Note: Filtering, sorting, and paging operations execute based on the Client-side processing setting for the data source. Operations are performed on the client if Client-side processing is selected; otherwise, the operations are performed on the server side. See the info on enabling server-side processing in Adding data sources.
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.
Data Bound Event Function: The name of a JavaScript function that runs when the grid is bound to its data source.
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.
This view also includes the following custom HTML sections where you can include your own HTML for the view. Each section is identified in the view design page with a placeholder containing descriptive text:
Custom top html section: Located in the area above the 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 Title but above the grid and form 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 and form, the text in this placeholder introduces the view path name of the bottomSection.html file where you can add your custom HTML.
The Designer automatically generates these three files for you in application-folder\app\src\modules\module-folder\view-folder. Add your custom HTML code to these files as required.
Title: The title that appears when this view is displayed on the screen for the app.