Class

new Grid(options, el)

Grid public API

PARAMETERS

Name

Type

Description

options

Object

PROPERTIES

Name

Type

Description

data

[ ArrayObject ]

Grid data for making rows. When using the data source, sets to object.

pageOptions

Object = {}

The object for the pagination options.

header

[ Object ]

Options object for header.

PROPERTIES

Name

Type

Description

height

number = 40

The height of the header area.

align

number = center

Horizontal alignment of the header content.
Available values are 'left', 'center', 'right'.

valign

number = middle

Vertical alignment of the row header content.
Available values are 'top', 'middle', 'bottom'.

complexColumns

[ Array ]

This options creates new parent headers of the multiple columns
which includes the headers of specified columns, and sets up the hierarchy.

PROPERTIES

Name	Type	Description
header	[ string ]	The header of the complex column to be shown on the header.
name	[ string ]	The name of column that makes tree column.
childNames	[ Array ]	The name of the child header(subheader).
renderer	[ function ]	Sets the custom renderer to customize the header content.
headerAlign	string = center	Horizontal alignment of the header content. Available values are 'left', 'center', 'right'.
headerVAlign	string = middle	Vertical alignment of the row header content. Available values are 'top', 'middle', 'bottom'.
hideChildHeaders	boolean = false	If set to true, the child columns header are hidden.
resizable	boolean = false	If set to true, resize-handles of each complex columns will be shown.

width

stringnumber = 'auto'

Options for grid width.

rowHeight

stringnumber = 40

The height of each rows.
The height of each rows expands to dom's height. If set to number, the height is fixed and the minimum is 9.

minRowHeight

number = 40

The minimum height of each rows.

bodyHeight

[ stringnumber ]

The height of body area. The default value is 'auto',
the height of body area expands to total height of rows. If set to 'fitToParent', the height of the grid
will expand to fit the height of parent element. If set to number, the height is fixed.

minBodyHeight

number = 130

The minimum height of body area. When this value
is larger than the body's height, it set to the body's height.

columnOptions

[ Object ]

Option object for all columns

PROPERTIES

Name	Type	Description
minWidth	number = 50	Minimum width of each columns
resizable	boolean = false	If set to true, resize-handles of each columns will be shown.
frozenCount	number = 0	The number of frozen columns. The columns indexed from 0 to this value will always be shown on the left side. Grid#setFrozenColumnCount can be used for setting this value dynamically.
frozenBorderWidth	number = 1	The value of frozen border width. When the frozen columns are created by "frozenCount" option, the frozen border width set.

treeColumnOptions

[ Object ]

Option object for the tree column.

PROPERTIES

Name	Type	Description
name	[ string ]	The name of column that makes tree column.
useIcon	boolean = true	If set to true, the folder or file icon is created on the left side of the tree cell data.
useCascadingCheckbox	[ boolean ]	If set to true, a cascading relationship is created in the checkbox between parent and child rows.
indentWidth	boolean = 22	Base indent width to set for child nodes

copyOptions

[ Object ]

Option object for clipboard copying

PROPERTIES

Name	Type	Description
useFormattedValue	[ boolean ]	Whether to use formatted values or original values as a string to be copied to the clipboard
useListItemText	[ boolean ]	Copy select or checkbox cell values to 'text' rather than 'value' of the listItem option.
customValue	[ stringfunction ]	Copy text with 'formatter' in cell.

useClientSort

boolean = true

If set to true, sorting will be executed by client itself
without server.

editingEvent

string = 'dblclick'

If set to 'click', editable cell in the view-mode will be
changed to edit-mode by a single click.

scrollX

boolean = true

Specifies whether to show horizontal scrollbar.

scrollY

boolean = true

Specifies whether to show vertical scrollbar.

showDummyRows

boolean = false

If set to true, empty area will be filled with dummy rows.

keyColumnName

[ string ]

The name of the column to be used to identify each rows.
If not specified, unique value for each rows will be created internally.

heightResizable

boolean = false

If set to true, a handle for resizing height will be shown.

selectionUnit

string = 'cell'

The unit of selection on Grid. ('cell', 'row')

rowHeaders

[ Array ]

Options for making the row header. The row header content is number of
each row or input element. The value of each item is enable to set string type. (ex: 'rowNum', 'checkbox')

PROPERTIES

Name	Type	Description
type	[ string ]	The type of the row header. ('rowNum', 'checkbox')
header	[ string ]	The header of the row header.
width	[ number ]	The width of the row header column. The unit is pixel. If this value isn't set, the column's width sets to default value.
align	string = left	Horizontal alignment of the row header content. Available values are 'left', 'center', 'right'.
valign	string = middle	Vertical alignment of the row header content. Available values are 'top', 'middle', 'bottom'.
renderer	[ function ]	Sets the custom renderer to customize the header content.

columns

Array

The configuration of the grid columns.

PROPERTIES

Name

Type

Description

name

string

The name of the column.

ellipsis

boolean = false

If set to true, ellipsis will be used
for overflowing content.(This option will be deprecated)

align

string = left

Horizontal alignment of the column content.
Available values are 'left', 'center', 'right'.

valign

string = middle

Vertical alignment of the column content.
Available values are 'top', 'middle', 'bottom'.

className

[ string ]

The name of the class to be used for all cells of
the column.

header

[ string ]

The header of the column to be shown on the header.

width

[ number ]

The width of the column. The unit is pixel. If this value
isn't set, the column's width is automatically resized.

minWidth

number = 50

The minimum width of the column. The unit is pixel.

hidden

[ boolean ]

If set to true, the column will not be shown.

resizable

[ boolean ]

If set to false, the width of the column
will not be changed.

validation

[ Object ]

The options to be used for validation.
Validation is executed whenever data is changed or the Grid#validate is called.

PROPERTIES

Name	Type	Description
required	boolean = false	If set to true, the data of the column will be checked to be not empty.
dataType	numberstring = 'string'	Specifies the type of the cell value. Available types are 'string' and 'number'.
min	[ number ]	If set to numeric value, the data of the column will be checked to be greater than 'min' value. Available types are 'string' and 'number'.
max	[ number ]	If set to numeric value, the data of the column will be checked to be less than 'max' value.
regExp	[ RegExp ]	If set to regular expression, the data of the column will be checked using the regular expression.
validatorFn	[ function ]	If set to function, the data of the column will be checked using the result of the custom validator.
unique	[ boolean ]	If set to true, check the uniqueness on the data of the column.

defaultValue

[ string ]

The default value to be shown when the column
doesn't have a value.

formatter

[ functionstring ]

The function that formats the value of the cell.
The return value of the function will be shown as the value of the cell. If set to 'listItemText',
the value will be shown the text.

escapeHTML

boolean = false

If set to true, the value of the cell
will be encoded as HTML entities.

ignored

boolean = false

If set to true, the value of the column will be
ignored when setting up the list of modified rows.

sortable

boolean = false

If set to true, sort button will be shown on
the right side of the column header, which executes the sort action when clicked.

sortingType

string = 'asc'

If set to 'desc', will execute descending sort initially
when sort button is clicked.

comparator

[ function ]

The custom comparator that sorts the data of the column.
The return value should be same as the result of general 'compareFunction'.

onBeforeChange

[ function ]

The function that will be
called before changing the value of the cell. If stop() method in event object is called,
the changing will be canceled.

onAfterChange

[ function ]

The function that will be
called after changing the value of the cell.

editor

[ Object ]

The object for configuring editing UI.

PROPERTIES

Name	Type	Description
type	stringfunction = 'text'	The string value that specifies the type of the editing UI. Available values are 'text', 'password', 'select', 'radio', 'checkbox'. When using the custom editor, sets to the customized renderer constructor.
options	[ Object ]	Option object using editor

copyOptions

[ Object ]

Option object for clipboard copying.
This option is column specific, and overrides the global copyOptions.

PROPERTIES

Name	Type	Description
useFormattedValue	[ boolean ]	Whether to use formatted values or original values as a string to be copied to the clipboard
useListItemText	[ boolean ]	Whether to use concatenated text or original values as a string to be copied to the clipboard
customValue	[ function ]	Whether to use customized value from "customValue" callback or original values as a string to be copied to the clipboard

relations

[ Array ]

Specifies relation between this and other column.

PROPERTIES

Name	Type	Description
targetNames	[ Array ]	Array of the names of target columns.
disabled	[ function ]	If returns true, target columns will be disabled.
editable	[ function ]	If returns true, target columns will be editable.
listItems	[ function ]	The function whose return value specifies the option list for the 'select', 'radio', 'checkbox' type. The options list of target columns will be replaced with the return value of this function.

whiteSpace

string = 'nowrap'

If set to 'normal', the text line is broken
by fitting to the column's width. If set to 'pre', spaces are preserved and the text is braken by
new line characters. If set to 'pre-wrap', spaces are preserved, the text line is broken by
fitting to the column's width and new line characters. If set to 'pre-line', spaces are merged,
the text line is broken by fitting to the column's width and new line characters.(This option will be deprecated)

rowSpan

boolean = false

If set to true, apply dynamic rowspan to column data.
If it is not a top-level relational column of a column relationship or the grid has tree data, dynamic rowspan is not applied.

customHeader

[ HTMLElement ]

If set HTML element, the element will render in header cell.
If set without header property, the text content of element will be set to header property.

summary

[ Object ]

The object for configuring summary area.

PROPERTIES

Name

Type

Description

height

[ number ]

The height of the summary area.

position

string = 'bottom'

The position of the summary area. ('bottom', 'top')

defaultContent

[ stringObject ]

The configuring of summary cell for every column.
This options can be overriden for each column by columnContent options.
If type is string, the value is used as HTML of summary cell for every columns
without auto-calculation.

PROPERTIES

Name	Type	Description
useAutoSummary	boolean = true	If set to true, the summary value of every column is served as a parameter to the template function whenever data is changed.
template	[ function ]	Template function which returns the content(HTML) of the column of the summary. This function takes an K-V object as a parameter which contains a summary values keyed by 'sum', 'avg', 'min', 'max' and 'cnt'.

columnContent

[ Object ]

The configuring of summary cell for each column.
Sub options below are keyed by each column name.
If type of value of this object is string, the value is used as HTML of summary cell for
the column without auto-calculation.

PROPERTIES

Name	Type	Description
useAutoSummary	boolean = true	If set to true, the summary value of each column is served as a parameter to the template function whenever data is changed.
template	[ function ]	Template function which returns the content(HTML) of the column of the summary. This function takes an K-V object as a parameter which contains a summary values keyed by 'sum', 'avg', 'min', 'max' and 'cnt'.

usageStatistics

boolean = true

Send the hostname to google analytics.
If you do not want to send the hostname, this option set to false.

onGridMounted

[ function ]

The function that will be called after rendering the grid.

onGridUpdated

[ function ]

The function that will be called after updating the all data of the grid and rendering the grid.

onGridBeforeDestroy

[ function ]

The function that will be called before destroying the grid.

draggable

[ boolean ]

Whether to enable to drag the row for changing the order of rows.

contextMenu

[ Array ]

Option array for the context menu.

moveDirectionOnEnter

[ string ]

Define moving focus direction on Enter. If not set, the focus does not move.

HTMLElement

The target element to create grid.

Static Methods

applyTheme(presetName, extOptions)

Apply theme to all grid instances with the preset options of a given name.

PARAMETERS

Name

Type

Description

presetName

string

preset theme name. Available values are 'default', 'striped' and 'clean'.

extOptions

[ Object ]

if exist, extend preset options with this object.

PROPERTIES

Name

Type

Description

outline

[ Object ]

Styles for the table outline.

PROPERTIES

Name	Type	Description
border	[ string ]	Color of the table outline.
showVerticalBorder	[ boolean ]	Whether vertical outlines of the table are visible.

selection

[ Object ]

Styles for a selection layer.

PROPERTIES

Name	Type	Description
background	[ string ]	Background color of a selection layer.
border	[ string ]	Border color of a selection layer.

scrollbar

[ Object ]

Styles for scrollbars.

PROPERTIES

Name	Type	Description
border	[ string ]	Border color of scrollbars.
background	[ string ]	Background color of scrollbars.
emptySpace	[ string ]	Color of extra spaces except scrollbar.
thumb	[ string ]	Color of thumbs in scrollbars.
active	[ string ]	Color of arrows(for IE) or thumb:hover(for other browsers) in scrollbars.

frozenBorder

[ Object ]

Styles for a frozen border.

PROPERTIES

Name	Type	Description
border	[ string ]	Border color of a frozen border.

area

[ Object ]

Styles for the table areas.

PROPERTIES

Name

Type

Description

header

[ Object ]

Styles for the header area in the table.

PROPERTIES

Name	Type	Description
background	[ string ]	Background color of the header area in the table.
border	[ string ]	Border color of the header area in the table.

body

[ Object ]

Styles for the body area in the table.

PROPERTIES

Name	Type	Description
background	[ string ]	Background color of the body area in the table.

summary

[ Object ]

Styles for the summary area in the table.

PROPERTIES

Name	Type	Description
background	[ string ]	Background color of the summary area in the table.
border	[ string ]	Border color of the summary area in the table.

row

[ Object ]

Styles for the table rows.

PROPERTIES

Name

Type

Description

even

[ Object ]

Styles for even row.

PROPERTIES

Name	Type	Description
background	[ string ]	background color of even row.
text	[ string ]	text color of even row.

odd

[ Object ]

Styles for odd row.

PROPERTIES

Name	Type	Description
background	[ string ]	background color of cells in odd row.
text	[ string ]	text color of odd row.

dummy

[ Object ]

Styles of dummy row.

PROPERTIES

Name	Type	Description
background	[ string ]	background color of dummy row.

hover

[ Object ]

Styles of hovered row.

PROPERTIES

Name	Type	Description
background	[ string ]	background color of hovered row.

cell

[ Object ]

Styles for the table cells.

PROPERTIES

Name

Type

Description

normal

[ Object ]

Styles for normal cells.

PROPERTIES

Name	Type	Description
background	[ string ]	Background color of normal cells.
border	[ string ]	Border color of normal cells.
text	[ string ]	Text color of normal cells.
showVerticalBorder	[ boolean ]	Whether vertical borders of normal cells are visible.
showHorizontalBorder	[ boolean ]	Whether horizontal borders of normal cells are visible.

header

[ Object ]

Styles for header cells.

PROPERTIES

Name	Type	Description
background	[ string ]	Background color of header cells.
border	[ string ]	border color of header cells.
text	[ string ]	text color of header cells.
showVerticalBorder	[ boolean ]	Whether vertical borders of header cells are visible.
showHorizontalBorder	[ boolean ]	Whether horizontal borders of header cells are visible.

selectedHeader

[ Object ]

Styles for selected header cells.

PROPERTIES

Name	Type	Description
background	[ string ]	background color of selected header cells.

rowHeader

[ Object ]

Styles for row's header cells.

PROPERTIES

Name	Type	Description
background	[ string ]	Background color of row's header cells.
border	[ string ]	border color of row's header cells.
text	[ string ]	text color of row's header cells.
showVerticalBorder	[ boolean ]	Whether vertical borders of row's header cells are visible.
showHorizontalBorder	[ boolean ]	Whether horizontal borders of row's header cells are visible.

selectedRowHeader

[ Object ]

Styles for selected row's header cells.

PROPERTIES

Name	Type	Description
background	[ string ]	background color of selected row's haed cells.

summary

[ Object ]

Styles for cells in the summary area.

PROPERTIES

Name	Type	Description
background	[ string ]	Background color of cells in the summary area.
border	[ string ]	border color of cells in the summary area.
text	[ string ]	text color of cells in the summary area.
showVerticalBorder	[ boolean ]	Whether vertical borders of cells in the summary area are visible.
showHorizontalBorder	[ boolean ]	Whether horizontal borders of cells in the summary area are visible.

focused

[ Object ]

Styles for a focused cell.

PROPERTIES

Name	Type	Description
background	[ string ]	background color of a focused cell.
border	[ string ]	border color of a focused cell.

focusedInactive

[ Object ]

Styles for a inactive focus cell.

PROPERTIES

Name	Type	Description
border	[ string ]	border color of a inactive focus cell.

required

[ Object ]

Styles for required cells.

PROPERTIES

Name	Type	Description
background	[ string ]	background color of required cells.
text	[ string ]	text color of required cells.

editable

[ Object ]

Styles for editable cells.

PROPERTIES

Name	Type	Description
background	[ string ]	background color of the editable cells.
text	[ string ]	text color of the selected editable cells.

disabled

[ Object ]

Styles for disabled cells.

PROPERTIES

Name	Type	Description
background	[ string ]	background color of disabled cells.
text	[ string ]	text color of disabled cells.

invalid

[ Object ]

Styles for invalid cells.

PROPERTIES

Name	Type	Description
background	[ string ]	background color of invalid cells.
text	[ string ]	text color of invalid cells.

currentRow

[ Object ]

Styles for cells in a current row.(deprecated since version 4.4.0)

PROPERTIES

Name	Type	Description
background	[ string ]	background color of cells in a current row.
text	[ string ]	text color of cells in a current row.

evenRow

[ Object ]

Styles for cells in even rows.(deprecated since version 4.4.0)

PROPERTIES

Name	Type	Description
background	[ string ]	background color of cells in even rows.
text	[ string ]	text color of cells in even rows.

oddRow

[ Object ]

Styles for cells in even rows.(deprecated since version 4.4.0)

PROPERTIES

Name	Type	Description
background	[ string ]	background color of cells in odd rows.
text	[ string ]	text color of cells in odd rows.

dummy

[ Object ]

Styles for dummy cells.(deprecated since version 4.4.0)

PROPERTIES

Name	Type	Description
background	[ string ]	background color of dummy cells.

EXAMPLES

var Grid = tui.Grid; // or require('tui-grid')

Grid.applyTheme('striped', {
    grid: {
        border: '#aaa',
        text: '#333'
    },
    cell: {
        disabled: {
            text: '#999'
        }
    }
});

setLanguage(localeCode, data)

Set language

PARAMETERS

Name	Type	Description
localeCode	string	Code to set locale messages and this is the language or language-region combination (ex: en-US)
data	[ Object ]	Messages using in Grid

EXAMPLES

var Grid = tui.Grid; // or require('tui-grid')

Grid.setLanguage('en'); // default and set English
Grid.setLanguage('ko'); // set Korean
Grid.setLanguage('en-US', { // set new language
     display: {
         noData: 'No data.',
         loadingData: 'Loading data.',
         resizeHandleGuide: 'You can change the width of the column by mouse drag, ' +
                             'and initialize the width by double-clicking.'
     },
     net: {
         confirmCreate: 'Are you sure you want to create {{count}} data?',
         confirmUpdate: 'Are you sure you want to update {{count}} data?',
         confirmDelete: 'Are you sure you want to delete {{count}} data?',
         confirmModify: 'Are you sure you want to modify {{count}} data?',
         noDataToCreate: 'No data to create.',
         noDataToUpdate: 'No data to update.',
         noDataToDelete: 'No data to delete.',
         noDataToModify: 'No data to modify.',
         failResponse: 'An error occurred while requesting data.\nPlease try again.'
     }
});

Instance Methods

activateFocus(): Make view ready to get keyboard input.

addCellClassName(rowKey, columnName, className)

Add the specified css class to cell element identified by the rowKey and className

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row
columnName	string	The name of the column
className	string	The css class name to add

addColumnClassName(columnName, className)

Add class name to all cell data of specific column.

PARAMETERS

Name	Type	Description
columnName	string	column name to add className
className	string	class name

addRowClassName(rowKey, className)

Add the specified css class to all cell elements in the row identified by the rowKey

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row
className	string	The css class name to add

appendRow(row, options)

Insert the new row with specified data to the end of table.

PARAMETERS

Name

Type

Description

row

[ Object ] = {}

The data for the new row

options

[ Object ] = {}

Options

PROPERTIES

Name	Type	Description
at	[ number ]	The index at which new row will be inserted
extendPrevRowSpan	[ boolean ]	If set to true and the previous row at target index has a rowspan data, the new row will extend the existing rowspan data.
focus	[ boolean ]	If set to true, move focus to the new row after appending
parentRowKey	[ numberstring ]	Deprecated: Tree row key of the parent which appends given rows

appendRows(data)

append rows.

PARAMETERS

Name	Type	Description
data	Array	A list of new rows

appendTreeRow(row, options)

Insert the new tree row with specified data.

PARAMETERS

Name

Type

Description

row

[ Object ] = {}

The tree data for the new row

options

[ Object ] = {}

Options

PROPERTIES

Name	Type	Description
parentRowKey	[ numberstring ]	Tree row key of the parent which appends given rows
offset	[ number ]	The offset value to insert new tree row
focus	[ boolean ]	If set to true, move focus to the new tree row after appending

blur(): Remove focus from the focused cell.

cancelEditing(): Cancel the editing.

check(rowKey)

Check the row identified by the specified rowKey.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row

checkAll(allPage)

Check all rows.

PARAMETERS

Name	Type	Description
allPage	[ boolean ]	check all rows when using pagination. The default value is 'true'.

checkBetween(startRowKey, endRowKey)

Check the rows between the specified rowKeys. If endRowKey is not passed, perform 'check' on the row of startRowKey.

PARAMETERS

Name	Type	Description
startRowKey	numberstring	The unique key of the row
endRowKey	[ numberstring ]	The unique key of the row

clear(): Remove all rows.

clearModifiedData(type)

clear the modified data that is returned as the result of 'getModifiedRows' method.
If the 'type' parameter is undefined, all modified data is cleared.

PARAMETERS

Name	Type	Description
type	string	The modified type

collapse(rowKey, recursive)

Expand tree row.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row
recursive	boolean	true for recursively expand all descendant

collapseAll(): Collapse all tree row.

copyToClipboard(): Copy to clipboard

destroy(): Destroy the instance.

disable(): Disable all rows.

disableCell(rowKey, columnName)

Disable the cell identified by the row key and column name.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row.
columnName	string	column name

disableColumn(columnName)

Disable the column identified by the column name.

PARAMETERS

Name	Type	Description
columnName	string	column name

disableRow(rowKey, withCheckbox)

Disable the row identified by the rowkey.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the target row
withCheckbox	[ boolean ] = true	change including checkbox. The default value is 'true'

disableRowCheck(rowKey)

Disable the row identified by the specified rowKey to not be able to check.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row.

enable(): Enable all rows.

enableCell(rowKey, columnName)

Enable the cell identified by the row key and column name.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row.
columnName	string	column name

enableColumn(columnName)

Enable the column identified by the column name.

PARAMETERS

Name	Type	Description
columnName	string	column name

enableRow(rowKey, withCheckbox)

Enable the row identified by the rowKey.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the target row
withCheckbox	[ boolean ] = true	change including checkbox. The default value is 'true'

enableRowCheck(rowKey)

Enable the row identified by the rowKey to be able to check.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row

expand(rowKey, recursive)

Expand tree row.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row
recursive	boolean	true for recursively expand all descendant

expandAll(): Expand all tree row.

export(format, options)

Export a file in the specified format

PARAMETERS

Name

Type

Description

format

string

Format of export file

options

[ Object ]

Options for export

PROPERTIES

Name	Type	Description
includeHeader	boolean = true	Whether to include headers
includeHiddenColumns	boolean = false	Whether to include hidden columns
columnNames	Array.<string> = [...allVisibleColumnNames]	Columns names to export
onlySelected	boolean = false	Whether to export only the selected range
onlyFiltered	boolean = true	Whether to export only the filtered data
useFormattedValue	boolean = false	Whether to export formatted values or original values
delimiter	','';''\t''\|' = ','	Delimiter to export CSV
fileName	string = 'grid-export'	File name to export

filter(columnName, state)

Filter the data.

PARAMETERS

Name	Type	Description
columnName	string	column name to filter
state	Array.<FilterState>	filter state

EXAMPLES

grid.filter('name', [{code: 'eq', value: 3}, {code: 'eq', value: 4}]);

findRows(conditions)

Find rows by conditions

PARAMETERS

Name	Type	Description
conditions	ObjectFunction	object (key: column name, value: column value) or function that check the value and returns true/false result to find rows

RETURNS:

{

Array

} - Row list

EXAMPLES

Conditions type is object.

grid.findRows({
    artist: 'Birdy',
    price: 10000
});

Conditions type is function.

grid.findRows((row) => {
    return (/b/ig.test(row.artist) && row.price > 10000);
});

finishEditing(rowKey, columnName, value)

Save editing value and finishes to edit.

PARAMETERS

Name	Type	Description
rowKey
columnName
value

focus(rowKey, columnName, setScroll)

Focus to the cell identified by given rowKey and columnName.

PARAMETERS

Name	Type	Description
rowKey	NumberString	rowKey
columnName	String	columnName
setScroll	Boolean = true	if set to true, move scroll position to focused position

RETURNS:

{

Boolean

} - true if focused cell is changed

focusAt(rowIndex, columnIndex, setScroll)

Focus to the cell identified by given rowIndex and columnIndex.

PARAMETERS

Name	Type	Description
rowIndex	Number	rowIndex
columnIndex	Number	columnIndex
setScroll	boolean = true	if set to true, scroll to focused cell

RETURNS:

{

Boolean

} - true if success

getAncestorRows(rowKey)

Get the ancestors of the row which has the given row key.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row

RETURNS:

{

Array.<TreeRow>

} - the ancestor rows

getCellClassName(rowKey, columnName)

Return a list of class names of specific cell.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row
columnName	string	The name of the column

RETURNS:

{

Array

} - A list of class names

getCheckedRowKeys(): Return a list of the rowKey of checked rows.
RETURNS:
{
Array.<stringnumber>
} - A list of the rowKey.

getCheckedRows(): Return a list of the checked rows.
RETURNS:
{
Array.<object>
} - A list of the checked rows.

getChildRows(rowKey)

Get the children of the row which has the given row key.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row

RETURNS:

{

Array.<Object>

} - the children rows

getColumn(columnName)

Return a specific column model.

PARAMETERS

Name	Type	Description
columnName	string	The name of the column

RETURNS:

{

Objectnull

} - A column model.

getColumnClassName(columnName)

Return a list of class names of specific column.

PARAMETERS

Name	Type	Description
columnName	string	The name of the column

RETURNS:

{

Array

} - A list of class names

getColumns(): Return a list of the column model.
RETURNS:
{
Array
} - A list of the column model.

getColumnValues(columnName)

Return a list of all values in the specified column.

PARAMETERS

Name	Type	Description
columnName	string	The name of the column

RETURNS:

{

Arraystring

} - A List of all values in the specified column. (or JSON string of the list)

getData(): Return a list of all rows.
RETURNS:
{
Array
} - A list of all rows

getDepth(rowKey)

Get the depth of the row which has the given row key.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row

RETURNS:

{

number

} - the depth

getDescendantRows(rowKey)

Get the descendants of the row which has the given row key.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row

RETURNS:

{

Array.<Object>

} - the descendant rows

getElement(rowKey, columnName)

Return the HTMLElement of the cell identified by the rowKey and columnName.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row
columnName	string	The name of the column

RETURNS:

{

HTMLElement

} - The HTMLElement of the cell element

getFilteredData(): Return a list of filtered rows.
RETURNS:
{
Array
} - A list of filtered rows

getFilterState(): Get filter state.
RETURNS:
{
Array.<FilterState>
} - filter state

getFocusedCell(): Return data of currently focused cell
RETURNS:
{
numberstring
} - rowKey - The unique key of the row

getFormattedValue(rowKey, columnName)

Return the formatted value of the cell identified by the rowKey and columnName.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the target row.
columnName	string	The name of the column

RETURNS:

{

stringnull

} - The formatted value of the cell

getIndexOfColumn(columnName)

Return the index of the column indentified by the column name.

PARAMETERS

Name	Type	Description
columnName	string	The unique key of the column

RETURNS:

{

number

} - The index of the column

getIndexOfRow(rowKey)

Return the index of the row indentified by the rowKey.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row

RETURNS:

{

number

} - The index of the row

getModifiedRows(options)

Return the object that contains the lists of changed data compared to the original data.
The object has properties 'createdRows', 'updatedRows', 'deletedRows'.

PARAMETERS

Name

Type

Description

options

[ Object ] = {}

Options

PROPERTIES

Name	Type	Description
checkedOnly	boolean = false	If set to true, only checked rows will be considered.
withRawData	boolean = false	If set to true, the data will contains the row data for internal use.
rowKeyOnly	boolean = false	If set to true, only keys of the changed rows will be returned.
ignoredColumns	[ Array ]	A list of column name to be excluded.

RETURNS:

{

Object

} - Object that contains the result list.

deprecatedgetPagination(): Return an instance of tui.Pagination.
RETURNS:
{
tui.<Pagination>
}

getPaginationTotalCount(): Get total count of items with the current pagination
RETURNS:
{
number
} - total count

getParentRow(rowKey)

Get the parent of the row which has the given row key.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row

RETURNS:

{

Object

} - the parent row

getRow(rowKey)

Return the object that contains all values in the specified row.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the target row

RETURNS:

{

Object

} - The object that contains all values in the row.

getRowAt(rowIdx)

Return the object that contains all values in the row at specified index.

PARAMETERS

Name	Type	Description
rowIdx	number	The index of the row

RETURNS:

{

Object

} - The object that contains all values in the row.

getRowClassName(rowKey)

Return a list of class names of specific row.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row

RETURNS:

{

Array

} - A list of class names

getRowCount(): Return the total number of the rows.
RETURNS:
{
number
} - The total number of the rows

getRowSpanData(rowKey, columnName)

Return the rowspan data of the cell identified by the rowKey and columnName.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row
columnName	string	The name of the column

RETURNS:

{

Object

} - Row span data

getSelectionRange(): get Selection range
RETURNS:
{
Objectnull
} - range - Selection range

getSortState(): Get state of the sorted column in rows
RETURNS:
{
Object
} - Sorted column's state

getSummaryValues(columnName)

Return the values of given column summary.
If the column name is not specified, all values of available columns are returned.
The shape of returning object looks like the example below.

PARAMETERS

Name	Type	Description
columnName	[ string ]	column name

RETURNS:

{

Object

}

EXAMPLES

{
    sum: 1000,
    avg: 200,
    max: 300,
    min: 50,
    cnt: 5,
    filtered: {
      sum: 1000,
      avg: 200,
      max: 300,
      min: 50,
      cnt: 5
    }
}

getValue(rowKey, columnName)

Return the value of the cell identified by the rowKey and columnName.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the target row.
columnName	string	The name of the column

RETURNS:

{

numberstringbooleannull

} - The value of the cell

hideColumn(columnName, arguments)

Hide columns

PARAMETERS

Name	Type	Description
columnName
arguments	string	Column names to hide

isModified(): Return true if there are at least one row modified.
RETURNS:
{
boolean
} - True if there are at least one row modified.

moveColumn(columnName, targetIndex)

Move the column identified by the specified column name to target index.
If there is hidden columns or use complex columns, this couldn't be used.
If the column of column name is row header column or tree column, this couldn't be used.

PARAMETERS

Name	Type	Description
columnName	string	The column name of the column
targetIndex	number	Target index for moving

moveRow(rowKey, targetIndex, options)

Move the row identified by the specified rowKey to target index.
Use setRows for a lot of data, as using setRow can cause performance issues.
If data is sorted or filtered, this couldn't be used.

PARAMETERS

Name

Type

Description

rowKey

numberstring

The unique key of the row

targetIndex

number

Target index for moving

options

[ Object ] = {appended:false}

Options

PROPERTIES

Name	Type	Description
appended	[ number ]	This option for only tree data. Whether the row is appended to other row as the child.

off(eventName, fn)

Remove custom event to grid.

PARAMETERS

Name	Type	Description
eventName	string	custom event name
fn	function	event handler

on(eventName, fn)

Add custom event to grid.

PARAMETERS

Name	Type	Description
eventName	string	custom event name
fn	function	event handler

prependRow(row, options)

Insert the new row with specified data to the beginning of table.

PARAMETERS

Name

Type

Description

row

[ Object ]

The data for the new row

options

[ Object ] = {}

Options

PROPERTIES

Name	Type	Description
focus	[ boolean ]	If set to true, move focus to the new row after appending

readData(page, data, resetData)

Request 'readData' to the server. The last requested data will be extended with new data.

PARAMETERS

Name	Type	Description
page	Number	Page number
data	Object	Data(parameters) to send to the server
resetData	Boolean	If set to true, last requested data will be ignored.

refreshLayout(): Refresh the layout view. Use this method when the view was rendered while hidden.

reloadData(): Request 'readData' with last requested data.

removeCellClassName(rowKey, columnName, className)

Remove the specified css class from the cell element indentified by the rowKey and columnName.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row
columnName	string	The name of the column
className	string	The css class name to be removed

removeCheckedRows(showConfirm)

Remove all checked rows.

PARAMETERS

Name	Type	Description
showConfirm	[ boolean ]	If set to true, confirm message will be shown before remove.

RETURNS:

{

boolean

} - True if there's at least one row removed.

removeColumnClassName(columnName, className)

Remove class name to all cell data of specific column.

PARAMETERS

Name	Type	Description
columnName	string	column name to add className
className	string	class name

removeRow(rowKey, options)

Remove the row identified by the specified rowKey.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row
options	= {}

removeRowClassName(rowKey, className)

Remove the specified css class from all cell elements in the row identified by the rowKey.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row
className	string	The css class name to be removed

removeRows(rowKeys)

Remove the rows identified by the specified rowKeys.

PARAMETERS

Name	Type	Description
rowKeys	Array.<RowKey>	The array of unique keys of the row

removeTreeRow(rowKey)

Remove the tree row identified by the specified rowKey.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row

request(requestType, options)

Send request to server to sync data

PARAMETERS

Name

Type

Description

requestType

String

'createData|updateData|deleteData|modifyData'

options

object = {}

Options

PROPERTIES

Name	Type	Description
url	[ String ]	URL to send the request
method	[ String ]	method to send the request
checkedOnly	boolean = false	Whether the request param only contains checked rows
modifiedOnly	boolean = true	Whether the request param only contains modified rows
showConfirm	boolean = true	Whether to show confirm dialog before sending request
withCredentials	boolean = false	Use withCredentials flag of XMLHttpRequest for ajax requests if true

resetColumnWidths(widths)

Reset the width of each column by using initial setting of column models.

PARAMETERS

Name	Type	Description
widths	[ Array ]	An array of column widths to set. If there's no parameter, it reset auto-resizing column width.

resetData(data, options)

Replace all rows with the specified list. This will not change the original data.

PARAMETERS

Name

Type

Description

data

Array

A list of new rows

options

[ Object ] = {}

Options

PROPERTIES

Name

Type

Description

sortState

[ Object ]

If set the sortState, the sort state will be applied when the new rows are set.
It is recommended that you do not use it unless you are getting the sorted data by communicating with the server without DataSource.

PROPERTIES

Name	Type	Description
columnName	[ string ]	Target column name.
ascending	[ boolean ]	The ascending state of specific column which will apply to the grid.
multiple	[ boolean ]	Whether to use multiple sorting.

filterState

[ Object ]

If set the filterState, the filter state will be applied when the new rows are set.
It is recommended that you do not use it unless you are getting the filtered data by communicating with the server without DataSource.

PROPERTIES

Name

Type

Description

columnName

[ string ]

Target column name.

columnFilterState

[ Object ]

The column filter state of column which will apply to the grid.

PROPERTIES

Name	Type	Description
code	[ string ]	Code for column filter(ex. 'eq', 'gt').
value	[ string ]	Input value for column filter.

pageState

[ Object ]

If set the pageState, the pagination state will be applied when the new rows are set.
It is recommended that you do not use it unless you are getting the paginated data by communicating with the server without DataSource.

PROPERTIES

Name	Type	Description
page	[ number ]	Target page number.
totalCount	[ number ]	The total pagination count.
perPage	[ number ]	Number of rows per page.

resetOriginData(): reset original data to current data.
(Original data is set by resetData

restore(): Restore the data to the original data.
(Original data is set by resetData

setBodyHeight(bodyHeight)

Set the height of body-area.

PARAMETERS

Name	Type	Description
bodyHeight	number	The number of pixel

setColumnHeaders(columnsMap)

Set columns title

PARAMETERS

Name	Type	Description
columnsMap	Object	columns map to be change

EXAMPLES

{
     columnName1: 'title1',
     columnName2: 'title2',
     columnName3: 'title3'
}

setColumns(columns)

Set the list of column model.

PARAMETERS

Name	Type	Description
columns	Array	A new list of column model

setColumnValues(columnName, columnValue, checkCellState)

Set the all values in the specified column.

PARAMETERS

Name	Type	Description
columnName	string	The name of the column
columnValue	numberstring	The value to be set
checkCellState	boolean = false	If set to true, only editable and not disabled cells will be affected.

setFilter(columnName, filterOpt)

Set the option of column filter.

PARAMETERS

Name	Type	Description
columnName	string	columnName
filterOpt	stringFilterOpt	filter type

setFrozenColumnCount(count)

Set the count of frozen columns.

PARAMETERS

Name	Type	Description
count	number	The count of columns to be frozen

setHeader(options)

Set options for header.

PARAMETERS

Name

Type

Description

options

Object

Options for header

PROPERTIES

Name	Type	Description
height	[ number ]	The height value
complexColumns	[ Array ]	The complex columns info

setHeight(height)

Set the height of the dimension.

PARAMETERS

Name	Type	Description
height	number	The height of the dimension

setPaginationTotalCount(totalCount)

Set total count of items for calculating the pagination.

PARAMETERS

Name	Type	Description
totalCount	number	total count

setPerPage(perPage, data)

Set number of rows per page and reload current page

PARAMETERS

Name	Type	Description
perPage	number	Number of rows per page
data	Params	Data(parameters) to send to the server

setRequestParams(params)

Set parameters to be sent with the request to communicate with the server.

PARAMETERS

Name	Type	Description
params	Object	parameters to send to the server

setRow(rowKey, row)

Set new data to the row identified by the specified rowKey.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row
row	object	The object that contains all values in the row.

setRows(rows)

Set new data to the all rows identified by the specified rowKey.
Use setRows for a lot of data, as using setRow can cause performance issues.

PARAMETERS

Name	Type	Description
rows	object	The object that contains all values in the row with rowKey.

setSelectionRange(range)

Select cells or rows by range

PARAMETERS

Name

Type

Description

range

Object

Selection range

PROPERTIES

Name	Type	Description
start	[ Array ]	Index info of start selection (ex: rowIndex, columnIndex)
end	[ Array ]	Index info of end selection (ex: rowIndex, columnIndex)

setSummaryColumnContent(columnName, columnContent)

Set the HTML string of given column summary.
The type of content is the same as the options.summary.columnContent of the constructor.

PARAMETERS

Name	Type	Description
columnName	string	column name
columnContent	stringobject	HTML string or options object.

setValue(rowKey, columnName, value, checkCellState)

Set the value of the cell identified by the specified rowKey and columnName.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row
columnName	string	The name of the column
value	numberstring	The value to be set
checkCellState	boolean = false	If set to true, only editable and not disabled cells will be affected.

setWidth(width)

Set the width of the dimension.

PARAMETERS

Name	Type	Description
width	number	The width of the dimension

showColumn(columnName, arguments)

Show columns

PARAMETERS

Name	Type	Description
columnName
arguments	string	Column names to show

sort(columnName, ascending, multiple)

Sort all rows by the specified column.

PARAMETERS

Name	Type	Description
columnName	string	The name of the column to be used to compare the rows
ascending	[ boolean ]	Whether the sort order is ascending. If not specified, use the negative value of the current order.
multiple	[ boolean ]	Whether using multiple sort

startEditing(rowKey, columnName, setScroll)

Set focus on the cell at the specified index of row and column and starts to edit.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row
columnName	string	The name of the column
setScroll	boolean = true	If set to true, the view will scroll to the cell element.

startEditingAt(rowIndex, columnIndex, setScroll)

Set focus on the cell at the specified index of row and column and starts to edit.

PARAMETERS

Name	Type	Description
rowIndex	numberstring	The index of the row
columnIndex	string	The index of the column
setScroll	boolean = true	If set to true, the view will scroll to the cell element.

uncheck(rowKey)

Uncheck the row identified by the specified rowKey.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row

uncheckAll(allPage)

Uncheck all rows.

PARAMETERS

Name	Type	Description
allPage	[ boolean ]	Uncheck all rows when using pagination. The default value is 'true'.

uncheckBetween(startRowKey, endRowKey)

Uncheck the rows between the specified rowKeys. If endRowKey is not passed, perform 'uncheck' on the row of startRowKey.

PARAMETERS

Name	Type	Description
startRowKey	numberstring	The unique key of the row
endRowKey	[ numberstring ]	The unique key of the row

unfilter(columnName)

Remove filter state of specific column.

PARAMETERS

Name	Type	Description
columnName	string	column name to unfilter

unsort(columnName)

If the parameter exists, unsort only column with columnName. If not exist, unsort all rows

PARAMETERS

Name	Type	Description
columnName	[ string ]	The name of the column to be used to compare the rows

validate(rowKeys)

Validate all data and returns the result.
Return value is an array which contains only rows which have invalid cell data.

PARAMETERS

Name	Type	Description
rowKeys	[ Array ]	Array of rowKeys to validate. Validate only for the given rows, but validations that should be performed on all rows, such as unique, may not work correctly.

RETURNS:

{

Array.<Object>

} - An array of error object

EXAMPLES

// return value example
[
    {
        rowKey: 1,
        errors: [
            {
                columnName: 'c1',
                errorCode: ['REQUIRED'],
                errorInfo: [{ code: 'REQUIRED' }]
            },
            {
                columnName: 'c2',
                errorCode: ['VALIDATOR_FN'],
                errorInfo: [{ code: 'VALIDATOR_FN', customCode: 'CUSTOM_CODE' }]
            }
        ]
    },
    {
        rowKey: 3,
        errors: [
            {
                columnName: 'c2',
                errorCode: ['MIN'],
                errorInfo: [{ code: 'MIN', min: 1000 }]
            }
        ]
    }
]

Events

afterChange

Occurs after one or more cells is changed

PROPERTIES

Name	Type	Description
origin	string	The type of change('paste', 'delete', 'cell')
changes	Array.<object>	rowKey, column name, previous values and changed values after changing the values
instance	Grid	Current grid instance

afterExport

Occurs after export

PROPERTIES

Name	Type	Description
exportFormat	'txt''csv''xlsx''xls'	Export format
exportOptions	Object	Used export options
instance	Grid	Current grid instance

afterFilter

Occurs after filtering

PROPERTIES

Name	Type	Description
instance	Grid	Current grid instance
columnName	string	Target column name
filterState	Object	Current filter state

afterPageMove

Occurs after moving the page.

PROPERTIES

Name	Type	Description
page	number	Target page number
instance	Grid	Current grid instance

afterSort

Occurs after sorting.

PROPERTIES

Name	Type	Description
sortState	Object	sort state
columnName	string	Target column name
instance	Grid	Current grid instance

afterUnfilter

Occurs after unfiltering

PROPERTIES

Name	Type	Description
instance	Grid	Current grid instance
columnName	string	Target column name
filterState	Object	Current filter state

afterUnsort

Occurs after unsorting.

PROPERTIES

Name	Type	Description
sortState	Object	sort state
columnName	string	Target column name
instance	Grid	Current grid instance

beforeChange

Occurs before one or more cells is changed

PROPERTIES

Name	Type	Description
origin	string	The type of change('paste', 'delete', 'cell')
changes	Array.<object>	rowKey, column name, original values and next values before changing the values
instance	Grid	Current grid instance

beforeExport

Occurs before export

PROPERTIES

Name	Type	Description
exportFormat	'txt''csv''xlsx''xls'	Export format
exportOptions	Object	Used export options
exportFn	function	Callback function to export modified data
instance	Grid	Current grid instance

beforeFilter

Occurs before filtering.

PROPERTIES

Name	Type	Description
instance	Grid	Current grid instance
filterState	Object	Current filter state
columnName	string	Target column name
type	string	Column Filter type
operator	string	Column filter Operator('AND' \| 'OR')
conditionFn	function	Original function to filter the data in grid.
columnFilterState	Array	Next filter state of column which triggers the event. If the event is not stopped this state will be applied to grid.

beforePageMove

Occurs before moving the page.

PROPERTIES

Name	Type	Description
page	number	Target page number
instance	Grid	Current grid instance

beforeRequest

Occurs before the http request is sent

PROPERTIES

Name	Type	Description
xhr	XMLHttpRequest	Current XMLHttpRequest instance
instance	Grid	Current grid instance

beforeSort

Occurs before sorting.

PROPERTIES

Name	Type	Description
sortState	Object	Current sort state
columnName	string	Target column name
ascending	boolean	Next ascending state of a column. If the event is not stopped this ascending state will be applied to grid.
multiple	boolean	Whether to use multiple sort
instance	Grid	Current grid instance

beforeUnfilter

Occurs before unfiltering

PROPERTIES

Name	Type	Description
instance	Grid	Current grid instance
columnName	string	Target column name
filterState	Object	Current filter state

beforeUnsort

Occurs before unsorting.

PROPERTIES

Name	Type	Description
sortState	Object	Current sort state of the grid
columnName	string	Target column name
multiple	boolean	Whether to use multiple sort
instance	Grid	Current grid instance

check

Occurs when a checkbox in row header is checked

PROPERTIES

Name	Type	Description
rowKey	[ numberstring ]	rowKey of the checked row(when single check via click)
rowKeys	[ Array ]	rowKeys of the checked rows(when multiple check via shift-click)
instance	Grid	Current grid instance

checkAll

Occurs when a checkbox in header is checked(checked all checkbox in row header)

PROPERTIES

Name	Type	Description
instance	Grid	Current grid instance

click

Occurs when a mouse button is clicked on the Grid.
The properties of the event object include the native event object.

PROPERTIES

Name	Type	Description
nativeEvent	Event	Event object
targetType	string	Type of event target
rowKey	number	rowKey of the target cell
columnName	string	columnName of the target cell
instance	Grid	Current grid instance

collapse

Occurs when the row having child rows is collapsed

PROPERTIES

Name	Type	Description
rowKey	numberstring	rowKey of the collapsed row
instance	Grid	Current grid instance

dblclick

Occurs when a mouse button is double clicked on the Grid.
The properties of the event object include the native event object.

PROPERTIES

Name	Type	Description
nativeEvent	Event	Event object
targetType	string	Type of event target
rowKey	number	rowKey of the target cell
columnName	string	columnName of the target cell
instance	Grid	Current grid instance

drag

Occurs when dragging the row

PROPERTIES

Name	Type	Description
instance	Grid	Current grid instance
rowKey	RowKey	The rowKey of the dragging row
targetRowKey	RowKey	The rowKey of the row at current dragging position
appended	boolean	Whether the row is appended to other row as the child in tree data.

dragStart

Occurs when starting to drag the row

PROPERTIES

Name	Type	Description
instance	Grid	Current grid instance
rowKey	RowKey	The rowKey of the row to drag
floatingRow	HTMLElement	The floating row DOM element

drop

Occurs when dropping the row

PROPERTIES

Name	Type	Description
instance	Grid	Current grid instance
rowKey	RowKey	The rowKey of the dragging row
targetRowKey	RowKey	The rowKey of the row at current dragging position
appended	boolean	Whether the row is appended to other row as the child in tree data.

editingFinish

Occurs when editing the cell is finished

PROPERTIES

Name	Type	Description
rowKey	number	rowKey of the target cell
columnName	number	columnName of the target cell
value	numberstringbooleannullundefined	value of the editing cell
instance	Grid	Current grid instance
save	boolean	Whether to save the value
triggeredByKey	boolean	Whether to trigger the event by key

editingStart

Occurs when editing the cell is started

PROPERTIES

Name	Type	Description
rowKey	number	rowKey of the target cell
columnName	number	columnName of the target cell
value	numberstringbooleannullundefined	value of the editing cell
instance	Grid	Current grid instance

expand

Occurs when the row having child rows is expanded

PROPERTIES

Name	Type	Description
rowKey	numberstring	rowKey of the expanded row
instance	Grid	Current grid instance

deprecatedfilter

Occurs after filtering

PROPERTIES

Name	Type	Description
instance	Grid	Current grid instance
columnName	string	Target column name
filterState	Object	Current filter state

focusChange

Occurs when focused cell is about to change

PROPERTIES

Name	Type	Description
rowKey	number	rowKey of the target cell
columnName	number	columnName of the target cell
prevRowKey	number	rowKey of the currently focused cell
prevColumnName	number	columnName of the currently focused cell
instance	Grid	Current grid instance

mousedown

Occurs when a mouse button is downed on the Grid.
The event object has all properties copied from the native MouseEvent.

PROPERTIES

Name	Type	Description
nativeEvent	Event	Event object
targetType	string	Type of event target
rowKey	numberstring	rowKey of the target cell
columnName	string	columnName of the target cell
instance	Grid	Current grid instance

mouseout

Occurs when a mouse pointer is moved off from the Grid.
The event object has all properties copied from the native MouseEvent.

PROPERTIES

Name	Type	Description
nativeEvent	Event	Event object
targetType	string	Type of event target
rowKey	numberstring	rowKey of the target cell
columnName	string	columnName of the target cell
instance	Grid	Current grid instance

mouseover

Occurs when a mouse pointer is moved onto the Grid.
The properties of the event object include the native MouseEvent object.

PROPERTIES

Name	Type	Description
nativeEvent	Event	Event object
targetType	string	Type of event target
rowKey	number	rowKey of the target cell
columnName	string	columnName of the target cell
instance	Grid	Current grid instance

onGridBeforeDestroy

Occurs before the grid is detached from DOM

PROPERTIES

Name	Type	Description
instance	Grid	Current grid instance

onGridMounted

Occurs when the grid is mounted on DOM

PROPERTIES

Name	Type	Description
instance	Grid	Current grid instance

onGridUpdated

Occurs when the grid data is updated and the grid is rendered onto the DOM
The event occurs only in the following API as below.
'resetData', 'restore', 'reloadData', 'readData', 'setPerPage' with 'dataSource', using 'dataSource'

PROPERTIES

Name	Type	Description
instance	Grid	Current grid instance

scrollEnd

Occurs when scroll at the bottommost

PROPERTIES

Name	Type	Description
instance	Grid	Current grid instance

deprecatedsort

Occurs after sorting.

PROPERTIES

Name	Type	Description
sortState	Object	sort state
columnName	string	Target column name
instance	Grid	Current grid instance

uncheck

Occurs when a checkbox in row header is unchecked

PROPERTIES

Name	Type	Description
rowKey	[ numberstring ]	rowKey of the unchecked row(when single check via click)
rowKeys	[ Array ]	rowKeys of the unchecked rows(when multiple unchecked via shift-click)
instance	Grid	Current grid instance

uncheckAll

Occurs when a checkbox in header is unchecked(unchecked all checkbox in row header)

PROPERTIES

Name	Type	Description
instance	Grid	Current grid instance

Resizable

STATIC METHODS

STATIC METHODS

INSTANCE METHODS

EVENTS

new Grid(options, el)

PARAMETERS

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

Static Methods

applyTheme(presetName, extOptions)

PARAMETERS

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

EXAMPLES

setLanguage(localeCode, data)

PARAMETERS

EXAMPLES

Instance Methods

activateFocus()

addCellClassName(rowKey, columnName, className)

PARAMETERS

addColumnClassName(columnName, className)

PARAMETERS

addRowClassName(rowKey, className)

PARAMETERS

appendRow(row, options)

PARAMETERS

PROPERTIES

appendRows(data)

PARAMETERS

appendTreeRow(row, options)

PARAMETERS

PROPERTIES

blur()

cancelEditing()

check(rowKey)

PARAMETERS

checkAll(allPage)