Grid(options)

new Grid(options)
grid.js, line 29

Grid public API

Parameters:
Name Type Description
options object
Properties
Name Type Attributes Default Description
data Array <optional>

Grid data for making rows.
header Object <optional>

Options object for header.

Properties
Name Type Attributes Default Description
height number <optional>
 35

The height of the header area.
complexColumns array <optional>

This options creates new parent headers of the multiple columns
which includes the headers of spcified columns, and sets up the hierarchy.
rowHeight string | number <optional>

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 <optional>
 27

The minimum height of each rows. When this value is larger than
the row's height, it set to the row's height.
bodyHeight string | number <optional>

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

Option object for all columns

Properties
Name Type Attributes Default Description
minWidth number <optional>
 50

Minimum width of each columns
resizable boolean <optional>
 true

If set to true, resize-handles of each columns
will be shown.
frozenCount number <optional>
 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 boolean <optional>
 1

The value of frozen border width.
When the frozen columns are created by "frozenCount" option, the frozen border width set.
copyOptions Object <optional>

Option object for clipboard copying

Properties
Name Type Attributes Description
useFormattedValue boolean <optional>

Whether to use formatted values or original values
as a string to be copied to the clipboard
useClientSort boolean <optional>
 true

If set to true, sorting will be executed by client itself
without server.
virtualScrolling boolean <optional>
 true

If set to true, use virtual-scrolling so that large
amount of data can be processed performantly.
editingEvent boolean <optional>
 'dblclick'

If set to 'click', editable cell in the view-mode will be
changed to edit-mode by a single click.
scrollX boolean <optional>
 true

Specifies whether to show horizontal scrollbar.
scrollY boolean <optional>
 true

Specifies whether to show vertical scrollbar.
showDummyRows boolean <optional>
 false

If set to true, empty area will be filled with dummy rows.
keyColumnName string <optional>
 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 <optional>
 false

If set to true, a handle for resizing height will be shown.
pagination Object <optional>
 null

Options for tui.component.Pagination.
If set to null or false, pagination will not be used.
selectionUnit string <optional>
 cell

The unit of selection on Grid. ('cell', 'row')
rowHeaders array <optional>

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 Attributes Description
type string <optional>

The type of the row header. ('rowNum', 'checkbox', 'radio')
title string <optional>

The title of the row header on the grid header area.
width number <optional>

The width of the row header.
template function <optional>

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 Attributes Default Description
name string

The name of the column.
ellipsis boolean <optional>
 false

If set to true, ellipsis will be used
for overflowing content.
align string <optional>
 left

Horizontal alignment of the column content.
Available values are 'left', 'center', 'right'.
valign string <optional>
 middle

Vertical alignment of the column content.
Available values are 'top', 'middle', 'bottom'.
className string <optional>

The name of the class to be used for all cells of
the column.
title string <optional>

The title of the column to be shown on the header.
width number <optional>

The width of the column. The unit is pixel. If this value
isn't set, the column's width is automatically resized.
minWidth number <optional>
 50

The minimum width of the column. The unit is pixel.
hidden boolean <optional>

If set to true, the column will not be shown.
resizable boolean <optional>

If set to false, the width of the column
will not be changed.
validation Object <optional>

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

Properties
Name Type Attributes Default Description
required boolean <optional>
 false

If set to true, the data of the column
will be checked to be not empty.
dataType boolean <optional>
 'string'

Specifies the type of the cell value.
Avilable types are 'string' and 'number'.
defaultValue string <optional>

The default value to be shown when the column
doesn't have a value.
formatter function <optional>

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 <optional>
 true

If set to true, the value of the cell
will be encoded as HTML entities.
ignored boolean <optional>
 false

If set to true, the value of the column will be
ignored when setting up the list of modified rows.
sortable boolean <optional>
 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.
onBeforeChange function <optional>

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

The function that will be
called after changing the value of the cell.
editOptions Object <optional>

The object for configuring editing UI.

Properties
Name Type Attributes Default Description
type string <optional>
 'text'

The string value that specifies
the type of the editing UI.
Available values are 'text', 'password', 'select', 'radio', 'checkbox'.
useViewMode boolean <optional>
 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 <optional>

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

The function that will be
called when a 'focus' event occurred on an input element
onBlur function <optional>

The function that will be
called when a 'blur' event occurred on an input element
onKeyDown function <optional>

The function that will be
called when a 'keydown' event occurred on an input element
prefix string | function <optional>

The HTML string to be
shown left to the input element. If it's a function, the return value will be used.
postfix string | function <optional>

The HTML string to be
shown right to the input element. If it's a function, the return value will be used.
converter function <optional>

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

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

Properties
Name Type Attributes Description
useFormattedValue boolean <optional>

Whether to use
formatted values or original values as a string to be copied to the clipboard
useListItemText boolean <optional>

Whether to use
concatenated text or original values as a string to be copied to the clipboard
customValue function <optional>

Whether to use
customized value from "customValue" callback or original values as a string to be copied to the clipboard
relations Array <optional>

Specifies relation between this and other column.

Properties
Name Type Attributes Description
targetNames array <optional>

Array of the names of target columns.
disabled function <optional>

If returns true, target columns
will be disabled.
editable function <optional>

If returns true, target columns
will be editable.
listItems function <optional>

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 Array <optional>
 '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 <optional>

Option for using tui-component

Properties
Name Type Attributes Description
name string <optional>

The name of the compnent to use
for this column
options Object <optional>

The options object to be used for
creating the component
summary Object <optional>

The object for configuring summary area.

Properties
Name Type Attributes Description
height number <optional>

The height of the summary area.
columnContent Object.<string, Object> <optional>

The object for configuring each column in the summary.
Sub options below are keyed by each column name.

Properties
Name Type Attributes Default Description
useAutoSummary boolean <optional>
 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 <optional>

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'.
footer Object <optional>

Deprecated: The object for configuring summary area. This option is replaced by "summary" option.

Properties
Name Type Attributes Description
height number <optional>

Deprecated: The height of the summary area.
columnContent Object.<string, Object> <optional>

Deprecated: The object for configuring each column in the summary.
Sub options below are keyed by each column name.

Properties
Name Type Attributes Default Description
useAutoSummary boolean <optional>
 true

Deprecated: 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 <optional>

Deprecated: 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'.

Methods

static applyTheme(presetName, extOptionsopt)
grid.js, line 1093

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

Parameters:
Name Type Attributes Description
presetName String

preset theme name. Available values are 'default', 'striped' and 'clean'.
extOptions Object <optional>

if exist, extend preset options with this object.

Properties
Name Type Attributes Description
grid Object <optional>

Styles for the grid (container)

Properties
Name Type Attributes Description
background String <optional>

Background color of the grid.
border number <optional>

Border color of the grid
text number <optional>

Text color of the grid.
selection Object <optional>

Styles for a selection layer.

Properties
Name Type Attributes Description
background String <optional>

Background color of a selection layer.
border String <optional>

Border color of a selection layer.
scrollbar Object <optional>

Styles for scrollbars.

Properties
Name Type Attributes Description
background String <optional>

Background color of scrollbars.
thumb String <optional>

Color of thumbs in scrollbars.
active String <optional>

Color of arrows(for IE) or
thumb:hover(for other browsers) in scrollbars.
cell Object <optional>

Styles for the table cells.

Properties
Name Type Attributes Description
normal Object <optional>

Styles for normal cells.

Properties
Name Type Attributes Description
background String <optional>

Background color of normal cells.
border String <optional>

Border color of normal cells.
text String <optional>

Text color of normal cells.
showVerticalBorder Boolean <optional>

Whether vertical borders of
normal cells are visible.
showHorizontalBorder Boolean <optional>

Whether horizontal borders of
normal cells are visible.
head Object <optional>

Styles for the head cells.

Properties
Name Type Attributes Description
background String <optional>

Background color of head cells.
border String <optional>

border color of head cells.
text String <optional>

text color of head cells.
showVerticalBorder Boolean <optional>

Whether vertical borders of
head cells are visible.
showHorizontalBorder Boolean <optional>

Whether horizontal borders of
head cells are visible.
selectedHead Object <optional>

Styles for selected head cells.

Properties
Name Type Attributes Description
background String <optional>

background color of selected haed cells.
text String <optional>

text color of selected head cells.
focused Object <optional>

Styles for a focused cell.

Properties
Name Type Attributes Description
background String <optional>

background color of a focused cell.
border String <optional>

border color of a focused cell.
focusedInactive Object <optional>

Styles for a inactive focus cell.

Properties
Name Type Attributes Description
border String <optional>

border color of a inactive focus cell.
required Object <optional>

Styles for required cells.

Properties
Name Type Attributes Description
background String <optional>

background color of required cells.
text String <optional>

text color of required cells.
editable Object <optional>

Styles for editable cells.

Properties
Name Type Attributes Description
background String <optional>

background color of the editable cells.
text String <optional>

text color of the selected editable cells.
disabled Object <optional>

Styles for disabled cells.

Properties
Name Type Attributes Description
background String <optional>

background color of disabled cells.
text String <optional>

text color of disabled cells.
invalid Object <optional>

Styles for invalid cells.

Properties
Name Type Attributes Description
background String <optional>

background color of invalid cells.
text String <optional>

text color of invalid cells.
currentRow Object <optional>

Styles for cells in a current row.

Properties
Name Type Attributes Description
background String <optional>

background color of cells in a current row.
text String <optional>

text color of cells in a current row.
evenRow Object <optional>

Styles for cells in even rows.

Properties
Name Type Attributes Description
background String <optional>

background color of cells in even rows.
text String <optional>

text color of cells in even rows.
dummy Object <optional>

Styles for dummy cells.

Properties
Name Type Attributes Description
background String <optional>

background color of dummy cells.
Example
var Grid = tui.Grid; // or require('tui-grid')

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

static getInstanceById(id) → {tui.Grid}
grid.js, line 1012

Returns an instance of the grid associated to the id.

Parameters:
Name Type Description
id number

ID of the target grid
Returns:
tui.Grid -
  • Grid instance
    var Grid = tui.Grid; // or require('tui-grid')

Grid.getInstanceById(id);

static setLanguage(localeCode, dataopt)
grid.js, line 1128

Set language

Parameters:
Name Type Attributes Description
localeCode string

Code to set locale messages and
this is the language or language-region combination (ex: en-US)
data object <optional>

Messages using in Grid
Example
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.'
     }
});

activateFocus()
grid.js, line 509

Makes view ready to get keyboard input.

addCellClassName(rowKey, columnName, className)
grid.js, line 785

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

Parameters:
Name Type Description
rowKey number | string

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.js, line 794

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

Parameters:
Name Type Description
rowKey number | string

The unique key of the row
className string

The css class name to add

appendRow(rowopt, optionsopt)
grid.js, line 669

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

Parameters:
Name Type Attributes Description
row object <optional>

The data for the new row
options object <optional>

Options

Properties
Name Type Attributes Description
at number <optional>

The index at which new row will be inserted
extendPrevRowSpan boolean <optional>

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

If set to true, move focus to the new row after appending

blur()
grid.js, line 516

Removes focus from the focused cell.

check(rowKey)
grid.js, line 531

Checks the row identified by the specified rowKey.

Parameters:
Name Type Description
rowKey number | string

The unique key of the row

checkAll()
grid.js, line 523

Checks all rows.

clear()
grid.js, line 553

Removes all rows.

copyToClipboard()
grid.js, line 969

Copy to clipboard

destroy()
grid.js, line 996

Destroys the instance.

disable()
grid.js, line 317

Disables all rows.

disableCheck(rowKey)
grid.js, line 609

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

Parameters:
Name Type Description
rowKey number | string

The unique keyof the row.

disableRow(rowKey)
grid.js, line 332

Disables the row identified by the rowkey.

Parameters:
Name Type Description
rowKey number | string

The unique key of the target row

enable()
grid.js, line 324

Enables all rows.

enableCheck(rowKey)
grid.js, line 601

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

Parameters:
Name Type Description
rowKey number | string

The unique key of the row

enableRow(rowKey)
grid.js, line 340

Enables the row identified by the rowKey.

Parameters:
Name Type Description
rowKey number | string

The unique key of the target row

findRows(conditions) → {array}
grid.js, line 960

Find rows by conditions

Parameters:
Name Type Description
conditions object

K-V object to find rows (K: column name, V: column value)
Returns:
array -

Row list

focus(rowKey, columnName, isScrollableopt)
grid.js, line 471

Sets focus on the cell identified by the specified rowKey and columnName.

Parameters:
Name Type Attributes Default Description
rowKey number | string

The unique key of the row
columnName string

The name of the column
isScrollable boolean <optional>
 false

If set to true, the view will scroll to the cell element.

focusAt(rowIndex, columnIndex, isScrollableopt)
grid.js, line 482

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

Parameters:
Name Type Attributes Default Description
rowIndex number | string

The index of the row
columnIndex string

The index of the column
isScrollable boolean <optional>
 false

If set to true, the view will scroll to the cell element.

focusIn(rowKey, columnName, isScrollableopt)
grid.js, line 492

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

Parameters:
Name Type Attributes Default Description
rowKey number | string

The unique key of the row
columnName string

The name of the column
isScrollable boolean <optional>
 false

If set to true, the view will scroll to the cell element.

focusInAt(rowIndex, columnIndex, isScrollableopt)
grid.js, line 502

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

Parameters:
Name Type Attributes Default Description
rowIndex number | string

The index of the row
columnIndex string

The index of the column
isScrollable boolean <optional>
 false

If set to true, the view will scroll to the cell element.

getAddOn(name) → {instance}
grid.js, line 696

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

getCheckedRowKeys(isJsonStringopt) → {Array|string}
grid.js, line 618

Returns a list of the rowKey of checked rows.

Parameters:
Name Type Attributes Default Description
isJsonString Boolean <optional>
 false

If set to true, return value will be converted to JSON string.
Returns:
Array | string -
  • A list of the rowKey. (or JSON string of the list)

getCheckedRows(useJsonopt) → {Array|string}
grid.js, line 630

Returns a list of the checked rows.

Parameters:
Name Type Attributes Default Description
useJson Boolean <optional>
 false

If set to true, return value will be converted to JSON string.
Returns:
Array | string -
  • A list of the checked rows. (or JSON string of the list)

getColumns() → {Array}
grid.js, line 640

Returns a list of the column model.

Returns:
Array -
  • A list of the column model.

getColumnValues(columnName, isJsonStringopt) → {Array|string}
grid.js, line 361

Returns a list of all values in the specified column.

Parameters:
Name Type Attributes Default Description
columnName string

The name of the column
isJsonString boolean <optional>
 false

It set to true, return value will be converted to JSON string.
Returns:
Array | string -
  • A List of all values in the specified column. (or JSON string of the list)

getElement(rowKey, columnName) → {jQuery}
grid.js, line 416

Returns the jquery object of the cell identified by the rowKey and columnName.

Parameters:
Name Type Description
rowKey number | string

The unique key of the row
columnName string

The name of the column
Returns:
jQuery -
  • The jquery object of the cell element

getFocusedCell() → {number|string|string}
grid.js, line 399

Returns data of currently focused cell

Returns:
  • number -

    rowKey - The unique key of the row

  • string -

    columnName - The name of the column

  • string -

    value - The value of the cell

getIndexOfColumn(columnName) → {number}
grid.js, line 841

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) → {number}
grid.js, line 832

Returns the index of the row indentified by the rowKey.

Parameters:
Name Type Description
rowKey number | string

The unique key of the row
Returns:
number -
  • The index of the row

getModifiedRows(optionsopt) → {Object}
grid.js, line 656

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 Attributes Description
options Object <optional>

Options

Properties
Name Type Attributes Default Description
checkedOnly boolean <optional>
 false

If set to true, only checked rows will be considered.
withRawData boolean <optional>
 false

If set to true, the data will contains
the row data for internal use.
rowKeyOnly boolean <optional>
 false

If set to true, only keys of the changed
rows will be returned.
ignoredColumns Array <optional>

A list of column name to be excluded.
Returns:
Object -
  • Object that contains the result list.

getPagination() → {tui.component.Pagination}
grid.js, line 849

Returns an instance of tui.component.Pagination.

Returns:
tui.component.Pagination

getRow(rowKey, isJsonStringopt) → {Object|string}
grid.js, line 371

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

Parameters:
Name Type Attributes Default Description
rowKey number | string

The unique key of the target row
isJsonString boolean <optional>
 false

If set to true, return value will be converted to JSON string.
Returns:
Object | string -
  • The object that contains all values in the row. (or JSON string of the object)

getRowAt(index, isJsonStringopt) → {Object|string}
grid.js, line 381

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

Parameters:
Name Type Attributes Default Description
index number

The index of the row
isJsonString Boolean <optional>
 false

If set to true, return value will be converted to JSON string.
Returns:
Object | string -
  • The object that contains all values in the row. (or JSON string of the object)

getRowCount() → {number}
grid.js, line 389

Returns the total number of the rows.

Returns:
number -
  • The total number of the rows

getRows() → {Array}
grid.js, line 750

Returns a list of all rows.

Returns:
Array -
  • A list of all rows

getRowSpanData(rowKey, columnName) → {Object}
grid.js, line 823

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

Parameters:
Name Type Description
rowKey number | string

The unique key of the row
columnName string

The name of the column
Returns:
Object -
  • Row span data

getSortState() → {Object}
grid.js, line 775

Get state of the sorted column in rows

Returns:
Object -

Sorted column's state

getValue(rowKey, columnName, isOriginalopt) → {number|string}
grid.js, line 351

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

Parameters:
Name Type Attributes Description
rowKey number | string

The unique key of the target row.
columnName string

The name of the column
isOriginal boolean <optional>

It set to true, the original value will be return.
Returns:
number | string -
  • The value of the cell

hideColumn(…arguments)
grid.js, line 896

Hide columns

Parameters:
Name Type Attributes Description
arguments string <repeatable>

Column names to hide

isModified() → {boolean}
grid.js, line 687

Returns true if there are at least one row modified.

Returns:
boolean -
  • True if there are at least one row modified.

prependRow(rowopt, optionsopt)
grid.js, line 679

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

Parameters:
Name Type Attributes Description
row object <optional>

The data for the new row
options object <optional>

Options

Properties
Name Type Attributes Description
focus boolean <optional>

If set to true, move focus to the new row after appending

refreshLayout()
grid.js, line 872

Refresh the layout view. Use this method when the view was rendered while hidden.

removeCellClassName(rowKey, columnName, className)
grid.js, line 804

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

Parameters:
Name Type Description
rowKey number | string

The unique key of the row
columnName string

The name of the column
className string

The css class name to be removed

removeCheckedRows(showConfirm) → {boolean}
grid.js, line 580

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, optionsopt)
grid.js, line 566

Removes the row identified by the specified rowKey.

Parameters:
Name Type Attributes Description
rowKey number | string

The unique key of the row
options boolean | object <optional>

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

Properties
Name Type Attributes Description
removeOriginalData boolean <optional>

If set to true, the original data will be removed.
keepRowSpanData boolean <optional>

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.js, line 813

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

Parameters:
Name Type Description
rowKey number | string

The unique key of the row
className string

The css class name to be removed

resetColumnWidths()
grid.js, line 879

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

resetData(data)
grid.js, line 444

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

Parameters:
Name Type Description
data Array

A list of new rows

restore()
grid.js, line 704

Restores the data to the original data.
(Original data is set by setData

selection(range)
grid.js, line 983

Select cells or rows by range

Parameters:
Name Type Description
range object

Selection range

Properties
Name Type Attributes Description
start array <optional>

Index info of start selection (ex: [rowIndex, columnIndex])
end array <optional>

Index info of end selection (ex: [rowIndex, columnIndex])

setBodyHeight(value)
grid.js, line 461

Sets the height of body-area.

Parameters:
Name Type Description
value number

The number of pixel

setColumns(columns)
grid.js, line 720

Sets the list of column model.

Parameters:
Name Type Description
columns Array

A new list of column model

setColumnValues(columnName, columnValue, isCheckCellStateopt)
grid.js, line 436

Sets the all values in the specified column.

Parameters:
Name Type Attributes Default Description
columnName string

The name of the column
columnValue number | string

The value to be set
isCheckCellState Boolean <optional>
 true

If set to true, only editable and not disabled cells will be affected.

setData(data, callback)
grid.js, line 453

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

setFooterColumnContent(columnName, contents)
grid.js, line 916

Sets the HTML string of given column summary.

Parameters:
Name Type Description
columnName string

column name
contents string

HTML string
Deprecated:
  • since version 2.5.0 and is replaced by "setSummaryColumnContent" API

setFrozenColumnCount(count)
grid.js, line 712

Sets the count of frozen columns.

Parameters:
Name Type Description
count number

The count of columns to be frozen

setHeight(height)
grid.js, line 865

Set the height of the dimension.

Parameters:
Name Type Description
height number

The height of the dimension

setSummaryColumnContent(columnName, contents)
grid.js, line 906

Sets the HTML string of given column summary.

Parameters:
Name Type Description
columnName string

column name
contents string

HTML string

setValue(rowKey, columnName, columnValue)
grid.js, line 426

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

Parameters:
Name Type Description
rowKey number | string

The unique key of the row
columnName string

The name of the column
columnValue number | string

The value to be set

setWidth(width)
grid.js, line 857

Set the width of the dimension.

Parameters:
Name Type Description
width number

The width of the dimension

showColumn(…arguments)
grid.js, line 887

Show columns

Parameters:
Name Type Attributes Description
arguments string <repeatable>

Column names to show

sort(columnName, ascendingopt)
grid.js, line 760

Sorts all rows by the specified column.

Parameters:
Name Type Attributes Description
columnName string

The name of the column to be used to compare the rows
ascending boolean <optional>

Whether the sort order is ascending.
If not specified, use the negative value of the current order.

uncheck(rowKey)
grid.js, line 546

Unchecks the row identified by the specified rowKey.

Parameters:
Name Type Description
rowKey number | string

The unique key of the row

uncheckAll()
grid.js, line 538

Unchecks all rows.

unSort()
grid.js, line 767

Unsorts all rows. (Sorts by rowKey).

use(name, options) → {tui.Grid}
grid.js, line 730

Create 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:
tui.Grid -
  • This instance.

validate() → {Array.<Object>}
grid.js, line 951

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

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

Events

beforeRequest
addon/net.js, line 684

Occurs before the http request is sent

Type:
Properties:
Name Type Description
instance Grid

Current grid instance

check
model/data/row.js, line 121

Occurs when a checkbox in row header is checked

Type:
Properties:
Name Type Description
rowKey number

rowKey of the checked row
instance Grid

Current grid instance

click
view/container.js, line 108

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

Type:
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

dblclick
view/container.js, line 135

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

Type:
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

deleteRange
model/data/rowList.js, line 1048

Occurs when cells are deleted by 'del' key

Type:
Properties:
Name Type Description
columnNames Array

columName list of deleted cell
rowKeys Array

rowKey list of deleted cell
instance Grid

Current grid instance

errorResponse
addon/net.js, line 817

Occurs after the response event, if the response is Error

Type:
Properties:
Name Type Description
httpStatus number

HTTP status
requestType string

Request type
requestParameter string

Request parameters
instance Grid

Current grid instance

failResponse
addon/net.js, line 773

Occurs after the response event, if the result is false

Type:
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

focusChange
model/focus.js, line 307

Occurs when focused cell is about to change

Type:
Properties:
Name Type Description
rowKey number

rowKey of the target cell
columnName number

columnName of the target cell
prevRowKey number

rowKey of the currently focused cell
prevColumnName number

columnName of the currently focused cell
instance Grid

Current grid instance

mousedown
view/container.js, line 216

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

Type:
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

mouseout
view/container.js, line 185

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

Type:
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

mouseover
view/container.js, line 162

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

Type:
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

reponse
addon/net.js, line 740

Occurs when the response is received from the server

Type:
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

selection
model/selection.js, line 866

Occurs when selecting cells

Type:
Properties:
Name Type Description
range Object

Range of selection

Properties
Name Type Description
start Array

Info of start cell (ex: [rowKey, columName])
end Array

Info of end cell (ex: [rowKey, columnName])
instance Grid

Current grid instance

successReponse
addon/net.js, line 755

Occurs after the response event, if the result is true

Type:
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

uncheck
model/data/row.js, line 130

Occurs when a checkbox in row header is unchecked

Type:
Properties:
Name Type Description
rowKey number

rowKey of the unchecked row
instance Grid

Current grid instance