Skip to content

CodeCoupler UI Widget "Grid"

The CodeCoupler Grid is basically a modified version of the main SlickGrid which can handle Kendo UI DataSources or its derivative CodeCoupler DataSource Mixins.

Options

The widget will be started with the following options:

dataSource : The DataSource from which the data should be shown.

grid [Optional] : Slightly modified and extended SlickGrid options

columns [Optional] : Overriding or set columns definitions. This options is completely different to the SlickGrid argument columns (read below).

autoColumns [boolean] : If false only columns that are specified in the option columns will be shown and not in the DataSource.

read : The data of the dataSource will normally not be fetched. The grid will show the current loaded data. If set this to true the DataSource method read will be executed after initialization.

on : In previous versions events (this is now deprecated). Just a shortcut to add event functions. Each defined property will be used as event name which value should be a function that will be subscribed to the matching event.

Overview of Column Options

Here are the most important fields used by ccGrid:

  • editor: SlickEditor JavaScript Object which will be created providing an interface like a Slick-Editor. Default if not set depends on field type:

  • string: cc.Editors.Text

  • number: cc.Editors.Integer
  • boolean: cc.Editors.Checkbox
  • date: cc.Editors.Date

  • object: cc.Editors.Text

  • formatter: function(row, cell, value, columnDef, dataContext) Basically it is the same as "parse", but "parse" will get only the value of one field. "formatter" will get much more informations where you can parse on.

  • title: string Title presented in a column header for example. If not set the name of the field will be used.

  • columnGroups: string String to combine columns in one group. A second header row will be shown.

  • width: integer Width of column in pixel.

Getter

dataSource : Returns the configured DataSource.

grid : Returns the SlickGrid instance.

Modified Behaviour of Columns

The columns of the grid will be extracted from the given DataSource instance. The property dataSource.options.schema.model.fields will be checked and all there defined fields will be mapped to grid columns and merged with the columns from the option columns.

If no fields are defined in the DataSource and you did not set the columns option, the columns will be defined from the first data row of the DataSource. This automatic mapping will be done even if the data of the DataSource will be fetched later.

You can switch this behaviour to set the option columns as primary source of column definitions. For this you have to set the grid option autoColumns to false. In this case only columns from the option columns will be shown and merged with specifics from the DataSource columns.

The option columns is different to the origin columns argument because it is not array of columns, but an object with column definitions. The properties of the object have to match to the field names. The value is an object holding the column properties. You can set the value to "false" to hide the column:

1
2
3
4
5
 {
     fieldName1: { ...column definition... },
     fieldName2: { ...column definition... },
     fieldName3: false,
 }

Modified Behaviour of Column Options

The following column options will always be set in a special way, if not otherwise defined:

id and field : Can never be set. These properties will always be set automatically to the field name.

name : Will be set to the field name.

editor : If the grid is not editable or the field is the primary id field of the grid, then this will be set always to "null". Otherwise and if not defined further, an automatic mapping will be done depending on "type" of the field definition:

1
2
3
4
5
6
7
8
- **string**: GridEditors.Text
- **number**: GridEditors.Numeric
- **boolean**: GridEditors.Checkbox
- **date**: GridEditors.Date
- **object**: GridEditors.Text
- **Unknown type**: GridEditors.Text

  If "type" is not set "GridEditors.Text" will be used.

formatter : If "type" is "number" or "date" the formatter will be set to a function that return formated values with kendo.toString(). This method takes care of the culture which can be set with kendo.culture("...") globally for the whole application.

New Column Options

filterEditor : This accepts like the option editor a grid editor that will be used in the filter widget of the column. If not specified, This will be set automatically like editor (see below) but independent of wether the grid or the column is editable.

filterOperators : Is an array of string which tells the filter widget what operators can be used in this column. The following strings are allowed:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
- **null**: Will show the operators "isnull", "isnotnull".
- **equal**: Will show the operators "eq", "neq".
- **order**: Will show the operators "lt", "lte", "gt", "gte".
- **string**: Will show the operators "startswith", "endswith", "contains", "isempty" and all the
  counterparts of them.

If not defined, an automatic mapping will be done depending on `type` of the field definition:

- **string**: ["equal","string"]
- **number**: ["equal","order"]
- **boolean**: ["equal"]
- **date**: ["equal","order"]
- **object**: ["equal","order","string"]
- **Unknown type**: ["equal","order","string"]

Additionally "null" will be added if "nullable" was set to "true".

Modified Behaviour of Grid Options

editable : If the properties id and idField of dataSource.options.schema.model are not set, the value of "editable" will always be set to "false". Otherwise the default value of editable will be true.

createPreHeaderPanel and showPreHeaderPanel : These properties will be set automatically to true if one of the columns use the column option columnGroup.

enableCellNavigation : Changed default to true.

enableColumnReorder : Changed default to false.

syncColumnCellResize : Changed default to true.

autosizeColsMode : Changed default to Slick.GridAutosizeColsMode.FitColsToViewport.

enableTextSelectionOnCells : Changed default to true.

Undocumented Grid Options

Some Grid Options are not documented. So as not to look far:

showColumnHeader : Hide Column Headers.

New Grid Options

headerCss, headerColumnCss, preheaderCss and preheaderColumnCss [object] : Inject styles to elements in header and preheader.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
  Example for higher header with centered and wraped text. If you set height of headers you should
  turn off the background image of the default theme with "background=none":

  ```js
  headerColumnCss: {
      "height": "32px",
      "white-space": "normal",
      "text-align": "center",
      "background": "none"
  }
  ```

  Example for higher preheader with centered and wraped text. Setting the
  height in preheader requires set the height to auto in the parent class
  with "preheaderCss":

  ```js
  preheaderCss: {
      "height": "auto",
  },
  preheaderColumnCss: {
      "height": "32px",
      "white-space": "normal",
      "text-align": "center"
  }
  ```

collapsable [object] : If defined the grid will hide child rows and add an expand handle in front of the value of the first column. Clicking on the expand handle will expand or collapse the child rows. The value of the first column of child rows will be shown indented.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
  One of the fields must contain a refernce to parent rows. This field have to
  be defined in "parentIdField".

  ```js
  collapsable: {
      parentIdField: "parentId"
  }
  ```

  Internally another field will be added to the dataItems which will not
  affect the status of the dataSource or will be shown anywhere. The name
  of this field is by default "collapsed". If this name should collide
  with a field name of the dataSource, you can rename this field to
  whatever you want with "collapsedField":

  ```js
  collapsable: {
      parentIdField: "parentId",
      collapsedField: "collapsed"
  }
  ```

metaData [function(row)] : This is a function that takes each single row as argument. The returning object can contain the following properties:

cssClasses [string] : Css classes of the row.

focusable [boolean] : True if the row should be focusable.

selectable [boolean] : True if the row should be selectable.

selectionModel [function] : If set the method setSelectionModel() will be called with a new instance of this constructor function created with "new function()".

Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import { Grid } from "@codecoupler/cc-ui";
import Slick from "slickgrid";
this.widget({
  widget: Grid,
  options: {
    grid: {
      selectionModel: Slick.RowSelectionModel,
    },
  },
  on: {
    onSelectedRowsChanged: function (rows, previousSelectedRows) {
      console.info(arguments);
    },
  },
});

New CSS Classes

editable and not-editable : The widget container will have one of these classes, depending on if the grid is editable or not.

Visual Definition in DataSource

In a DataSource you can add in a field definition the property visual. The property can be set to false. In this case the field should be invisible. Otherwise it should be an object which should contain definitions used by other widgets.