Selecting the Data-Grid-Separate-Form view works in much the same way as the Data-Gird-Form view, except that the user initially sees the grid only until they select a row. With a row selected in the grid, the view changes so the user sees the form only, displaying the fields included in that form from the selected row. Like the Data-Grid-Form view, this view can be read-only or user editable, where the editing of any single row in the grid is available using the form. Buttons on the form allow the user to return the view to displaying the grid only, depending on the edit mode of the view and the status of any edits.
The Data-Grid-Separate-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 Remove: 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 underlying data type, e.g., users will have access a basic editor with formatting capabilities for a rich text field.
Grid Columns: Click Edit to change various properties of the columns. See Editing grid columns for more information.
Form Fields: Click Edit to change 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.).
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 for both the grid and form, 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 or the 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 both 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.