Selecting the Hierarchical-Data-Grid view creates a single scrolling grid structure that contains a single parent grid containing rows from a parent data source. This parent grid then embeds a child grid below each parent row that has related records in the child data source. As you scroll the grid structure and click an expander on parent rows, any child grid containing related data source rows displays below its related row in the parent grid. You can also click the expander on an expanded child grid to collapse the grid into its parent.
Both the parent and its child grids arrange the included fields from their respective data sources by column, in the same order as they appear in the Included Columns list of the Grid Columns dialog for the parent its child grids (described below).
The parent grid provides read-only access to its data source. When the user selects the expander on a row in the parent grid, if this parent row has related child rows, a 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 its child grids allow you to page through all their rows using page selection controls on each grid. In this way, you can page through all related child rows by paging and expanding every parent row, then paging through all the rows of each displayed 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 Hierarchical-Data-Grid 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.
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.
Parent Grid Properties:
Grid Title: The title that appears for the parent grid when this view is displayed 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 rows for the grid are bound to its parent data source.
Detail Init Event Function: The name of a JavaScript function that runs before the child rows for a parent expand.
Detail Expand Event Function: The name of a JavaScript function that runs after the child rows for a parent expand.
Detail Collapse Event Function: The name of a JavaScript function that runs after the user collapses the child rows for a parent.
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 each child grid when this view is displayed 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 rows for the grid are bound to its child 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.
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 top child html section:: Located in the area below each child Grid Title, immediately under the related row of the parent grid, 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 child html section:: Located in the area below each child grid but above either the next parent row or the bottom area of the parent grid, the text in this placeholder introduces the view path name of the bottomChildSection.html file where you can add your custom HTML.
Custom bottom html section:: Located in the area below the parent 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.