ebs.generateInteractiveGrid

Renders an interactive entity view grid inside a specified HTML container element. Unlike standard static grids, interactive grids support double-click record navigation (opening associated forms or drill-down views) and properly execute context events configured in afterGenerateJs.

For the non-interactive version, see ebs.generateGrid.

Syntax

Copy 
function ebs.generateInteractiveGrid(o: IGenerateGridOptions): any
 

Parameters

Parameter Type Description
o IGenerateGridOptions (Object) A configuration object defining the container, entity view data, and display options.
 

Configuration Object Properties (IGenerateGridOptions)

Property Type Description
gridHtmlId string Required. The ID of the HTML container element (e.g., <div>) where the grid will be rendered.
viewData object Required. Configuration defining the data source, view, form navigation, and query parameters.
gridOptions object Optional. Display settings, pagination, and action button visibility controls.
height string Optional. The height of the grid container (e.g., 'auto', '500px').
actionHandlers object | null Optional. Custom action event handlers.
callback function | null Optional. Callback function executed once the grid rendering is complete.
useProvidedFetch boolean Optional. Set to true if bypassing the default fetch logic (defaults to false).

viewData Object Structure

Field Type Description
fetch object Entity definition specifying the target entity name and alias (e.g., { entity: { name: "EntityName", alias: "base" } }).
viewName string Name of the Entity View created in Studio.
formName string Name of the form to open when a record is selected or double-clicked.
parameters Array<{name: string, value: any}> Optional array of query parameters to filter the entity view.

gridOptions Object Structure

Field Type Default Description
pageSize number 10 The number of rows displayed per page.
scrollHorizontal boolean false Enables horizontal scrolling for views with many columns.
noInsert boolean false When true, hides the Insert (+ Add) button on the toolbar.
noDelete boolean false When true, hides the Delete button on the toolbar.
noRefresh boolean false When true, hides the Refresh button on the toolbar.
noExport boolean false When true, hides the Export to Excel button on the toolbar.

Example

This example shows how to configure and display an interactive entity grid within a dedicated HTML container (customerGridContainer).

The code defines dynamic filtering parameters using the current record ID, sets the data source to an entity view (AllActiveAccountsView), and specifies the target form (AccountDetailsForm) to display when a record is selected or double-clicked. It also configures pagination, enables horizontal scrolling, retains default toolbar action buttons, and logs a message to the console once the grid successfully finishes rendering.

Copy 
// 1. Define query parameters (optional)
        let parameters = [
                { name: "parameterMainId", value: ebs.getFormData().id }
                ];

// 2. Define view and navigation settings
        let viewData = {
            fetch: { entity: { name: "ftos_account", alias: "base" } },
            viewName: "AllActiveAccountsView",
            formName: "AccountDetailsForm",
            parameters: parameters
                };

// 3. Define grid display and toolbar button options
        let gridOptions = {
            pageSize: 10,
            scrollHorizontal: true,
            noInsert: false,
            noDelete: false,
            noRefresh: false,
            noExport: false
                };

// 4. Construct the options object (IGenerateGridOptions)
        let interactiveGridOptions = {
            gridHtmlId: "customerGridContainer",
            viewData: viewData,
            gridOptions: gridOptions,
            height: "auto",
            actionHandlers: null,
            callback: function() {
                console.log("Interactive grid rendered successfully.");
                    },
            useProvidedFetch: false
                };

// 5. Generate the interactive grid
        ebs.generateInteractiveGrid(interactiveGridOptions);