Grid Options - jQuery

A list of configuration options for the Generic UI grid can be found in this section.

You need a given data source and defined columns to build the grid. The source and columns must cooperate and the columns must thus be linked to the source of the data. In guiGrid jQuery all of this must be defined. The basic article provides simple guidance on how it should be achieved.

Generic UI is fully editable. You can specify:

  • width and max height of the grid,
  • 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.

Options - options

sourceArray<{}>[ ]Binds data to the grid based on format defined in column properties.
columnsArray<{}>[ ]Creates columns inside the grid. Columns should be defined by at least header name and source name.
maxHeightnumber-Arranges grid max height.
widthnumber-Arranges grid width.
columnHeaderTopbooleantruePlaces columns header on top of the grid.
columnHeaderBottombooleanfalsePlaces columns header at the bottom of the grid.
autoResizeWidthbooleantrueWhen true, this will set columns width to fill available space e.g. cover entire web page.
pagingboolean | {}falseEnables or disables pagination. Default value is set to false.
verticalGridbooleantrueEnables vertical lines that separate columns inside the grid.
horizontalGridbooleantrueEnables horizontal lines that separate rows inside the grid.
themestring'fabric'Changes Grid theme. Available themes: fabric, material, dark, light.
rowColoringstring'even'Applies colored shading to the grid rows. Available shading options: even, odd, none.
loadingbooleanfalseEnables or disables loading indicator. Default value is set to false.
virtualScrollbooleanfalseEnables or disables Virtual Scrolling, which helps displaying large sets of data.
sortingbooleanfalseSorts column cell values in ascending or descending manner.
infoPanelboolean | GuiInfoPanelfalseDisplays info panel: source size, column manager, info dialog.

Options - events

Event nameTypeDescription
onPageChangenumberEmits information whenever page has been changed
onPageSizeChangenumberEmits information whenever page size has been changed
onItemsSelectanyEmits information whenever item has been selected
onColumnsChangevoidEmits information whenever grid columns change
onContainerWidthChangenumberEmits information whenever grid changes width
onSourceEditanyEmits value after and before change.
onCellEditEntervoidEmits information whenever specific cell entered cellEdit mode.
onCellEditCancelvoidEmits information whenever cellEdit mode has been canceled.
onCellEditSubmitvoidEmits information whenever cell value has been changed.

Related articles: