Column API in JavaScript (ES5) Grid API control

Represents Grid Column model class.

Properties

allowEditing

boolean

If allowEditing set to false, then it disables editing of a particular column. By default all columns are editable.

Defaults to true

allowFiltering

boolean

If allowFiltering set to false, then it disables filtering option and filter bar element of a particular column. By default all columns are filterable.

Defaults to true

allowGrouping

boolean

If allowGrouping set to false, then it disables grouping of a particular column. By default all columns are groupable.

Defaults to true

allowReordering

boolean

If allowReordering set to false, then it disables reorder of a particular column. By default all columns can be reorder.

Defaults to true

allowResizing

boolean

If allowResizing is set to false, it disables resize option of a particular column. By default all the columns can be resized.

Defaults to true

allowSearching

boolean

If allowSearching set to false, then it disables Searching of a particular column. By default all columns allow Searching.

Defaults to true

allowSorting

boolean

If allowSorting set to false, then it disables sorting option of a particular column. By default all columns are sortable.

Defaults to true

autoFit

boolean

If autoFit set to true, then the particular column content width will be adjusted based on its content in the initial rendering itself. Setting this property as true is equivalent to calling autoFitColumns method in the dataBound event.

Defaults to false

clipMode

ClipMode

Defines the cell content’s overflow mode. The available modes are

• Clip - Truncates the cell content when it overflows its area.
• Ellipsis - Displays ellipsis when the cell content overflows its area.
• EllipsisWithTooltip - Displays ellipsis when the cell content overflows its area also it will display tooltip while hover on ellipsis applied cell.

Defaults to Ellipsis

columns

Column[] | string[] | ColumnModel[]

Used to render multiple header rows(stacked headers) on the Grid header.

Defaults to null

commands

CommandModel[]

commands provides an option to display command buttons in every cell. The available built-in command buttons are

• Edit - Edit the record.
• Delete - Delete the record.
• Save - Save the record.
• Cancel - Cancel the edit state.

Defaults to null

customAttributes

{ : }

The CSS styles and attributes of the content cells of a particular column can be customized.

Defaults to null

dataSource

Object[] | DataManager | DataResult

Defines the column data source which will act as foreign data source.

Defaults to null

defaultValue

string | number | Date | boolean | null

Defines default values for the component when adding a new record to the Grid.

Defaults to null

disableHtmlEncode

boolean

If disableHtmlEncode is set to true, it encodes the HTML of the header and content cells.

Defaults to true

displayAsCheckBox

boolean

If displayAsCheckBox is set to true, it displays the column value as a check box instead of Boolean value.

Defaults to false

edit

IEditCell

Defines the IEditCell object to customize default edit cell.

Defaults to {}

editTemplate

string | Function

Defines the cell edit template that used as editor for a particular column. It accepts either template string or HTML element ID.

Defaults to null

editType

EditType | string

Defines the type of component for editable.

Defaults to ‘stringedit’

enableGroupByFormat

boolean

If enableGroupByFormat set to true, then it groups the particular column by formatted values.

Defaults to true

field

string

Defines the field name of column which is mapped with mapping name of DataSource. The bounded columns can be sort, filter and group etc., The field name must be a valid JavaScript identifier, the first character must be an alphabet and should not contain spaces and special characters.

Defaults to ”

filter

IFilter

It is used to customize the default filter options for a specific columns.

• type - Specifies the filter type as menu or checkbox.
• ui - to render custom component for specific column it has following functions.
• ui.create – It is used for creating custom components.
• ui.read - It is used for read the value from the component.
• ui.write - It is used to apply component model as dynamically.

Check the Filter UI for its customization.

Defaults to {}

filterBarTemplate

IFilterUI

The filterBarTemplate is used to add a custom component instead of default input component for filter bar. It have create and read functions.

• create: It is used for creating custom components.
• read: It is used to perform custom filter action.

Defaults to null

filterTemplate

string | Function

Defines the filter template/UI that used as filter for a particular column. It accepts either template string or HTML element ID.

Defaults to null

foreignKeyField

string

Defines the mapping column name of the foreign data source. If it is not defined then the columns.field will be considered as mapping column name

Defaults to null

foreignKeyValue

string

Defines the display column name from the foreign data source which will be obtained from comparing local and foreign data.

Defaults to null

format

string | NumberFormatOptions | DateFormatOptions

It is used to change display value with the given format and does not affect the original data. Gets the format from the user which can be standard or custom number and date formats.

Defaults to null

formatter

Object | ICellFormatter | Function

Defines the method which is used to achieve custom formatting from an external function. This function triggers before rendering of each cell.

Defaults to null

freeze

freezeDirection

defines which side the column need to freeze The available built-in freeze directions are

• Left - Freeze the column at left side.
• Right - Freeze the column at right side.
• Fixed - Freeze the column at Center.
• None - Does not freeze the column.

Defaults to None

headerTemplate

string | Function

Defines the header template as string or HTML element ID which is used to add customized element in the column header.

Defaults to null

headerText

string

Defines the header text of column which is used to display in column header. If headerText is not defined, then field name value will be assigned to header text.

Defaults to null

headerTextAlign

TextAlign

Define the alignment of column header which is used to align the text of column header.

Defaults to null

headerValueAccessor

HeaderValueAccessor | string

Defines the method used to apply custom header cell values from external function and display this on each header cell rendered.

Defaults to null

hideAtMedia

string

Column visibility can change based on Media Queries. hideAtMedia accepts only valid Media Queries.

Defaults to ”

index

number

Gets the unique identifier value of the column. It is used to get the column object.

Defaults to null

isFrozen

boolean

You can use this property to freeze selected columns in grid

Defaults to false

isIdentity

boolean

If isIdentity is set to true, then this column is considered as identity column.

Defaults to false

isPrimaryKey

boolean

If isPrimaryKey is set to true, considers this column as the primary key constraint.

Defaults to false

lockColumn

boolean

Defines the mapping column name of the foreign data source. If it is not defined then the columns.field will be considered as mapping column name

Defaults to false

maxWidth

string | number

Defines the maximum width of the column in pixel or percentage, which will restrict resizing beyond this pixel or percentage.

Defaults to ”

minWidth

string | number

Defines the minimum Width of the column in pixels or percentage.

Defaults to ”

showColumnMenu

boolean

If showColumnMenu set to false, then it disable the column menu of a particular column. By default column menu will show for all columns

Defaults to true

showInColumnChooser

boolean

If showInColumnChooser set to false, then hide the particular column in column chooser. By default all columns are displayed in column Chooser.

Defaults to true

sortComparer

SortComparer | string

Defines the custom sort comparer function. The sort comparer function has the same functionality like Array.sort sort comparer.

template

string | Function

Defines the column template that renders customized element in each cell of the column. It accepts either template string or HTML element ID.

Defaults to null

textAlign

TextAlign

Defines the alignment of the column in both header and content cells.

Defaults to Left

type

string

Defines the data type of the column.

Defaults to null

uid

string

Gets the unique identifier value of the column. It is used to get the column object.

Defaults to ”

validationRules

Object

Defines rules to validate data before creating and updating.

Defaults to null

valueAccessor

ValueAccessor | string

Defines the method used to apply custom cell values from external function and display this on each cell rendered.

Defaults to null

visible

boolean

If visible is set to false, hides the particular column. By default, columns are displayed.

Defaults to true

width

string | number

Defines the width of the column in pixels or percentage.

Defaults to ”