Selecting the Stacked-Data-Grids view creates a vertically split screen with two separate grids. On the top, a parent grid arranges rows of included fields from a parent data source by column, and in the same order as they appear in the Included Columns list of the Grid Columns dialog for the parent grid (described below). On the bottom, a child grid arranges related rows of included fields from a child data source by column, and in the same order as they appear in the Included Columns list of the Grid Columns dialog for the child grid (described below).
The parent grid provides read-only access to its data source. When the user selects a row in the parent grid, the child grid displays the related rows from its child data source and provides read-only or editable access to that data source as specified by its properties. Like any grid, both the parent and child grid allow you to page through all their rows using their own page selection controls. In this way, you can page through all related child rows by paging and clicking every parent row, then paging through all the rows displayed in the child grid.
Note: Both the selected parent and child data sources must reference tables from the same OpenEdge Data Object Service, where both tables are bound by a parent-child relationship in the same Data Object resource. This resource must be created for an OpenEdge ProDataSet that includes both the two corresponding temp-tables and their data-relation as part of its definition. Therefore, no data sources from either an OData Provider or a Generic REST Provider are available to select for this view.
The Stacked-Data-Grids view has a number of customizable properties, listed on the right side of the view design page:
Data Provider: The selected data provider for this view.
Parent Data Source: The selected parent-grid data source from the chosen data provider.
Child Data Source: The selected child-grid data source from the chosen data provider.
Parent Grid Properties:
Grid Title: The title that appears for the parent grid when this view is rendered on the screen for the app.
Grid Columns: Click Edit to change the included columns and various properties of the columns.
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.).
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.
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.
Events:
Row Select Event Function: The name of a JavaScript function that runs when a parent row is selected by the app user.
Data Bound Event Function: The name of a JavaScript function that runs when the parent 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.
Child Grid Properties:
Grid Title: The title that appears for the child grid when this view is rendered on the screen for the app.
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.
Page Size: The number of rows that will be displayed per page in the grid.
Row Template Function Name: 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 \topParentSection.html file, the \middleSection.html file, the \topChildSection.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 Name: 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.
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.
Row selection has no function except to invoke the Row Select Event for each selected row.
Events:
Row Select Event Function: The name of a JavaScript function that runs when a child row is selected by the app user.
Data Bound Event Function: The name of a JavaScript function that runs when the child 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.
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.
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 parent 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 top parent html section:: Located in the area below the parent Grid Title but above the parent grid itself, the text in this placeholder introduces the view path name of the topParentSection.html file where you can add your custom HTML.
Custom middle html section:: Located in the area below the parent grid and above the child Grid Title, the text in this placeholder introduces the view path name of the middleSection.html file where you can add your custom HTML.
Custom top child html section:: Located in the area below the child Grid Title but above the child grid itself, the text in this placeholder introduces the view path name of the topChildSection.html file where you can add your custom HTML.
Custom bottom html section:: Located in the area below the child grid, 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.
Data Provider: The selected data provider for this view.