ebs.generateGrid

Displays a custom view inside a specific HTML element in the Document Object Model. For the interactive version of the grid, which allows you to edit the view records by double clicking them, see ebs.generateInteractiveGrid.

Syntax

Copy
function ebs.generateGrid(gridHtmlId: string, viewData: IViewData, height?: string | number, actionHandlers?: EbsActionHandler[], callback?: Function, gridOptions?: IEbsGridOptions, overrideViewColumnList?: any[], pageContext?: any, useProvidedFetch?: boolean;): void;
 
Parameter Type Description
gridHtmlId string ID of the HTML element where the view will be injected.
viewData IViewData Data view used as a data source for the grid.
IMPORTANT!  
If the data view is based on a custom fetch, the fetch expression must include the primary key of the main entity in the result set.
height (optional) string | number HTML markup value for the height of the HTML element where the view will be injected (see the gridHtmlId parameter).
This allows you, for instance, to set a fixed height or a dynamic height based on a function for your view. By default, the height will be set to 100%.
actionHandlers (optional) EbsActionHandler[]

Custom action handlers you wish to display in the top right corner of the grid.

callback (optional) Function Callback function to run when the view is displayed.
gridOptions (optional) IEbsGridOptions Display customizations for the grid.
overrideViewColumnList (optional) any[] Replace the view columns returned by the view data with a custom set of view columns.

Interfaces

IViewData

Specifications of a data view. Depending on the provided parameters, this may reference an existing view (e.g., viewName) or act as a literal definition of a view to be instantiated directly (e.g., by using a custom fetch expression).

Copy
interface IViewData {
    mainHtmlId?: string;
    fetch?: IFetch;
    viewName?: string;
    formName?: string;
    hasCustomFetch?: boolean;
    columns?: any[];
    optionSetsAsRadio?: any;
    editFormName?: string;
    showViewButton?: boolean;
    selectedView?: IEbsMetadataView;
    editForm?: IEbsMetadataForm;
    baseEntityMetadata?: IEbsMetadataEntity;
    isSimpleGrid?: boolean;
    transientCollectionRequest?: ITransientEntityDataAsCollectionRequest;
    parameters?: any;
}
 
Property Type Description
mainHtmlId
(optional)
string ID of the HTML element where the view will be injected. Used when opening a data view from a menu item.
fetch
(optional)
IFetch Fetch object expression used to retrieve the desired data.
viewName
(optional)
string Name of a preconfigured data view used to retrieve the desired data.
formName
(optional)
string Name of the data form used to open view records.
hasCustomFetch
(optional)
boolean Indicates if the view uses a custom fetch object expression to return results.
columns
(optional)
any[] Entity view columns to be displayed by the data view.
optionSetsAsRadio
(optional)
any Represent option set attributes as radio buttons.
editFormName
(optional)
string Name of the data form used to open view records for editing.
showViewButton
(optional)
bolean Display a dedicated View button for each view record.
selectedView
(optional)
IEbsMetadataView Allows you to manually configure the data form used as data source.
editForm
(optional)
IEbsMetadataForm Allows you to manually configure the data form used to open view records for editing.
baseEntityMetadata
(optional)
IEbsMetadataEntity Allows you to manually configure the base entity of the data view.
isSimpleGrid
(optional)
boolean Indicates the data view is a simple grid report.
transientCollectionRequest
(optional)
ITransientEntityDataAsCollectionRequest Allows you to use a transient data entity with a collection output that is part of the base entity's extended model as data source.
parameters
(optional)
any Parameter bag that can supply additional values that may override options defined in higher-level function arguments, enabling reuse across different entry points.

EbsActionHandler

Object representing a custom action handler to be displayed in the top right corner of a grid.

Copy
class EbsActionHandler {
    iconClass: string;
    text: string;
    localizedText: string;
    handler: Function;
    items: EbsActionHandler[];
    id: string;
    showLoading?: boolean;
    autoClose?: boolean;
    constructor(options: IEbsActionHandlerOptions);
}
 
Property Type Description
iconClass string CSS class of the action handler's icon.
text string Text displayed on the action handler icon or the name of a localization resource.
localizedText string Action handler text label localized in the platform's current language.
handler Function Function that executes the action handler's action.
items EbsActionHandler[] Children action handlers that the user can select from the current action handler.
id string Unique identifier of the action handler.
showLoading
(optional)
boolean Deprecated.
autoClose
(optional)
boolean Deprecated.

Use the IEbsActionHandlerOptions interface as a constructor signature for EbsActionHander objects. E.g.:

Copy
const dummySaveHandler = new EbsActionHandler({
  iconClass: "icon-save",
  text: "Save",
  handler: () => {
    console.log("Document saved!");
  }
});

IEbsActionHandlerOptions

Constructor signature for the EbsActionHandler class.

Copy
interface IEbsActionHandlerOptions {
    iconClass: string;
    text: any;
    handler: Function;
    items?: EbsActionHandler[];
}
 
Property Type Description
iconClass string CSS class of the action handler's icon.
text string Text displayed on the action handler icon or the name of a localization resource.
handler Function Function that executes the action handler's action.
items EbsActionHandler[] Children actions handlers that the user can select from the current action handler.

IEbsGridOptions

Grid customizations.

Copy
interface IEbsGridOptions {
    showInsertButton?: boolean;
    selectionMode?: "single" | "multiple";
    allowEdit?: boolean;
    showColumnHeaders?: boolean;
    showFilterRow?: boolean;
    editMode?: "cell" | "row" | "batch" | "form" | "popup";
    scrollHorizontal?: boolean;
    pageSize?: number;
    renderToolbar?: Function;
    refreshMode?: "full" | "reshape" | "repaint";
    noDelete?: boolean;
    noInsert?: boolean;
    noRefresh?: boolean;
    noExport?: boolean;
}
 
Property Type Description
showInsertButton
(optional)
boolean Displays a button to insert new records to the grid.
selectionMode
(optional)
string
  • single - Allows users to select a single line in the gird.
  • multiple - Allows users to select multiple lines in the grid at the same time.
allowEdit
(optional)
boolean Allows users to edit the records displayed in the grid.
showColumnHeaders
(optional)
boolean Displays column headers at the top of the grid.
showFilterRow
(optional)
boolean Displays filtering fields at the top of the grid.
editMode
(optional)
string If the grid allows users to edit the displayed records, determines how the records will be edited:
  • form - opens a form to edit record data
  • batch - edit several records, then save the edits in batch
  • cell - edit view records cell by cell
  • row - edit cells in a row, then save the entire row
  • popup - opens a popup window to edit record data
scrollHorizontal
(optional)
boolean Allows to grid to scroll horizontally. Useful for grids with many columns.
pageSize
(optional)
number Maximum number of records displayed on a grid page.
renderToolbar
(optional)
Function Callback function used to personalize the toolbar’s rendering. This callback is invoked during toolbar initialization, allowing you to override or extend the default toolbar content.
refreshMode
(optional)
string
  • full - Completely removes and rebuilds the grid from scratch. All DOM elements (rows, cells, headers) are destroyed and re-rendered. Useful if the data schema/structure changed significantly. Slowest performance, but guarantees that the grid reflects the exact current state.
  • reshape - The grid structure (rows/columns) is recalculated, but not entirely rebuilt. Useful when the rows or columns change (e.g., adding/removing rows, resizing columns). Reuses existing DOM nodes where possible, but updates their shape/layout. Faster than full, but slower than repaint.
  • repaint - Only the visual representation of existing elements is updated (e.g., refreshing cell contents, reapplying styles, or updating displayed values). Data values inside the same row/column structure are updated, but no structural changes are made. Fastest option, since it avoids touching layout or DOM structure.
noInsert
(optional)
boolean Prevents the inserting of new grid records.
noRefresh
(optional)
boolean Prevents grid refreshing.
noExport
(optional)
boolean Prevents exporting of grid data.

Examples