GridBase

GridBase is the base class of GridView and TreeView.

Signature:

export declare abstract class GridBase

Remarks

All properties and methods of GridBase can be called only from subclasses that inherit it.

[subclass]

GridView

TreeView

Events

Constructors

Properties

Methods

Construct Desc

(constructor)

Constructs a new instance of the GridBase class

Events Desc

onCellButtonClicked

Called when the user clicks the action button inside a data cell.

Type - (grid: GridBase, index: CellIndex, column: [GridColumn] (/refs/Interface/GridColumn)) => void

Remarks:

[Parameter list]

grid - GridBase control

index - Location information of the item containing the data cell

column - Column connected to data cell

Example:

gridView.onCellButtonClicked = function (grid, index, col) {
 console.log(index);
};

onCellClicked

A callback indicating that a grid cell has been clicked

Type - (grid: GridBase, clickData: ClickData) => void

Remarks:

[Parameter list]

grid - GridBase control

clickData - Clicked cell information

Example:

gridView.onCellClicked = function (grid, clickData) {
 console.log(clickData);
}

onCellDblClicked

A callback indicating that a grid cell has been double-clicked.

Type - (grid: GridBase, clickData: ClickData) => void

Remarks:

[Parameter list]

grid - GridBase control

clickData - Clicked cell information

Example:

gridView.onCellDblClicked = function (grid, clickData) {
 console.log(clickData);
}

onCellEdited

A callback notifying that one field value of the edit item being modified or added has been edited.

Type - (grid: GridBase, itemIndex: number, row: number, field: number) => void

Remarks:

[Parameter list]

grid - GridBase control

itemIndex - The order of the row being edited

row - Unique number of the row being edited

field - Index of the field just edited

Example:

gridView.onCellEdited = function (grid, itemIndex, row, field) {
 console.log('Edit done! at ' + itemIndex + ', ' + field);
}

onCellItemClicked

A callback notifying that an element contained in a grid cell has been clicked.

Type - (grid: GridBase, index: CellIndex, clickData: [ClickData] (/refs/Interface/ClickData)) => boolean

Remarks:

If you handle a click within this event, you must return false to not execute the element's default action.

[Parameter list]

grid - GridBase control

index - Location information of the clicked data cell

clickData - Clicked cell information

Example:

gridView.onCellItemClicked = function (grid, index, clickData) {
 console.log(clickData);
 return true;
}

onCellPasting

A callback that determines what to paste into a cell.

Type - (grid: GridBase, index: CellIndex, value: any, editResult: EditResult) => boolean

Remarks:

[Parameter list]

grid - GridBase control

index - Location information of the clicked data cell

value - the data value being pasted

[Return value] - If false is returned, the paste will not be performed in that cell.

Example:

gridView.onCellPasting = function (grid, index, value) {
 if (value === 'hello') {
 return false;
 }
};

onColumnCheckedChanged

A callback that notifies the user's click on the column header checkbox.

Type - (grid: GridBase, column: GridColumn, checked: boolean) = > void

Remarks:

[Parameter list]

grid - GridBase control

column - column object

checked - Checked or not

Example:

gridView.onColumnCheckedChanged = function (grid, col, chk) {
 console.log(col.name + "was checked as: " + chk);
};

onColumnPropertyChanged

Warning: This API is now obsolete.

Replaced with callback GridBase.onLayoutPropertyChanged that notifies that the width, displayIndex, and visible property values of the column properties have changed.

Type - (grid: GridBase, column: GridColumn, property: string, newValue : any, oldValue: any) => void

Remarks:

[Parameter list]

grid - GridBase control

column - Information on the changed column

property - Changed displayWidth, displayIndex, or visible properties of the column

value - The changed value is passed.

Example:

gridView.onColumnPropertyChanged = function (grid, column, property, newValue, oldValue) {
 
 console.log(column + "s props werer changed!");
}

onCommandStackChanged

Callback notifying that the CommandStack has changed

Type - (grid: GridBase, undoable: boolean, redoable: boolean) => void

Remarks:

[Parameter list]

grid - GridBase control

undoable - back

redoable - forward

Example:

gridView.onCommandStackChanged = function (grid, undoable, redoable) {
 if (undoable === true) {
 console.log('You can undo now!');
 }
};

onContextMenuItemClicked

A callback notifying the click of a context menu item added via setContextMenu()

Type - (grid: GridBase, item: PopupMenuItem, clickData: [ClickData] (/refs/Interface/ClickData)) => void

Remarks:

[Parameter list]

grid - GridBase control

item - information about the menu item that was clicked

clickData - Information about the clicked item

Example:

gridView.onContextMenuItemClicked = function (grid, item, clickData) {
 console.log(clickData);
};

onContextMenuPopup

A callback that determines the display of the ContextMenu with its coordinates

Type - (grid: GridBase, x: number, y: number, clickData: ClickData, menu: string, rightClick: boolean) => boolean | string

Remarks:

[Parameter list]

grid - GridBase control

x - x-coordinate value at which ContextMenu was called

y - y coordinate value where ContextMenu was called

clickData - Information about the clicked item

menu - menuName

rightClick - Whether to click the right button

[Return value] - If false is returned, the context menu is not displayed. Also, if menuName is returned, the corresponding menu is displayed.

Example:

gridView.onContextMenuPopup = function (grid, x, y, clickData, menu, rightClick) {
 console.log(clickData);
};

onCopy

Callback to decide copy with control + c keys

Type - (grid: GridBase, selection: Selection | Selection[], event: ClipboardEvent) => boolean

Remarks:

[Parameter list]

grid - GridBase control

selection - selection information

event - Event information (ClipboardEvent (opens in a new tab))

[Return value] - If false is returned, copying is canceled.

Example:

gridView.onCopy = function(grid, selection, event) {
 let data = JSON.stringify(grid.getSelectionData());
 if (data) {
  data = 'onCopy\r\n' + data;
  if (window.clipboardData) {
  window.clipboardData.setData("Text", data);
  } else {
  event.clipboardData.setData('text/plain', data);
  }
 }
 return false;
}

onCurrentChanged

A callback that notifies the change in position of the grid's focus cell.

Type - (grid: GridBase, newIndex: CellIndex) => void

Remarks:

Just before change, call onCurrentChanging

[Parameter list]

grid - GridBase control

newIndex - Changed cell location information

Example:

gridView.onCurrentChanged = function (grid, newIndex) {
 console.log(newIndex);
}

onCurrentChanging

A callback that determines the change in position of the grid's focus cell.

Type - (grid: GridBase, oldIndex: CellIndex, newIndex: [CellIndex] (/refs/Interface/CellIndex)) => boolean

Remarks:

After change, call onCurrentChanged.

[Parameter list]

grid - GridBase control

oldIndex - Cell location information before change

newIndex - Cell location information to be changed

[Return value] - If the callback function explicitly returns false, current will not change.

Example:

gridView.onCurrentChanging = function (grid, oldIndex, newIndex) {
 console.log(oldIndex);
 console.log(newIndex);
 // return false; If you do this, the location does not change.
};

onCurrentRowChanged

A callback notifying that the position of a row of data has changed.

Type - (grid: GridBase, oldRow: number, newRow: number) => void

Remarks:

onCurrentChanged occurs when the itemIndex of the selected cell changes. However, in the case of onCurrentRowChanged, it occurs when the index of the data row of the selected cell changes.

[Parameter list]

grid - GridBase control

oldRow - Position of the data row before change

newRow - Position of the data row after change. If -1, it is a new row or dataProvider is empty.

Example:

gridView.onCurrentRowChanged = function (grid, oldRow, newRow) {
 console.log("oldRow => ", oldRow, "newRow => ", newRow);
};

onCut

Callback to determine cut with control + x keys

Type - (grid: GridBase, selection: Selection | Selection[], event: ClipboardEvent) => boolean

Remarks:

[Parameter list]

grid - GridBase control

selection - selection information

event - Event information (ClipboardEvent (opens in a new tab))

[Return value] - If false is returned, the cut is cancelled.

onDataLoadComplated

A callback that fires after the grid refresh is complete after executing dataProvider.setRows().

Type - (grid: GridBase) => void

Remarks:

[Parameter list]

grid - GridBase control

Example:

gridView.onDataLoadComplated = function (grid) {
 console.log("Grid DataLoadComplated")
};

onEditCanceled

A callback notifying that editing is canceled when the user presses the ESCAPE key while editing or when cancel() is called.

Type - (grid: GridBase, index: CellIndex) => void

Remarks:

[Parameter list]

grid - GridBase control

index - Location information of the data cell whose editing was canceled

Example:

gridView.onEditCanceled = function (grid, index) {
 console.log("Edit Canceled at " + index.column);
}

onEditChange

A callback notifying that the value of an item has changed due to the user entering a key, etc.

Type - (grid: GridBase, index: CellIndex, value: any) = > void

Remarks:

[Parameter list]

grid - GridBase control

index - Location information of the currently focused cell

value - the data value of the cell being edited

Example:

gridView.onEditChange = function (grid, index, value) {
 console.log("grid.onEditChange driven, " + index.column + ' at ' + index.dataRow + ' was replaced by value: ' + value);
}

onEditCommit

A callback that determines whether user input is reflected in the cell.

Type - (grid: GridBase, index: CellIndex, oldValue: any, newValue : any) => boolean

Remarks:

Occurs when you move from the cell being edited to another cell or call commitEditor(). It does not occur when changed to user code such as setValue().

[Parameter list]

grid - GridBase control

index - Location information of the changed cell

oldValue - Data value of the cell before editing

newValue - Data value of the cell after editing

[Return value] - If false is returned, it is not reflected in the cell.

Example:

gridView.onEditCommit = function (grid, index, oldValue, newValue) {
 if (newValue === '') {
 return false;
 }
 console.log(oldValue + 'was changed to ' + newValue);
}

onEditRowChanged

A callback that notifies the row that the value changed by user input has been reflected in the row.

Type - (grid: GridBase, itemIndex: number, row: number, field: number, oldValue: any, newValue: any) => void

Remarks:

If pasteOptions.noEditEvent is true, it does not occur.

[Parameter list]

grid - GridBase control

itemIndex - Order of changed rows

row - Unique number of the changed row

field - Index of the changed field

oldValue - Data value of the cell before editing

newValue - Data value of the cell after editing

Example:

gridView.onEditRowChanged = function (grid, itemIndex, dataRow, field, oldValue, newValue) {
 let v = grid.getValue(itemIndex, field);
 console.log("onEditRowChanged, " + field + ": " + oldValue + " => " + newValue);
};

onEditRowPasted

A callback indicating that something has been pasted into a grid cell.

Type - (grid: GridBase, itemIndex: number, row: number, fields: number[], oldValues: any[], newValues : any[]) => void

Remarks:

When pasting multiple rows, refer to onRowsPasted

[Parameter list]

grid - GridBase control

itemIndex - Order of changed rows

row - Unique number of the changed row

fields - indexes of fields

oldValues - Data values of the cell before editing

newValues - Data values of the cell after editing

Example:

gridView.onEditRowPasted = function (grid, itemIndex, row, fields, oldValues, newValues) {
 console.log('Row pasted!: {' + newValues.join() + '}');
};

onEditSearch

A callback indicating that a search has been performed

Type - (grid: GridBase, index: CellIndex, text: string) = > void

Remarks:

Occurs when the conditions searchLenght and searchDelay are met in SearchCellEditor do. Or, it occurs when you press Ctrl+Enter or Enter key.

[Parameter list]

grid - GridBase control

index - Changed cell location information

text - the value entered into the cell

Example:

gridView.onEditSearch = function (grid, index, text) {
 console.log(text + 'was searched!');
}

onErrorClicked

A callback notifying that an error window in the grid has been clicked.

Type - (grid: GridBase, error: string) => void

Remarks:

[Parameter list]

grid - GridBase control

error - error message

Example:

gridView.onErrorClicked = function (grid, error) {
 console.log(error);
}

onFiltering

Callback to determine filtering

Type - (grid: GridBase, column: DataColumn) => boolean

Remarks:

[Parameter list]

grid - GridBase control column - Dispatched when the filter selector is displayed. It is not transmitted when changing the active status of the filter.

[Return value] - Default value: true, specifies whether to perform filtering. If false is returned, filtering is canceled.

Example:

gridView.onFiltering = function (grid, column) {
 if (column && column.name === "column") {
 return false; // Prevents specific columns from being filtered using the filter selector.
 }
 return true;
}

onFilteringChanged

A callback notifying that filters are set in a column and that the state of the filter has changed.

Type - (grid: GridBase, column: GridColumn, filter: [ColumnFilter] (/refs/Interface/ColumnFilter)) => void

Remarks:

[Parameter list]

grid - GridBase control

column - Filtered column information

filter - information about the filter

reset - whether to click reset

Example:

gridView.onFilteringChanged = function (grid, column, filter) {
 console.log('Filter changed!');
}

onGetEditValue

A callback containing the cell position and editing result when cell editing is completed.

Type - (grid: GridBase, index: CellIndex, editResult: [EditResult] (/refs/Interface/EditResult)) => boolean

Remarks:

In the case of DropDownCellEditor, SearchCellEditor, and MultiCheckCellEditor, the value corresponding to the labels is output to editResult.text, and the value corresponding to the values is output to editResult.value.

In the case of DateCellEditor, a value formatted with the editor's datetimeFormat is output to editResult.text, and a Date object is output to editResult.value.

In the case of other editors, the same values are output for text and value.

If you return boolean, GridBase.onEditCommit will not be called.

It is output in the form of EditResult.

[Parameter list]

grid - GridBase control

index - Location information of the edited cell

editResult - A simple object with the text and value of the edited cell as properties; the output value varies depending on the type of cell editor.

[Return value] - If false is returned, it is not reflected in the cell.

Example:

gridView.onGetEditValue = function (grid, index, editResult) {
 console.log(editResult);
}

onGridActivated

A callback indicating that the grid has been selected

Type - (grid: GridBase) => void

Remarks:

It is best to use the grid by storing it in a global variable.

[Parameter list]

grid - GridBase control

Example:

gridView.onGridActivated = function (grid) {
 alert('Selected!');
}

onHideEditor

A callback to notify you that editing is complete and the editor has disappeared.

Type - (grid: GridBase, index: CellIndex) => void

Remarks:

[Parameter list]

grid - GridBase control

index - Location information of the edited cell

Example:

gridView.onHideEditor = function (grid, index) {
 console.log("onHideEditor:" + index.itemIndex + "," + index.column);
}

onItemAllChecked

A callback notifying that the user clicked on the header of the checkBar to select or deselect all, or entered checkAll true / false to select or deselect all.

Type - (grid: GridBase, checked: boolean) => void

Remarks:

[Parameter list]

grid - GridBase control

checked - true if checked, false if unchecked

Example:

gridView.onItemAllChecked = function (grid, checked) {
 console.log('All checked as ' + checked);
};

onItemChecked

A callback notifying that the user changed a check by clicking a checkbox in checkBar or calling checkItem.

Type - (grid: GridBase, itemIndex: number, checked: boolean) => void

Remarks:

[Parameter list]

grid - GridBase control

itemIndex - Order of checked data rows

checked - If checked, true is output, if unchecked, false is output.

Example:

gridView.onItemChecked = function (grid, itemIndex, checked) {
 console.log('Checked as ' + checked + ' at ' + itemIndex);
};

onItemEditCancel

A callback that determines whether the user wants to cancel row editing.

Type - (grid: GridBase, itemIndex: number, state: string) => boolean

Remarks:

[Parameter list]

grid - GridBase control

itemIndex - Order of rows for which editing was canceled

state - The state of the unedited row. updating, inserting, appending are returned.

[Return value] - Default value: true, if false is returned, row edit cancellation is canceled. (Continued editing)

Example:

gridView.onItemEditCancel = function (grid, itemIndex, state) {
 console.log(state);
 if (itemIndex % 5 === 0) {
 return false;
 }
}

onItemEditCanceled

A callback indicating that the user canceled row editing.

[Parameter list]

grid - GridBase control

itemIndex - Order of rows for which editing was canceled

state - the state of the unedited row

Type - (grid: GridBase, itemIndex: number, state: string) => void

Example:

gridView.onItemEditCanceled = function (grid, itemIndex, state) {
 console.log(state);
}

onItemsChecked

A callback notifying that the user changed a check by clicking a checkbox in checkBar or calling checkItem.

Type - (grid: GridBase, items: number[], checked: boolean) => void

Remarks:

[Parameter list]

grid - GridBase control

items - Order of checked data rows

checked - true: checked, false: unchecked

Example:

gridView.onItemsChecked = function (grid, items, checked){
 console.log(items.join() + ' are checked as ' + checked);
}

onKeyDown

A callback that determines keystrokes

Type - (grid: GridBase, event: KeyboardEvent) => boolean

Remarks:

Occurs when KeyDown occurs. This occurs continuously while a key is being input.

[Parameter list]

grid - GridBase control

event - KeyboardEvent

[Return value] - Returns false when key input is prohibited/

Example:

gridView.onKeyDown = function (grid, event) {
 console.log('You pressed... ' + event);
}

onKeyPress

A callback to indicate that a key is being entered

Type - (grid: GridBase, event: KeyboardEvent) => void

Remarks:

Occurs when KeyPress is performed. This occurs continuously while a key is being input.

[Parameter list]

grid - GridBase control

event - KeyboardEvent

Example:

gridView.onKeypress = function (grid, event) {
 console.log('You are pressing... ' + event);
}

onKeyUp

A callback notifying that a key has been entered.

Type - (grid: GridBase, event: KeyboardEvent) => void

Remarks:

Occurs when KeyUp occurs.

[Parameter list]

grid - GridBase control

event - KeyboardEvent

Example:

gridView.onKeyUp = function (grid, event) {
 console.log('You pressed... ' + event);
}

onLayoutCollapsed

Callback notifying that the group layout has been collapsed

Type - (grid: GridBase, layout: CellLayoutGroupItem) => void

Remarks:

[Parameter list] grid - GridBase control

layout - Collapsed group layout

Example:

gridView.onLayoutCollapsed = function(grid, layout) {
 console.log("Layout Collapsed => " + layout.name)
}

onLayoutCollapse

Callback to determine group layout collapse

Type - (grid: GridBase, layout: CellLayoutGroupItem) => boolean

Remarks:

If you return false, folding is canceled. [Parameter list]

grid - GridBase control

layout - collapsing group layout

Example:

gridView.onLayoutCollapsing = function(grid, layout) {
 if (layout.name === "group0") {
 return false;
 }
}

onLayoutExpanded

Callback notifying that the group layout has been expanded

Type - (grid: GridBase, layout: CellLayoutGroupItem) => void

Remarks:

[Parameter list] grid - GridBase control

layout - group layout to expand

Example:

gridView.onLayoutExpanded = function(grid, layout) {
 console.log("Layout Expanded => " + layout.name)
}

onLayoutExpanding

Callback that determines group layout expansion

Type - (grid: GridBase, layout: CellLayoutGroupItem) => boolean

Remarks:

If you return false, expansion is canceled. [Parameter list]

grid - GridBase control

layout - group layout to expand

Example:

gridView.onLayoutExpanding = function(grid, layout) {
 if (layout.name === "group0") {
 return false;
 }
}

onLayoutPropertyChanged

A callback notifying that the displayWidth, displayIndex, and visible property values among the layout properties have changed.

Type - (grid: GridBase, layout: CellLayoutItem, property: string, newValue : any, oldValue: any) => void

Remarks:

[Parameter list]

grid - GridBase control

layout - Information on changed layout

property - Changed displayWidth, displayIndex, or visible properties of the column

newValue - The value is passed after change.

oldValue - The value before change is transmitted.

Example:

gridView.onLayoutPropertyChanged = function (grid, layout, property, newValue, oldValue) {
 
 console.log(layout + "s props werer changed!");
}

onLeftPosChanged

A callback notifying that the position of the horizontal scroll bar has changed.

Type - (grid: GridBase, pos: number) => void

Remarks:

[Parameter list]

grid - GridBase control

pos - Left position of grid when scrolling

Example:

gridView.onLeftPosChanged = function (grid, pos) {
 console.log(pos + " was changed!");
}

onMenuItemClicked

Callback notifying that the added pop-up menu item is clicked

Type - (grid: GridBase, item: PopupMenuItem, clickData: [ClickData] (/refs/Interface/ClickData)) => void

Remarks:

If callback is specified in MenuItem, it is not called.

[Parameter list]

grid - GridBase control

item - MenuItem object

clickData - Information about the clicked item

Example:

gridView.onMenuItemClicked = function (grid, item, clickData) {
 console.log(item.label + "was clicked.");
};

onPaste

A callback that determines what to paste into the grid.

Type - (grid: GridBase, index: CellIndex, event: ClipboardEvent) = > boolean

Remarks:

[Parameter list]

grid - GridBase control

index - Cell location information

event - Event information (ClipboardEvent (opens in a new tab))

[Return value] - If false is returned, the paste is canceled.

Example:

gridView.onPaste = function (grid, index, event){
 console.log("Pasting Starts!");
}

onPasted

A callback indicating that something has been pasted into the grid.

Type - (grid: GridBase) => void

Remarks:

This does not occur when the input editor is displayed.

[Parameter list]

grid - GridBase control

Example:

gridView.onPasted = function (grid){
 console.log("Pasted!");
}

onRowInserting

A callback that determines whether the user inserts a new row by pressing the Insert key or adds a row by pressing the down arrow on the last row.

Type - (grid: GridBase, itemIndex: number, dataRow: number) => boolean

Remarks:

[Parameter list]

grid - GridBase control

itemIndex - Order of row insertion position

dataRow - Unique id of the row insertion location.

[Return value] - Message to be displayed to the user when adding rows is prohibited.

Example:

gridView.onRowInserting = function (grid, itemIndex, dataRow) {
 console.log('Inserted: ' + dataRow + ' at ' + itemIndex);
}

onRowsDeleting

When the user presses Ctrl+Del or deletes with deleteSelection(), a callback that determines the actual deletion.

[Parameter list]

grid - GridBase control

rows - an array of data row sequences of the rows to be deleted

[Return value] - If a non-null value is returned, the specified text is displayed and deletion is canceled.

Type - (grid: GridBase, rows: number[]) => boolean

Example:

gridView.onRowsDeleting = function (grid, rows) {
 console.log('Deleted: ' + rows.join());
}

onRowsPasted

Callback to indicate that multiple rows have been pasted

Type - (grid: GridBase, items: number[]) => void

Remarks:

[Parameter list]

grid - GridBase control

items - the order in the grid of the pasted rows

Example:

gridView.onRowsPasted = function (grid, items) {
 console.log('Rows pasted!: ' + items.join());
};

onScrollToBottom

A callback that is called when the last row is displayed in the grid by the user operating the keyboard, scroll bar, etc.

Type - (grid: GridBase) => void

Remarks:

[Parameter list]

grid - GridBase control

Example:

gridView.onScrollToBottom = function (grid) {
 var data = {"SearchKey":"searchData"},
 $.ajax({
 url:"/loadData.do",
 data: data,
 type:"post",
 async:false;
 success: function (data, textStatus) {
 grid.fillJsonData(data.dataList, {fillMode:"append"});
 }
 })
});

onSearchCellButtonClick

A callback notifying that a button was clicked in SearchCellEditor

Type - (grid: GridBase, index: CellIndex, text: string) = > void

Remarks:

[Parameter list]

grid - GridBase control

index - Clicked cell location information

text - the value entered into the cell

Example:

gridView.onSearchCellButtonClick = function (grid, index, text) {
 console.log(text + 'button was clicked!');
}

onSelectionAdded

Warning: This API is now obsolete.

Scheduled to be removed after version 2.6.0

Callback notifying that a new selection area has been added

Type - (grid: GridBase, selection: Selection) => void

Remarks:

Information on the selection area being changed can be found with the getSelectionData function. Does not occur when GridBase.getSelection().style is SelectionStyle.NONE.

[Parameter list]

grid - GridBase control

selection - selection information

Example:

gridView.onSelectionAdded = function (grid, selection) {
 console.log(selection);
}

onSelectionChanged

A callback notifying that the user has changed the size of the selection using the mouse or keyboard.

Type - (grid: GridBase, selection: Selection) => void

Remarks:

Information on the selection area being changed can be found with the getSelectionData function. Does not occur when GridBase.displayOptions.selectionStyle is SelectionStyle.NONE.

[Parameter list]

grid - GridBase control selection - Selection information

Example:

gridView.onSelectionChanged = function (grid) {
 console.log('Selection changed!');
}

onSelectionCleared

A callback notifying that the existing selection area has been removed when the user changes the selection area with the mouse or keyboard.

Type - (grid: GridBase) => void

Remarks:

This does not occur if there is no existing selection area.

[Parameter list]

grid - GridBase control

Example:

gridView.onSelectionCleared = function (grid) {
 console.log('Selection cleared');
}

onSelectionEnded

Warning: This API is now obsolete.

Scheduled to be removed after version 2.6.0

A callback to notify the user of completion of changes to the selection with the mouse.

Type - (grid: GridBase, selection: Selection) => void

Remarks:

Information on the changed selection area can be found with the getSelection function, and data on the selection area can be known with the getSelectionData function. [Parameter list]

grid - GridBase control selection - Selection information

Example:

gridView.onSelectionEnded = function (grid) {
 let cells = grid.getSelectionData();
 console.log(cells);
}

onShowEditCommand

A callback that determines whether to display the editCommand displayed on mobile.

Type - (grid: GridBase, index: CellIndex) => boolean

Remarks:

[Parameter list]

grid - GridBase control

index - Location information of the cell where the editor is to be opened.

[Return value] - If false is returned, the EditCommand is not displayed.

onShowEditor

A callback that determines the display of the editor opened for each cell.

Type - (grid: GridBase, index: CellIndex, props: any, attrs : any) => boolean

Remarks:

[Parameter list]

grid - GridBase control

index - Location information of the cell where the editor is to be opened.

props - Cell Editor configuration information

attrs - Internal editor element attributes. Values that the user can arbitrarily specify.

[Return value] - If false is returned, the Editor is not displayed.

Example:

gridView.onShowEditor = function (grid, index, props, attrs) {
 console.log("onShowEditor:" + index.itemIndex + "," + index.column);
 if (index.column == "OrderID") {
  props.textCase = 'upper';
 }
}

onShowHeaderTooltip

A callback indicating that the tooltip for the column header has been displayed.

Type - (grid: GridBase, column: GridColumn, value: any, layout : CellLayoutItem) => string

Remarks:

[Parameter list]

grid - GridBase control

column - If the column on which the tooltip will be displayed is a GroupHeader, it is the first column of the group.

value - The value to be displayed in the tooltip. By default, column header text is transmitted.

layout - Layout of the column where the tooltip will be displayed.

[Return value] - The value to display in the tooltip. If nothing is returned, the Tooltip is not displayed.

Example:

gridView.onShowHeaderTooltip = function (grid, column, value, layout) {
 return 'header-tooltip: ' + value;
}

onShowTooltip

A callback to indicate that a data cell's tooltip has been displayed.

Type - (grid: GridBase, index: CellIndex, value: any) = > boolean | string

Remarks:

[Parameter list]

grid - GridBase control.

index - Cell location information in the area where the mouse pointer is located

value - the data where the mouse pointer is located

[Return value] - The value to display in the tooltip. If nothing is returned, the Tooltip is not displayed.

Example:

gridView.onShowTooltip = function (grid, index, value) {
 if (index % 7 === 0) {
 return '7-multiple Row!'
 }
}

onSorting

Callback to determine sorting

Type - (grid: GridBase, fields: number[], directions: string[]) => boolean

Remarks:

[Parameter list]

grid - GridBase control

fields - list of fields to sort by

direction - List of sorting methods for each field

[Return value] - If false is returned, sorting is canceled.

Example:

gridView.onSorting = function (grid) {
 if (fields. length > 5) {
 return false;
 }
}

onSortingChanged

A callback indicating that sorting has occurred.

Type - (grid: GridBase) => void

Remarks:

[Parameter list]

grid - GridBase control

Example:

gridView.onSortingChanged = function (grid) {
 console.log('Sorted! ');
}

onTopIndexChanged

A callback notifying that the position of the vertical scroll bar has changed.

Type - (grid: GridBase, itemIndex: number) => void

Remarks:

[Parameter list]

grid - GridBase control

itemIndex - The itemIndex value displayed at the top of the grid when scrolling.

Example:

gridView.onTopIndexChanged = function (grid, idx) {
 console.log(idx + "was changed!");
}

onTopIndexChanging

Callback called when gridView.topIndex changes

Type - (grid: GridBase, currentTop: number, delta: number, focusing: boolean, adjust: boolean) => number

Remarks:

Used to move by the value specified by the user when scrolling. You should not return more than the value shown on the page.

[Parameter list]

grid - GridBase control

currentTop - topIndex before change

delta - change value

focusing - true if topIndex changes due to focus change

adjust - true to adjust position within the grid

[Return value] - If number is returned, topIndex is moved by the corresponding value.

Example:

var userSetTopItem = false;
grid.onTopIndexChanging = function(_grid, current, delta, focusing, adjust) {
// When using mergeCell like a block, scrolling is also used to move in block units.
// In the case of setTopItem, since it cannot be distinguished in the event, a value that can be distinguished externally must be given.
// In case of rowGrouping, the code below cannot be used as is.
 
 var fcnt = _grid.fixedOptions.rowCount;
 // When moving to the first or last row, or when correcting the position within the grid, if 'null' is returned, it moves by the delta value to which it was originally intended to be moved.
 if (current + delta + _grid.fullItemCount() + fcnt >= _grid.getItemCount() || current + delta === 0 || (adjust && !focusing)) {
 console.log(current, delta, `scroll bottom or Top or adjust = ${adjust}`);
 return;
 }
 
 var top = current + delta; // topIndex where you want the grid to move
 var items = _grid.getMergedItems(top + fcnt, "merge column", true, true); // Items of block to move
 var curItems = _grid.getMergedItems(current + fcnt, "merge column", true, true); // Items of current top block
 
 if (delta < 0 || top === items[0] + fcnt || userSetTopItem) { // When scrolling up or moving to the top with fixedRow or when the user setsTopItem
 top = items[0]; // The first row of the block is topIndex
 } else { // When scrolling down
 top = items[0] === curItems[0] ? items[items.length - 1] + 1 : top = items[0]
 }
 
 return top - current - fcnt;
}
 
function setTop(index) {
 userSetTopItem = true;
 grid.setTopItem(index);
 userSetTopItem = false;
}

onValidateColumn

A callback that determines the result of user verification through Javascript when completing cell editing and moving to another cell.

Type - (grid: GridBase, column: DataColumn, inserting: boolean, value : any, itemIndex: number, dataRow: number) => ValidationError | undefined

Remarks:

If there is a problem with the corresponding column value, the verification error and error message are sent to the grid as a return value.

If an object containing level and message values is passed to the grid, verification is judged to have failed.

It must be returned in the form ValidationError.

[Parameter list]

grid - GridBase control

column - column object

inserting - true: adding column, false: modifying column

value - the value of the entered field

itemIndex - Order of cell-edited rows

dataRow - Unique number of the cell-edited row.

[Return Value] - ValidationError

Example:

gridView.onValidateColumn = function (grid, column, inserting, value, itemIndex, dataRow) {
 if (column.name != "Knock Knock") {
 return {
 level: 'warning';
 messsage: "It's a dad joke! Do not " + JSON.stringify(column);
 }
 }
};

onValidateRow

Callback to determine row-wise user verification results via Javascript

Type - (grid: GridBase, itemIndex: number, dataRow: number, inserting: boolean, values: any[]) => ValidationError

Remarks:

If there is a problem with the values in the row, the verification error and error message are sent to the grid as a return value.

levelIf an object containing and message values is passed to the grid, verification is judged to have failed.

It must be returned in the form ValidationError.

[Parameter list]

grid - GridBase control

itemIndex - Order of rows to verify

dataRow - Unique number of the row being verified

inserting - true: adding column, false: modifying column

values - Values of the entered fields

[Return Value] - ValidationError

Example:

gridView.onValidateRow = function (grid, itemIndex, dataRow, inserting, values) {
 if (dataRow % 2 === 0) {
 return {
 level: 'info';
 messsage: "even!";
 }
 }
};

onValidationFail

Callback that occurs when validation fails

Type - (grid: GridBase, itemIndex: number, column: GridColumn, error : ValidationError) => ValidationError

Remarks:

Separate error handling is possible in the callback function, and when an err object is returned, its own validation message is displayed and is not displayed in other cases.

If an object containing level and message values is passed to the grid, verification is judged to have failed.

It must be returned in the form ValidationError.

[Parameter list]

grid - GridBase control

itemIndex - Index of the row being verified

column - column object

error - verification result

[Return Value] - ValidationError

Example:

gridView.onValidationFail = function (grid, itemIndex, column, err) {
 console.log("onValidationFail:" + itemIndex + "," + JSON.stringify(column) + "," + JSON.stringify(err));
 if (column.name != "Mortal") {
 var editValue = grid.getEditValue();
 err.message = "The entered "+editValue+" is an invalid value";
 return err;
 }
}

onWheel

Callback notifying that a Wheel Event has occurred

Type - (grid: GridBase, event: WheelEvent) => boolean

Remarks:

Occurs when you turn the Mouse Wheel.

[Parameter list]

grid - GridBase control

event - WheelEvent

[Return value] - Return false to ignore the Wheel Event/

Example:

gridView.onWheel = function (grid, event) {
 console.log('You wheeled... ' + event);
}

Properties Desc

checkBar

Configuration model for grid checkbars

Type - CheckBar

Remarks:

Returns a CheckBar object. You can get or set CheckBar properties.

Example:

gridView.checkBar.visibleOnly = true;

copyOptions

Configuration model for copying to clipboard

Type - CopyOptions

Remarks:

CopyOptions Returns an object. You can get or set the properties of CopyOptions.

Example:

gridView.copyOptions.singleMode = true;

dataDropOptions

Configuration model related to data drag and drop

Type - DataDropOptions

Remarks:

Returns dataDropOptions. You can get or set the properties of DataDropOptions.

Example:

gridView.dataDropOptions.dropMode = 'copy';

disabled

The grid does not respond to mouse/keyboard events.

Type - boolean

Remarks:

It can be changed by assigning a value.

Example:

gridView.disabled = true;

displayOptions

Setting model for display information managed at grid level

Type - DisplayOptions

Remarks:

DisplayOptions Returns an object. You can get or set the properties of DisplayOptions.

Example:

gridView.displayOptions.columnResizable = true;

editOptions

Settings model for data editing

Type - EditOptions

Remarks:

EditOptions Returns an object. You can get or set the properties of EditOptions.

Example:

gridView.editOptions.deletable = true;

editorOptions

Settings model for editors

Type - EditorOptions

Remarks:

EditorOptions Returns an object. You can get or set the properties of EditorOptions.

Example:

gridView.editorOptions.yearDisplayFormat = "Year {Y}";

filteringOptions

Settings model for data filtering

Type - FilteringOptions

Remarks:

FilteringOptions Returns an object. You can get or set the properties of FilteringOptions.

Example:

gridView.filteringOptions.enabled = false;

filterPanel

Type - FilterPanel

fixedOptions

Setting model for fixed rows and columns in grid

Type - FixedOptions

Remarks:

FixedOptions Returns an object. You can get or set properties of FixedOptions.

Example:

gridView.fixedOptions.colCount = 2;

footer

Configuration model for the first footer

Type - GridFooter

Remarks:

Returns a GridFooter object. You can get or set the properties of GridFooter.

Example:

gridView.footer.styleName = 'custom-footer-1';

footers

Configuration model for footers

Type - GridFooterCollection

Remarks:

Returns a collection object of GridFooter. [GridFooterCollection](/refs/You can get or set the properties of Interface/GridFooterCollection).

Example:

gridView.footers.visible = false;

formatOptions

Setting model for conversion format of data field values

Type - FormatOptions

Remarks:

FormatOptions Returns an object. You can get or set the properties of FormatOptions.

Example:

gridView.formatOptions.datetimeFormat = 'yyyy-mm-dd';

header

Configuration model for the header area of the grid

Type - GridHeader

Remarks:

Returns a GridHeader object. You can get or set the properties of GridHeader.

Example:

gridView.header.showTooltip = true;

headerSummaries

Collection setting model for Header Summary displayed in grid header area

Type - HeaderSummaryCollection

Remarks:

Returns a collection object of HeaderSummary. Retrieves the property of HeaderSummaryCollection.

Example:

gridView.headerSummaries.visible = false;

headerSummary

Setting model for the first Header Summary displayed in the grid header area

Type - HeaderSummary

Remarks:

HeaderSummary Returns an object. You can get or set the properties of HeaderSummary.

Example:

gridView.headerSummary.visible = false;

hideDeletedRows

Whether or not deleted rows set in the grid are hidden

Type - boolean

Remarks:

It can be changed by assigning a value.

Example:

gridView.hideDeletedRows = true;

mobileOptions

Mobile-specific configuration model

Type - MobileOptions

Remarks:

Returns mobileOptions. You can get or set the properties of MobileOptions.

Example:

gridView.mobileOptions.longTapDuration = false;

onGridFocusChanged

A callback that notifies the grid that it has or loses focus

[Parameter List] grid - GridBase control focused - Whether it is focused event - an event object

Type - (grid: GridBase, focused: boolean, event: Event) => void

pasteOptions

Configuration model for pasting data from the clipboard

Type - PasteOptions

Remarks:

PasteOptions Returns an object. You can get or set the properties of PasteOptions.

Example:

gridView.pasteOptions.enabled = false;

redoing

Is it possible to rerun in the current state?

Type - boolean

Example:

gridView.redoing = false

rowIndicator

Configuration model for grid indicators

Type - RowIndicator

Remarks:

Returns a RowIndicator object. You can get or set the RowIndicator property.

Example:

gridView.rowIndicator.displayValue = 'row';

scrollBarHeight

Change the height of the scrollbar

Type - number

Example:

gridView.scrollBarHeight = 24;

scrollBarWidth

Change the width of the scrollbar

Type - number

Example:

gridView.scrollBarWidth = 24;

sortingOptions

Setting model for data sorting

Type - SortingOptions

Remarks:

SortingOptions Returns an object. You can get or set the properties of SortingOptions.

Example:

gridView.sortingOptions.style = 'reverse';

sortMode

Sort operation mode after data modification

Type - SortMode

Remarks:

Returns SortMode set in the grid. It can be changed by assigning a value.

Example:

gridView.sortMode = "explicit";

stateBar

Configuration model for grid status bar

Type - StateBar

Remarks:

Returns a StateBar object. You can get or set the StateBar property.

Example:

gridView.stateBar.mark = 'image';

summaryMode

How to calculate the sum of the current grid

Type - SummaryMode

Remarks:

Returns SummaryMode set in the grid. It can be changed by assigning a value.

Example:

gridView.summaryMode = "aggregate";

undoable

Is the undo feature available?

Type - boolean

Remarks:

It can be changed by assigning a value.

Example:

gridView.undoable = false

undoing

Is it possible to undo in the current state?

Type - boolean

Example:

gridView.undoing = false

Method Desc

activateAllColumnFilters

Apply or cancel all filters registered in the column.

[Parameter List]

column - string | DataColumn

Name of the corresponding column or column object

active - boolean

true: Enabled, false: Disabled.

[Return Value] - void

Example:

gridView.activateAllColumnFilters('By administrative district', true);

activateColumnFilters

Among the filters registered in the column, apply or disable filters with filter names included in filterNames.

[Parameter List]

column - string | DataColumn

Name of the corresponding column or column object

filterNames - string | string[]

Name of filter to apply or disable or array of names of filters

active - boolean

true: Enabled, false: Disabled.

[Return Value] - void

Example:

gridView.activateColumnFilters('By administrative district', ['Previous'], true);

addColumn

Set additional columns in addition to the set columns.

[Parameter List]

column - ConfigObject | string

Column to add (object such as GridColumn)

index - number

The order in which the relevant columns will be located (including hidden columns). If no value is specified, it is added at the end of the column.

[Return Value] - GridColumn

Example:

let col = {
 "name": "EmployeeID",
 "fieldName": "EmployeeID",
 "type": "data",
 "width": "90",
 "header": {
 "text": "Employee ID"
 }
}
 
gridView.addColumn(col);

addColumnFilters

Register one or more filters in a column. Not applied if column.autoFilter is true.

[Parameter List]

column - string | DataColumn

Name of the corresponding column or column object

filters - ColumnFilter[]

Array of filter objects to register, array of ColumnFilter

overwrite - boolean

Default value: false, when overwrite is false, an error occurs if there is a filter with a duplicate name.

[Return Value] - void

Example:

gridView.addColumnFilters('By administrative district', [{
 name: "Jeon",
 criteria: "value = 'Jeon'"
 }, {
 name: "Answer",
 criteria: "value = 'answer'"
 }])

addLayout

Add a column or group to the layout.

[Parameter List]

source - LayoutItem | string

Column name or layout information to add

index - number

Position to be inserted

[Return Value] - LayoutItem

Remarks:

It cannot be used if layout is not set. It must be used after changing to the layout state using gridView.setColumnLayout.

Example:

gridView.setColumnLayout([]); // Add an empty layout.
 
const column1 = gridView.addColumn({fieldName: "field1", name: "col1"});
const column2 = gridView.addColumn({fieldName: "field2", name: "col2"});
const column3 = gridView.addColumn({fieldName: "field2", name: "col3"});
gridView.addLayout(column1); // gridView.addLayout("col1")
gridView.addLayout({name: "group0", items: [column2, column3]});

addLookupSource

Add and register LookupSource to be used in the lookup tree.

[Parameter List]

source - LookupSource

LookupSource object

[Return Value] - void

Remarks:

If you want to add to the existing ID, use fillLookupData().

Example:

let area3codes = {
 id:"area2code",
 levels:3,
 keys: [['11', '11010', '1101053'], ['11', '11010', '1101054']],
 values: ['Sajik-dong', 'Samcheong-dong']
};
gridView.addLookupSource(area3codes);

addPopupMenu

Add a Popup Menu to the grid.

[Parameter List]

name - string

menu name

menuItems - (PopupMenu | PopupMenuItem)[]

Array following the PopupMenuItem format, menu information in a hierarchical structure

[Return Value] - void

Remarks:

The added menu can be connected to data cells, etc.

Example:

let menu = [{
 label: "menu1.",
 children: [{
 label: "This is submenu1."
 }, {
 label: "This is submenu2."
 }]
 }, {
 label: "This is menu2",
 }, {
 label: "-"
 }, {
 label: "This is menu3",
 type: "check",
 checked: true,
 tag: "check_menu"
 }];
 
gridView.addPopupMenu('menu1', menu);

addSelection

Add an area to select in the grid.

[Parameter List]

item - Selection

Selection Setting information such as model. You only need to pass the properties of the area you want to select.

eventFire - boolean

[Return Value] - void

Remarks:

It is added only when selectionMode is extended.

Example:

let sel = {
 style: "block",
 startItem: 2;
 startColumn: "Nominate",
 endItem: 3;
 endColumn: "Unit"
}
gridView.addSelection(sel);

addUserCellStyle

Specifies the style of the cell.

[Parameter List]

dataRow - number

unique number of the row

column - string | -One

name of column

style - string | ColumnStyleObject

string or ColumnStyleObject

[Return Value] - void

Remarks:

Used to apply a style when it is not possible to create rules to specify the style of a cell. If you enter -1 in column, it will be applied to the entire row.

applyCheckables

Apply checkable to CheckBar based on Expression.

Example:

gridView.applyCheckables();

autoFiltersRefresh

If column.autoFilter is true, the filter list is updated.

[Parameter List]

columns - string[] | DataColumn[]

Array of column names or column objects. Entire column if not entered.

applyFilters - boolean

Whether to apply the active filter.

[Return Value] - void

Remarks:

Called when updating the list of autoFilter. Or, it is automatically updated when the user clicks the filter icon.

beginUpdate

Whenever properties related to the grid are changed, an update lock is applied to delay the internal change processing call.

Remarks:

Use with endUpdate().

Example:

gridview.beginUpdate();
try {
 gridview.displayOptions( { ... });
 gridview.selectOptions( { ... });
...
} finally {
 gridview.endUpdate();
}