logo

/github|v4.21.22

Class

new Grid(options, el)

Grid public API

PARAMETERS
NameTypeDescription

options

Object

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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.

el

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
NameTypeDescription

presetName

string

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

extOptions

[ Object ]

if exist, extend preset options with this object.

PROPERTIES
NameTypeDescription

outline

[ Object ]

Styles for the table outline.

PROPERTIES
NameTypeDescription

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
NameTypeDescription

background

[ string ]

Background color of a selection layer.

border

[ string ]

Border color of a selection layer.

scrollbar

[ Object ]

Styles for scrollbars.

PROPERTIES
NameTypeDescription

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
NameTypeDescription

border

[ string ]

Border color of a frozen border.

area

[ Object ]

Styles for the table areas.

PROPERTIES
NameTypeDescription

header

[ Object ]

Styles for the header area in the table.

PROPERTIES
NameTypeDescription

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
NameTypeDescription

background

[ string ]

Background color of the body area
in the table.

summary

[ Object ]

Styles for the summary area in the table.

PROPERTIES
NameTypeDescription

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
NameTypeDescription

even

[ Object ]

Styles for even row.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of even row.

text

[ string ]

text color of even row.

odd

[ Object ]

Styles for odd row.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of cells in odd row.

text

[ string ]

text color of odd row.

dummy

[ Object ]

Styles of dummy row.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of dummy row.

hover

[ Object ]

Styles of hovered row.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of hovered row.

cell

[ Object ]

Styles for the table cells.

PROPERTIES
NameTypeDescription

normal

[ Object ]

Styles for normal cells.

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

background

[ string ]

background color of selected header cells.

rowHeader

[ Object ]

Styles for row's header cells.

PROPERTIES
NameTypeDescription

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
NameTypeDescription

background

[ string ]

background color of selected row's haed cells.

summary

[ Object ]

Styles for cells in the summary area.

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

border

[ string ]

border color of a inactive focus cell.

required

[ Object ]

Styles for required cells.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of required cells.

text

[ string ]

text color of required cells.

editable

[ Object ]

Styles for editable cells.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of the editable cells.

text

[ string ]

text color of the selected editable cells.

disabled

[ Object ]

Styles for disabled cells.

PROPERTIES
NameTypeDescription

background

[ string ]

background color of disabled cells.

text

[ string ]

text color of disabled cells.

invalid

[ Object ]

Styles for invalid cells.

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

row

[ Object ] = {}

The data for the new row

options

[ Object ] = {}

Options

PROPERTIES
NameTypeDescription

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
NameTypeDescription

data

Array

A list of new rows

appendTreeRow(row, options)

Insert the new tree row with specified data.

PARAMETERS
NameTypeDescription

row

[ Object ] = {}

The tree data for the new row

options

[ Object ] = {}

Options

PROPERTIES
NameTypeDescription

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
NameTypeDescription

rowKey

numberstring

The unique key of the row

checkAll(allPage)

Check all rows.

PARAMETERS
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

type

string

The modified type

collapse(rowKey, recursive)

Expand tree row.

PARAMETERS
NameTypeDescription

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
NameTypeDescription

rowKey

numberstring

The unique key of the row.

columnName

string

column name

disableColumn(columnName)

Disable the column identified by the column name.

PARAMETERS
NameTypeDescription

columnName

string

column name

disableRow(rowKey, withCheckbox)

Disable the row identified by the rowkey.

PARAMETERS
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

rowKey

numberstring

The unique key of the row.

columnName

string

column name

enableColumn(columnName)

Enable the column identified by the column name.

PARAMETERS
NameTypeDescription

columnName

string

column name

enableRow(rowKey, withCheckbox)

Enable the row identified by the rowKey.

PARAMETERS
NameTypeDescription

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
NameTypeDescription

rowKey

numberstring

The unique key of the row

expand(rowKey, recursive)

Expand tree row.

PARAMETERS
NameTypeDescription

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
NameTypeDescription

format

string

Format of export file

options

[ Object ]

Options for export

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

rowKey

columnName

value

focus(rowKey, columnName, setScroll)

Focus to the cell identified by given rowKey and columnName.

PARAMETERS
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

rowKey

numberstring

The unique key of the row

RETURNS:
{

Array.<Object>

} - the children rows

getColumn(columnName)

Return a specific column model.

PARAMETERS
NameTypeDescription

columnName

string

The name of the column

RETURNS:
{

Objectnull

} - A column model.

getColumnClassName(columnName)

Return a list of class names of specific column.

PARAMETERS
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

options

[ Object ] = {}

Options

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

rowKey

numberstring

The unique key of the row

targetIndex

number

Target index for moving

options

[ Object ] = {appended:false}

Options

PROPERTIES
NameTypeDescription

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
NameTypeDescription

eventName

string

custom event name

fn

function

event handler

on(eventName, fn)

Add custom event to grid.

PARAMETERS
NameTypeDescription

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
NameTypeDescription

row

[ Object ]

The data for the new row

options

[ Object ] = {}

Options

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

columnName

string

column name to add className

className

string

class name

removeRow(rowKey, options)

Remove the row identified by the specified rowKey.

PARAMETERS
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

rowKeys

Array.<RowKey>

The array of unique keys of the row

removeTreeRow(rowKey)

Remove the tree row identified by the specified rowKey.

PARAMETERS
NameTypeDescription

rowKey

numberstring

The unique key of the row

request(requestType, options)

Send request to server to sync data

PARAMETERS
NameTypeDescription

requestType

String

'createData|updateData|deleteData|modifyData'

options

object = {}

Options

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

data

Array

A list of new rows

options

[ Object ] = {}

Options

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

columnName

[ string ]

Target column name.

columnFilterState

[ Object ]

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

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

bodyHeight

number

The number of pixel

setColumnHeaders(columnsMap)

Set columns title

PARAMETERS
NameTypeDescription

columnsMap

Object

columns map to be change

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

setColumns(columns)

Set the list of column model.

PARAMETERS
NameTypeDescription

columns

Array

A new list of column model

setColumnValues(columnName, columnValue, checkCellState)

Set the all values in the specified column.

PARAMETERS
NameTypeDescription

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
NameTypeDescription

columnName

string

columnName

filterOpt

stringFilterOpt

filter type

setFrozenColumnCount(count)

Set the count of frozen columns.

PARAMETERS
NameTypeDescription

count

number

The count of columns to be frozen

setHeader(options)

Set options for header.

PARAMETERS
NameTypeDescription

options

Object

Options for header

PROPERTIES
NameTypeDescription

height

[ number ]

The height value

complexColumns

[ Array ]

The complex columns info

setHeight(height)

Set the height of the dimension.

PARAMETERS
NameTypeDescription

height

number

The height of the dimension

setPaginationTotalCount(totalCount)

Set total count of items for calculating the pagination.

PARAMETERS
NameTypeDescription

totalCount

number

total count

setPerPage(perPage, data)

Set number of rows per page and reload current page

PARAMETERS
NameTypeDescription

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
NameTypeDescription

params

Object

parameters to send to the server

setRow(rowKey, row)

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

PARAMETERS
NameTypeDescription

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
NameTypeDescription

rows

object

The object that contains all values in the row with rowKey.

setSelectionRange(range)

Select cells or rows by range

PARAMETERS
NameTypeDescription

range

Object

Selection range

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

width

number

The width of the dimension

showColumn(columnName, arguments)

Show columns

PARAMETERS
NameTypeDescription

columnName

arguments

string

Column names to show

sort(columnName, ascending, multiple)

Sort all rows by the specified column.

PARAMETERS
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

rowKey

numberstring

The unique key of the row

uncheckAll(allPage)

Uncheck all rows.

PARAMETERS
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

columnName

string

column name to unfilter

unsort(columnName)

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

PARAMETERS
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

exportFormat

'txt''csv''xlsx''xls'

Export format

exportOptions

Object

Used export options

instance

Grid

Current grid instance

afterFilter

Occurs after filtering

PROPERTIES
NameTypeDescription

instance

Grid

Current grid instance

columnName

string

Target column name

filterState

Object

Current filter state

afterPageMove

Occurs after moving the page.

PROPERTIES
NameTypeDescription

page

number

Target page number

instance

Grid

Current grid instance

afterSort

Occurs after sorting.

PROPERTIES
NameTypeDescription

sortState

Object

sort state

columnName

string

Target column name

instance

Grid

Current grid instance

afterUnfilter

Occurs after unfiltering

PROPERTIES
NameTypeDescription

instance

Grid

Current grid instance

columnName

string

Target column name

filterState

Object

Current filter state

afterUnsort

Occurs after unsorting.

PROPERTIES
NameTypeDescription

sortState

Object

sort state

columnName

string

Target column name

instance

Grid

Current grid instance

beforeChange

Occurs before one or more cells is changed

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

page

number

Target page number

instance

Grid

Current grid instance

beforeRequest

Occurs before the http request is sent

PROPERTIES
NameTypeDescription

xhr

XMLHttpRequest

Current XMLHttpRequest instance

instance

Grid

Current grid instance

beforeSort

Occurs before sorting.

PROPERTIES
NameTypeDescription

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
NameTypeDescription

instance

Grid

Current grid instance

columnName

string

Target column name

filterState

Object

Current filter state

beforeUnsort

Occurs before unsorting.

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

rowKey

numberstring

rowKey of the expanded row

instance

Grid

Current grid instance

deprecatedfilter

Occurs after filtering

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

instance

Grid

Current grid instance

onGridMounted

Occurs when the grid is mounted on DOM

PROPERTIES
NameTypeDescription

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
NameTypeDescription

instance

Grid

Current grid instance

scrollEnd

Occurs when scroll at the bottommost

PROPERTIES
NameTypeDescription

instance

Grid

Current grid instance

deprecatedsort

Occurs after sorting.

PROPERTIES
NameTypeDescription

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
NameTypeDescription

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
NameTypeDescription

instance

Grid

Current grid instance

Resizable