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
| Options | Type | Default | Description |
|---|---|---|---|
| source | Array<{}> | [ ] | Binds data to the grid based on format defined in column properties. |
| columns | Array<{}> | [ ] | Creates columns inside the grid. Columns should be defined by at least header name and source name. |
| maxHeight | number | - | Arranges grid max height. |
| width | number | - | Arranges grid width. |
| columnHeaderTop | boolean | true | Places columns header on top of the grid. |
| columnHeaderBottom | boolean | false | Places columns header at the bottom of the grid. |
| autoResizeWidth | boolean | true | When true, this will set columns width to fill available space e.g. cover entire web page. |
| paging | boolean | {} | false | Enables or disables pagination. Default value is set to false. |
| verticalGrid | boolean | true | Enables vertical lines that separate columns inside the grid. |
| horizontalGrid | boolean | true | Enables horizontal lines that separate rows inside the grid. |
| theme | string | 'fabric' | Changes Grid theme. Available themes: fabric, material, dark, light. |
| rowColoring | string | 'even' | Applies colored shading to the grid rows. Available shading options: even, odd, none. |
| loading | boolean | false | Enables or disables loading indicator. Default value is set to false. |
| virtualScroll | boolean | false | Enables or disables Virtual Scrolling, which helps displaying large sets of data. |
| sorting | boolean | false | Sorts column cell values in ascending or descending manner. |
| infoPanel | boolean | GuiInfoPanel | false | Displays info panel: source size, column manager, info dialog. |
Options - events
| Event name | Type | Description |
|---|---|---|
| onPageChange | number | Emits information whenever page has been changed |
| onPageSizeChange | number | Emits information whenever page size has been changed |
| onItemsSelect | any | Emits information whenever item has been selected |
| onColumnsChange | void | Emits information whenever grid columns change |
| onContainerWidthChange | number | Emits information whenever grid changes width |
| onSourceEdit | any | Emits value after and before change. |
| onCellEditEnter | void | Emits information whenever specific cell entered cellEdit mode. |
| onCellEditCancel | void | Emits information whenever cellEdit mode has been canceled. |
| onCellEditSubmit | void | Emits information whenever cell value has been changed. |