grid Configuration

autoGenerateColumns Base

Auto generate column for each field in the datasource when set to true.

autoLoad Base

When this setting is enabled the content of the grid will be loaded automatically after the creation of the grid.

column.align Base

This setting control the alignment of the text in the cell.

column.cssClass Base

The name(s) of css class(es) that are going to be applied to all cells inside that column, except the header cell.

column.decimalDigits Base

Number of decimal digits after the decimal point.

column.editor Inline Editing

Provides a way to specify a custom editing UI for the column.

Configuration object with event names as keys and functions as values that are going to be bind to each cell from the column. Each function is going to receive event information as a parameter with info in the "data" field for id, field name and record data.

column.field Base

The field name to which the column is bound. If the column.title is not defined this value is used as column.title.

column.format Base

Format the date when the type of the column is date. This configuration setting is going to work only if you have implementation of format method for the Date object. You can use external libraries like http://blog.stevenlevithan.com/archives/date-time-format for that.

column.headerCssClass Base

The name(s) of css class(es) that are going to be applied to the header cell of that column.

column.hidden Base

If set to true the column will not be displayed in the grid. By default all columns are displayed.

column.icon Base

Css class for icon that is going to be in use for the cell. This setting can be in use only with combination of type icon.

column.minWidth Responsive Design

The minimum width of the column. The column is getting invisible when there is not enough space in the grid for this minimum width. This setting is working only when the responsive setting is set to true and the column priority setting is set.

column.priority Responsive Design

The priority of the column compared to other columns in the grid. The columns are hiding based on the priorities. This setting is working only when the responsive setting is set to true.

column.renderer Base

A renderer is an 'interceptor' function which can be used to transform data (value, appearance, etc.) before it is rendered.

column.sortable Base

Indicates if the column is sortable. If set to true the user can click the column header and sort the grid by the column source field.

column.stopPropagation Base

If set to true stop event propagation when event occur.

column.title Base

The caption that is going to be displayed in the header of the grid.

column.tmpl Base

Template for the content in the column. Use curly brackets "{}" to wrap the names of data source columns from server response.

column.tooltip Base

The text for the cell tooltip.

column.type Base

Indicates the type of the column.

column.width Base

The width of the column. Numeric values are treated as pixels. If the width is undefined the width of the column is not set and depends on the with of the table(grid).

columns Base

An array that holds the configurations of each column from the grid.

dataSource Base

The data source of the widget which is used table rows.

defaultColumnSettings Base

An object that holds the default configuration settings of each column from the grid.

defaultParams.direction Base

The name of the parameter that is going to send the direction for sorting. The "sortable" setting for at least one column should be enabled in order this parameter to be in use.

defaultParams.limit Base

The name of the parameter that is going to send the maximum number of records per page. The pager should be enabled in order this parameter to be in use.

defaultParams.page Base

The name of the parameter that is going to send the number of the page. The pager should be enabled in order this parameter to be in use.

defaultParams.sortBy Base

The name of the parameter that is going to send the name of the column for sorting. The "sortable" setting for at least one column should be enabled in order this parameter to be in use.

detailTemplate Expand Collapse Rows

Template for the content in the detail section of the row. Automatically add expand collapse column as a first column in the grid during initialization.

fontSize Base

The size of the font in the grid.

mapping.dataField Base

The name of the object in the server response, that contains array with records, that needs to be display in the grid.

mapping.totalRecordsField Base

The name of the object in the server response, that contains the number of all records on the server.

minWidth Base

Minimum width of the grid.

notFoundText Base

The text that is going to be displayed if the grid is empty.

pager.leftControls Pagination

Array that contains a list with jquery objects that are going to be used on the left side of the pager.

pager.limit Pagination

The maximum number of records that can be show by page.

pager.rightControls Pagination

Array that contains a list with jquery objects that are going to be used on the right side of the pager.

pager.sizes Pagination

Array that contains the possible page sizes of the grid. When this setting is set, then a drop down with the options for each page size is visualized in the pager.

primaryKey Base

Name of column that contains the record id.

resizableColumns Resizable Columns

If set to true, users can resize columns by dragging the edges (resize handles) of their header cells.

resizeCheckInterval Responsive Design

The interval in milliseconds for checking if the grid is resizing. This setting is in use only if the resizeMonitoring setting is set to true.

responsive Responsive Design

This setting enables responsive behaviour of the grid where some column are invisible when there is not enough space on the screen for them. The visibility of the columns in this mode is driven by the column minWidth and priority settings. The columns without priority setting are always visible and can't hide in small screen resolutions.