Class

new Grid(options)grid.jsline 207

Grid public API

PARAMETERS

Name

Type

Description

options

Object

PROPERTIES

Name

Type

Description

data

[ Array ]

Grid data for making rows.

header

[ Object ]

Options object for header.

PROPERTIES

Name	Type	Description
height	number = 40	The height of the header area.
complexColumns	[ Array ]	This options creates new parent headers of the multiple columns which includes the headers of spcified columns, and sets up the hierarchy.

virtualScrolling

boolean = false

If set to true, use virtual-scrolling so that large
amount of data can be processed performantly. When using this option that sets true, the rowHeight option
must set value.

rowHeight

[ stringnumber ]

The height of each rows. The default value is 'auto',
the height of each rows expands to dom's height. If set to number, the height is fixed.

minRowHeight

number = 40

The minimum height of each rows. When this value is larger than
the row's height, it set to the row's height.

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 = minRowHeight

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 = true	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.

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

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 = null

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.

pagination

Object = null

Options for tui.Pagination.
If set to null or false, pagination will not be used.

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', 'radio')
title	[ string ]	The title of the row header on the grid header area.
width	[ number ]	The width of the row header.
template	[ function ]	Template function which returns the content(HTML) of the row header. This function takes a parameter an K-V object as a parameter to match template values.

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.

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.

title

[ string ]

The title 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	string = 'string'	Specifies the type of the cell value. Avilable types are 'string' and 'number'.

defaultValue

[ string ]

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

formatter

[ function ]

The function that formats the value of the cell.
The retrurn value of the function will be shown as the value of the cell.

useHtmlEntity

boolean = true

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.

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.

editOptions

[ Object ]

The object for configuring editing UI.

PROPERTIES

Name	Type	Description
type	string = 'text'	The string value that specifies the type of the editing UI. Available values are 'text', 'password', 'select', 'radio', 'checkbox'.
useViewMode	boolean = true	If set to true, default mode of the cell will be the 'view-mode'. The mode will be switched to 'edit-mode' only when user double click or press 'ENTER' key on the cell. If set to false, the cell will always show the input elements as a default.
listItems	[ Array ]	Specifies the option items for the 'select', 'radio', 'checkbox' type. The item of the array must contain properties named 'text' and 'value'. (e.g. {text: 'option1', value: 1}, {...})
onFocus	[ function ]	The function that will be called when a 'focus' event occurred on an input element
onBlur	[ function ]	The function that will be called when a 'blur' event occurred on an input element
onKeyDown	[ function ]	The function that will be called when a 'keydown' event occurred on an input element
prefix	[ stringfunction ]	The HTML string to be shown left to the input element. If it's a function, the return value will be used.
postfix	[ stringfunction ]	The HTML string to be shown right to the input element. If it's a function, the return value will be used.
converter	[ function ]	The function whose return value (HTML) represents the UI of the cell. If the return value is falsy(null\|undefined\|false), default UI will be shown.

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.

component

[ Object ]

Option for using tui-component

PROPERTIES

Name	Type	Description
name	[ string ]	The name of the compnent to use for this column
options	[ Object ]	The options object to be used for creating the component

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 paramater 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 paramater 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.

Static Methods

applyTheme(presetName, extOptions)grid.jsline 1310

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.

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.

head

[ Object ]

Styles for head cells.

PROPERTIES

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

selectedHead

[ Object ]

Styles for selected head cells.

PROPERTIES

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

rowHead

[ Object ]

Styles for row's head cells.

PROPERTIES

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

selectedRowHead

[ Object ]

Styles for selected row's head 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.

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.

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.

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.

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'
        }
    }
});

getInstanceById(id)grid.jsline 1191

Returns an instance of the grid associated to the id.

PARAMETERS

Name	Type	Description
id	number	ID of the target grid

RETURNS:

{

Grid

} - Grid instance<br>var Grid = tui.Grid; // or require('tui-grid')

setLanguage(localeCode, data)grid.jsline 1345

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()grid.jsline 534: Makes view ready to get keyboard input.

addCellClassName(rowKey, columnName, className)grid.jsline 844

Adds 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

addRowClassName(rowKey, className)grid.jsline 853

Adds 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)grid.jsline 696

Inserts 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 ]	Tree row key of the parent which appends given rows
offset	[ number ]	Tree offset from first sibling

blur()grid.jsline 541: Removes focus from the focused cell.

check(rowKey)grid.jsline 556

Checks the row identified by the specified rowKey.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row

checkAll()grid.jsline 548: Checks all rows.

clear()grid.jsline 578: Removes all rows.

collapse(rowKey, recursive)grid.jsline 1116

Expands tree row

PARAMETERS

Name	Type	Description
rowKey	numberstring	row key
recursive	boolean	true for recursively expand all descendant

RETURNS:

{

Array.<undefined>

} - children or descendant of given row

collapseAll()grid.jsline 1123: Collapses all tree row

copyToClipboard()grid.jsline 1069: Copy to clipboard

destroy()grid.jsline 1175: Destroys the instance.

disable()grid.jsline 339: Disables all rows.

disableCheck(rowKey)grid.jsline 634

Disables the row identified by the spcified rowKey to not be abled to check.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique keyof the row.

disableRow(rowKey)grid.jsline 354

Disables the row identified by the rowkey.

PARAMETERS

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

enable()grid.jsline 346: Enables all rows.

enableCheck(rowKey)grid.jsline 626

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

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row

enableRow(rowKey)grid.jsline 362

Enables the row identified by the rowKey.

PARAMETERS

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

expand(rowKey, recursive)grid.jsline 1099

Expands tree row

PARAMETERS

Name	Type	Description
rowKey	numberstring	row key
recursive	boolean	true for recursively expand all descendant

RETURNS:

{

Array.<undefined>

} - children or descendant of given row

expandAll()grid.jsline 1106: Expands all tree row

findRows(conditions)grid.jsline 1062

Finds 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(function(row) {
    return (/b/ig.test(row.artist) && row.price > 10000);
});

focus(rowKey, columnName, isScrollable)grid.jsline 496

Sets focus on 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
isScrollable	boolean = false	If set to true, the view will scroll to the cell element.

focusAt(rowIndex, columnIndex, isScrollable)grid.jsline 507

Sets focus on the cell at the specified index of row and column.

PARAMETERS

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

focusIn(rowKey, columnName, isScrollable)grid.jsline 517

Sets 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
isScrollable	boolean = false	If set to true, the view will scroll to the cell element.

focusInAt(rowIndex, columnIndex, isScrollable)grid.jsline 527

Sets 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
isScrollable	boolean = false	If set to true, the view will scroll to the cell element.

getAddOn(name)grid.jsline 723

Returns the instance of specified AddOn.

PARAMETERS

Name	Type	Description
name	string	The name of the AddOn

RETURNS:

{

instance

} - addOn - The instance of the AddOn

getAncestors(rowKey)grid.jsline 1132

Gets the ancestors of the row which has the given row key

PARAMETERS

Name	Type	Description
rowKey	numberstring	row key

RETURNS:

{

Array.<TreeRow>

} - the ancestor rows

getCheckedRowKeys(isJsonString)grid.jsline 643

Returns a list of the rowKey of checked rows.

PARAMETERS

Name	Type	Description
isJsonString	boolean = false	If set to true, return value will be converted to JSON string.

RETURNS:

{

Arraystring

} - A list of the rowKey. (or JSON string of the list)

getCheckedRows(useJson)grid.jsline 655

Returns a list of the checked rows.

PARAMETERS

Name	Type	Description
useJson	boolean = false	If set to true, return value will be converted to JSON string.

RETURNS:

{

Arraystring

} - A list of the checked rows. (or JSON string of the list)

getChildren(rowKey)grid.jsline 1159

Gets the children of the row which has the given row key

PARAMETERS

Name	Type	Description
rowKey	numberstring	row key

RETURNS:

{

Array.<TreeRow>

} - the children rows

getColumns()grid.jsline 665: Returns a list of the column model.
RETURNS:
{
Array
} - A list of the column model.

getColumnValues(columnName, isJsonString)grid.jsline 383

Returns a list of all values in the specified column.

PARAMETERS

Name	Type	Description
columnName	string	The name of the column
isJsonString	boolean = false	It set to true, return value will be converted to JSON string.

RETURNS:

{

Arraystring

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

getDepth(rowKey)grid.jsline 1168

Gets the depth of the row which has the given row key

PARAMETERS

Name	Type	Description
rowKey	numberstring	row key to test

RETURNS:

{

number

} - the depth

getDescendants(rowKey)grid.jsline 1141

Gets the descendants of the row which has the given row key

PARAMETERS

Name	Type	Description
rowKey	numberstring	row key

RETURNS:

{

Array.<TreeRow>

} - the descendant rows

getElement(rowKey, columnName)grid.jsline 438

Returns the jquery object 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:

{

jQuery

} - The jquery object of the cell element

getFocusedCell()grid.jsline 421: Returns data of currently focused cell
RETURNS:
{
number
} - rowKey - The unique key of the row

getIndexOfColumn(columnName)grid.jsline 900

Returns 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)grid.jsline 891

Returns 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)grid.jsline 681

Returns 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.

getPagination()grid.jsline 908: Returns an instance of tui.Pagination.
RETURNS:
{
tui.<Pagination>
}

getParent(rowKey)grid.jsline 1150

Gets the parent of the row which has the given row key

PARAMETERS

Name	Type	Description
rowKey	numberstring	row key

RETURNS:

{

TreeRow

} - the parent row

getRow(rowKey, isJsonString)grid.jsline 393

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

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the target row
isJsonString	boolean = false	If set to true, return value will be converted to JSON string.

RETURNS:

{

Objectstring

} - The object that contains all values in the row. (or JSON string of the object)

getRowAt(index, isJsonString)grid.jsline 403

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

PARAMETERS

Name	Type	Description
index	number	The index of the row
isJsonString	boolean = false	If set to true, return value will be converted to JSON string.

RETURNS:

{

Objectstring

} - The object that contains all values in the row. (or JSON string of the object)

getRowCount()grid.jsline 411: Returns the total number of the rows.
RETURNS:
{
number
} - The total number of the rows

getRows()grid.jsline 809: Returns a list of all rows.
RETURNS:
{
Array
} - A list of all rows

getRowSpanData(rowKey, columnName)grid.jsline 882

Returns 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

getSortState()grid.jsline 834: Gets state of the sorted column in rows
RETURNS:
{
Object
} - Sorted column's state

getSummaryValues(columnName)grid.jsline 994

Returns 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

{
   column1: {
       sum: 1000,
       avg: 200,
       max: 300,
       min: 50,
       cnt: 5
   },
   column2: {
       sum: 2000,
       avg: 300,
       max: 600,
       min: 80,
       cnt: 5
   }
}

getValue(rowKey, columnName, isOriginal)grid.jsline 373

Returns 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
isOriginal	[ boolean ]	It set to true, the original value will be return.

RETURNS:

{

numberstring

} - The value of the cell

hideColumn(arguments)grid.jsline 955

Hides columns

PARAMETERS

Name	Type	Description
arguments	string	Column names to hide

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

prependRow(row, options)grid.jsline 706

Inserts 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

refreshLayout()grid.jsline 931: Refreshs the layout view. Use this method when the view was rendered while hidden.

removeCellClassName(rowKey, columnName, className)grid.jsline 863

Removes 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)grid.jsline 605

Removes 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.

removeRow(rowKey, options)grid.jsline 591

Removes the row identified by the specified rowKey.

PARAMETERS

Name

Type

Description

rowKey

numberstring

The unique key of the row

options

[ booleanobject ]

Options. If the type is boolean, this value is equivalent to
options.removeOriginalData.

PROPERTIES

Name	Type	Description
removeOriginalData	[ boolean ]	If set to true, the original data will be removed.
keepRowSpanData	[ boolean ]	If set to true, the value of the merged cells will not be removed although the target is first cell of them.

removeRowClassName(rowKey, className)grid.jsline 872

Removes 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

resetColumnWidths()grid.jsline 938: Resets the width of each column by using initial setting of column models.

resetData(data)grid.jsline 466

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

PARAMETERS

Name	Type	Description
data	Array	A list of new rows

restore()grid.jsline 731: Restores the data to the original data.
(Original data is set by setData

selection(range)grid.jsline 1083

Selects 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)

setBodyHeight(value)grid.jsline 483

Sets the height of body-area.

PARAMETERS

Name	Type	Description
value	number	The number of pixel

setColumns(columns)grid.jsline 771

Sets the list of column model.

PARAMETERS

Name	Type	Description
columns	Array	A new list of column model

EXAMPLES

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

setColumnTitles(columnsMap)grid.jsline 779

Set columns title

PARAMETERS

Name	Type	Description
columnsMap	string	columns map to be change

setColumnValues(columnName, columnValue, isCheckCellState)grid.jsline 458

Sets 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
isCheckCellState	boolean = true	If set to true, only editable and not disabled cells will be affected.

setData(data, callback)grid.jsline 475

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

PARAMETERS

Name	Type	Description
data	Array	A list of new rows
callback	function	The function that will be called when done.

deprecatedsetFooterColumnContent(columnName, contents)grid.jsline 1008

Sets the HTML string of given column summary.

PARAMETERS

Name	Type	Description
columnName	string	column name
contents	string	HTML string

setFrozenColumnCount(count)grid.jsline 757

Sets the count of frozen columns.

PARAMETERS

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

setHeader(options)grid.jsline 741

Sets 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)grid.jsline 924

Sets the height of the dimension.

PARAMETERS

Name	Type	Description
height	number	The height of the dimension

setSummaryColumnContent(columnName, content)grid.jsline 966

Sets 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
content	stringobject	HTML string or options object.

setValue(rowKey, columnName, columnValue)grid.jsline 448

Sets 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
columnValue	numberstring	The value to be set

setWidth(width)grid.jsline 916

Sets the width of the dimension.

PARAMETERS

Name	Type	Description
width	number	The width of the dimension

showColumn(arguments)grid.jsline 946

Shows columns

PARAMETERS

Name	Type	Description
arguments	string	Column names to show

sort(columnName, ascending)grid.jsline 819

Sorts 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.

uncheck(rowKey)grid.jsline 571

Unchecks the row identified by the specified rowKey.

PARAMETERS

Name	Type	Description
rowKey	numberstring	The unique key of the row

uncheckAll()grid.jsline 563: Unchecks all rows.

unSort()grid.jsline 826: Unsorts all rows. (Sorts by rowKey).

use(name, options)grid.jsline 789

Creates an specified AddOn and use it on this instance.

PARAMETERS

Name	Type	Description
name	string	The name of the AddOn to use.
options	Object	The option objects for configuring the AddON.

RETURNS:

{

Grid

} - This instance.

validate()grid.jsline 1043

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

RETURNS:

{

Array.<Object>

} - An array of error object

EXAMPLES

// return value example
[
    {
        rowKey: 1,
        errors: [
            {
                columnName: 'c1',
                errorCode: 'REQUIRED'
            },
            {
                columnName: 'c2',
                errorCode: 'REQUIRED'
            }
        ]
    },
    {
        rowKey: 3,
        errors: [
            {
                columnName: 'c2',
                errorCode: 'REQUIRED'
            }
        ]
    }
]

Events

beforeRequestnet.jsline 705

Occurs before the http request is sent

PROPERTIES

Name	Type	Description
instance	Grid	Current grid instance

checkrow.jsline 128

Occurs when a checkbox in row header is checked

PROPERTIES

Name	Type	Description
rowKey	number	rowKey of the checked row
instance	Grid	Current grid instance

clickcontainer.jsline 119

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	jQueryEvent	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

collapsedtreeRowList.jsline 468

Occurs when the row having child rows is collapsed

PROPERTIES

Name	Type	Description
rowKey	numberstring	rowKey of the collapsed row
descendantRowKeys	Array.<undefined>	rowKey list of all descendant rows
instance	Grid	Current grid instance

collapsedAlltreeRowList.jsline 486: Occurs when all rows having child rows are collapsed

dblclickcontainer.jsline 146

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	jQueryEvent	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

deleteRangerowList.jsline 1102

Occurs when cells are deleted by 'del' key

PROPERTIES

Name	Type	Description
columnNames	Array	columName list of deleted cell
rowKeys	Array	rowKey list of deleted cell
instance	Grid	Current grid instance

errorResponsenet.jsline 844

Occurs after the response event, if the response is Error

PROPERTIES

Name	Type	Description
httpStatus	number	HTTP status
requestType	string	Request type
requestParameter	string	Request parameters
instance	Grid	Current grid instance

expandedtreeRowList.jsline 409

Occurs when the row having child rows is expanded

PROPERTIES

Name	Type	Description
rowKey	numberstring	rowKey of the expanded row
descendantRowKeys	Array.<undefined>	rowKey list of all descendant rows
instance	Grid	Current grid instance

expandedAlltreeRowList.jsline 427: Occurs when all rows having child rows are expanded

failResponsenet.jsline 801

Occurs after the response event, if the result is false

PROPERTIES

Name	Type	Description
httpStatus	number	HTTP status
requestType	string	Request type
requestParameter	string	Request parameter
responseData	Object	response data
instance	Grid	Current grid instance

focusChangefocus.jsline 325

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

mousedowncontainer.jsline 227

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	jQueryEvent	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

mouseoutcontainer.jsline 196

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	jQueryEvent	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

mouseovercontainer.jsline 173

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	jQueryEvent	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

responsenet.jsline 768

Occurs when the response is received from the server

PROPERTIES

Name	Type	Description
httpStatus	number	HTTP status
requestType	string	Request type
requestParameter	string	Request parameters
responseData	Object	response data
instance	Grid	Current grid instance

selectionselection.jsline 890

Occurs when selecting cells

PROPERTIES

Name	Type	Description
range	Object	Range of selection
instance	Grid	Current grid instance

successResponsenet.jsline 783

Occurs after the response event, if the result is true

PROPERTIES

Name	Type	Description
httpStatus	number	HTTP status
requestType	string	Request type
requestParameter	string	Request parameter
responseData	Object	response data
instance	Grid	Current grid instance

uncheckrow.jsline 137

Occurs when a checkbox in row header is unchecked

PROPERTIES

Name	Type	Description
rowKey	number	rowKey of the unchecked row
instance	Grid	Current grid instance

Resizable

INSTANCE METHODS

INSTANCE METHODS

STATIC METHODS

INSTANCE METHODS

EVENTS

new Grid(options)grid.jsline 207

PARAMETERS

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

PROPERTIES

Static Methods

applyTheme(presetName, extOptions)grid.jsline 1310

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

EXAMPLES

getInstanceById(id)grid.jsline 1191

PARAMETERS

RETURNS:

setLanguage(localeCode, data)grid.jsline 1345

PARAMETERS

EXAMPLES

Instance Methods

activateFocus()grid.jsline 534

addCellClassName(rowKey, columnName, className)grid.jsline 844

PARAMETERS

addRowClassName(rowKey, className)grid.jsline 853

PARAMETERS

appendRow(row, options)grid.jsline 696

PARAMETERS

PROPERTIES

blur()grid.jsline 541

check(rowKey)grid.jsline 556

PARAMETERS

checkAll()grid.jsline 548

clear()grid.jsline 578

collapse(rowKey, recursive)grid.jsline 1116

PARAMETERS

RETURNS:

collapseAll()grid.jsline 1123

copyToClipboard()grid.jsline 1069

destroy()grid.jsline 1175

disable()grid.jsline 339

disableCheck(rowKey)grid.jsline 634