Generic UI Angular Grid Options

In this section you will find a list of Inputs and Outputs that are used in the grid configuration.

In order to build the grid you need to have a specified data source and defined columns. The source and the columns need to work together, therefore the columns have to be bound with the data source. The basic section contains an easy guide on how to do this.

Generic UI is completely editable. You can specify:

  • width and max height,
  • different themes, such as: Fabric, Material, Light, Dark,
  • header placed at the top and/or bottom of the grid,
  • disabled or enabled vertical and horizontal lines,
  • row color,
  • loading indicator.

Generic UI also provides output options that post information whenever:

  • a page changes,
  • a page size changes,
  • a grid row is selected.

Inputs

InputTypeDefaultDescription
sourceArray<any>[ ]Binds data to the grid based on format defined in column source.
columnsArray<GuiColumn>[ ]Creates columns inside the grid. Columns should be defined by at least header name and source name.
maxHeightnumber-Sets grid max height.
widthnumber-Sets grid width.
columnHeaderTopbooleantruePlaces columns header on top of the grid.
columnHeaderBottombooleanfalsePlaces columns header in the bottom of the grid.
autoResizeWidthbooleantrueWhen true, this will set columns width to fill available space e.g. cover entire web page.
pagingboolean | GuiPagingfalseEnables or disables pagination. Default value is set to false.
verticalGridbooleantrueEnables vertical lines that separate columns within the grid.
horizontalGridbooleantrueEnables horizontal lines that separate rows within the grid.
themestring | GuiThemeGuiTheme.FABRICChanges Grid theme. Available themes: Fabric, Material, Dark, Light.
rowColoringstring | GuiRowColoringGuiRowColoring.EVENApplies colored shading to the grid rows. Available shading options: Even, Odd, None.
loadingbooleanfalseEnables or disables loading indicator. Default value is set to false.
virtualScrollbooleanfalseEnables to display big sets of data.
sortingboolean | GuiSortingfalseSorts column cell values in ascending or descending manner.
infoPanelboolean | GuiInfoPanelfalseDisplays info panel: source size, column manager, info dialog.
filteringboolean | GuiFilteringfalseFilters columns values based on applied specification.
quickFiltersboolean | GuiQuickFiltersfalseFilters columns based on a text provided in quickFilter column header.
searchingboolean | GuiSearchingfalseA search tool that allows finding specific words in the grid.
editModebooleanfalseEnables edit mode
cellEditingbooleanfalseEnables modifying data directly from the grid.
summariesGuiSummariessummaries: any = { enabled: true }Displays total cell values, also minimal, maximum value, median and average.

Outputs

OutputTypeDescription
pageChangedEventEmitter<number>Emits information whenever page has been changed
pageSizeChangedEventEmitter<number>Emits information whenever page size has been changed
itemsSelectedEventEmitter<any>Emits information whenever item has been selected
columnsChangedEventEmitter<void>Emits information whenever grid columns change
containerWidthChangedEventEmitter<number>Emits information whenever grid changes width
sourceEditedEventEmitter<{after: any, before: any}>Emits value after and before change.
cellEditEnteredEventEmitter<void>Emits information whenever specific cell entered cellEdit mode.
cellEditCanceledEventEmitter<void>Emits information whenever cellEdit mode has been canceled.
cellEditSubmittedEventEmitter<void>Emits information whenever cell value has been changed.
themeChanged EventEmitter<GuiTheme> Emits theme when it changes.
rowColoringChanged EventEmitter<GuiRowColoring> Emits rowColoring when it changes.
verticalGridChanged EventEmitter<boolean> Emits vertical grid when it changes.
horizontalGridChanged EventEmitter<boolean> Emits horizontal grid when it changes.

Related articles: