TurboGrid Documentation
Method
TurboGrid(container)
TurboGrid constructor, creates a new TurboGrid instance with container(Type:jquery DOM/context).

                                var TurboGrid = require("turbogrid");
                                //or var TurboGrid = window.TurboGrid;
                                var container = $(".container");
                                var turbogrid = new TurboGrid(container);
                            
setData(data)
Sets TurboGrid data(Type:Object). See data structure
getData()
Returns current data(Type:Object).

                                var data = { 
                                    columns: [], 
                                    rows: [] 
                                };
                                turbogrid.setData(data);
                                var data = turbogrid.getData();
                            
setOption(option)
Sets TurboGrid option(Type:Object). See all default option
getOption()
Returns current option(Type:Object).

                                var option = { 
                                    frozenRow: 0 
                                };
                                turbogrid.setOption(option);
                                var option = turbogrid.getOption();
                            
setFormatter(formatter)
Sets TurboGrid formatter(Type:Object).
default cell formatter: string, number, date, icon, blank, checkbox, tree
default header formatter: header
getFormatter([type])
Returns type specified formatter(Function) or all formatters(Object).

                                var formatter = { 
                                    string: function(value, rowData, columnData, rowIndex, columnIndex, cellNode) { 
                                        return value; 
                                    } 
                                };
                                turbogrid.setFormatter(formatter);
                                var formatter = turbogrid.getFormatter();
                                var stringFormatter = turbogrid.getFormatter("string");
                            
Demo Formatter
setEditor(editor)
Sets TurboGrid editor(Type:Object).
default editor: text, list
TODO: How to customize own editor
getEditor([type])
Returns type specified editor(Function).

                                    var editor = { 
                                        yourEditor: YourEditor
                                    };
                                    turbogrid.setEditor(editor);
                                    var editor = turbogrid.getFormatter("yourEditor");
                            
bind(eventType, handler)
Attach a handler to an event for TurboGrid. See all event types.
on(eventType, handler)
This function is an alias of bind().

                                    turbogrid.bind("onRenderStart", function(e, eventData){
                                        //console.log(eventData);
                                    }).bind("onRenderComplete", function(e, eventData){
                                        //console.log(eventData);
                                    });
                            
Demo Events
one(eventType, handler)
Attach a handler to an event. The handler is executed at most once per event type. It will be removed once it triggers for the first time.
once(eventType, handler)
This function is an alias of one().

                                    turbogrid.one("onRenderUpdate", function(e, eventData){
                                        //console.log(eventData);
                                    })
                            
unbind([eventType][, handler])
Remove a previously-attached event handler from TurboGrid.
off([eventType][, handler])
This function is an alias of unbind().

                                    turbogrid.unbind();
                                    turbogrid.unbind("onRenderStart");
                                    turbogrid.unbind("onRenderStart", handler);
                            
trigger(eventType, eventData)
Execute all handlers attached to TurboGrid for an event.
emit(eventType, eventData)
This function is an alias of trigger().
For internal or extend class:

                                this.trigger(eventType, eventData);
                            
getAllEvents()
Returns all event types.

                                  var allEventTypes = turbogrid.getAllEvents();
                            
Demo Events
render([resetAll])
Asynchronous render TurboGrid.
renderNow([resetAll])
Synchronous render TurboGrid.

                            turbogrid.render();
                            turbogrid.renderNow();
                        
reset()
Clean up and render again. reset() = render(true)
update()
Invalidate all rows and render again. update() = invalidateAll() + render()

                            turbogrid.reset();
                            turbogrid.update();
                            
resize()

                            turbogrid.resize();
                        
destroy()

                            turbogrid.destroy();
                            
showLoading()
hideLoading()

                            turbogrid.showLoading();
                            turbogrid.hideLoading();
                            
expandAll()
collapseAll()
toggleAll()

                                turbogrid.expandAll();
                                turbogrid.collapseAll();
                                turbogrid.toggleAll();
                            
expandItem(rowIndex)
collapseItem(rowIndex)
toggleItem(rowIndex)

                                turbogrid.expandItem(rowIndex);
                                turbogrid.collapseItem(rowIndex);
                                turbogrid.toggleItem(rowIndex);
                            
expandLevel(level)

                            turbogrid.expandLevel(level);
                            
getColumnsData()
Returns original columns data (tree structure)
getRowsData()
Returns original rows data (tree structure)

                            var columnsData = turbogrid.getColumnsData();
                            var rowsData = turbogrid.getRowsData();
                            
getGridColumnsData()
Returns current columns data (flat list)
getGridRowsData()
Returns current rows data (flat list)

                            var gridColumnsData = turbogrid.getGridColumnsData();
                            var gridRowsData = turbogrid.getGridRowsData();
                            
getColumnItem(columnIndex)
getRowItem(rowIndex)

                                var columnData = turbogrid.getColumnItem(columnIndex);
                                var rowData = turbogrid.getRowItem(rowIndex);
                            
getColumnItemById(columnId)
getRowItemById(rowId)

                                var columnData = turbogrid.getColumnItemById(columnId);
                                var rowData = turbogrid.getRowItemById(rowId);
                            
getColumnItemBy(condition)
getRowItemBy(condition)

                            var columnData = turbogrid.getColumnItemBy({
                                id: columnId
                            });
                            var rowData = turbogrid.getRowItemBy({
                                id: rowId
                            });
                            
getExportData()
Returns all columns and rows data without private properties.

                            var exportData = turbogrid.getExportData();
                            
Demo Export
getGridView()
getGridViewValue(key)
See all properties

                                var gridView = turbogrid.getGridView();
                                var value = turbogrid.getGridViewValue(key);
                            
getScrollBarWidth()
Returns 0 or scrollbarSize if has vertical scrollbar ( hasVScroll)
getScrollBarHeight()
Returns 0 or scrollbarSize if has horizontal scrollbar ( hasHScroll)

                                var sbw = turbogrid.getScrollBarWidth();
                                var sbh = turbogrid.getScrollBarHeight();
                            
getScrollViewWidth()
getScrollViewHeight()
Scroll View size = Scroll Pane size - Scrollbar size

                                var svw = turbogrid.getScrollViewWidth();
                                var svh = turbogrid.getScrollViewHeight();
                            
getScrollPaneWidth()
getScrollPaneHeight()
Scroll Pane size = Scroll View size + Scrollbar size

                                var spw = turbogrid.getScrollPaneWidth();
                                var sph = turbogrid.getScrollPaneHeight();
                            
getVisibleRange()
Returns current the index list of visible rows and columns.

                                var range = turbogrid.getVisibleRange();
                            
getRowNodes(rowIndex)
getCellNodes(rowIndex)
getCellNode(rowIndex, columnIndex)
getHeaderNode(columnIndex)

                                var rowNodes = turbogrid.getRowNodes(rowIndex);
                                var cellNodes = turbogrid.getCellNodes(rowIndex);
                                var cellNode = turbogrid.getCellNode(rowIndex, columnIndex);
                                var headerNode = turbogrid.getHeaderNode(columnIndex);
                            
setRowSubs(rowIndex, subs)

                            var subs = [{name:"row1"},{name:"row2"}];
                            turbogrid.setRowSubs(rowIndex, subs);
                            
setRows(rowList)

                            var rows = [{name:"row1"},{name:"row2"}];
                            turbogrid.setRows(rows);
                            
selectAll()
unselectAll()

                                turbogrid.selectAll();
                                turbogrid.unselectAll();
                            
setSelectedRow(rowIndex)
unsetSelectedRow([rowIndex])

                                turbogrid.setSelectedRow(rowIndex);
                                turbogrid.unsetSelectedRow(rowIndex);
                                turbogrid.unsetSelectedRow();
                            
getSelectedRow()
getSelectedRows()
Returns a list for multiple selection

                                var selectedRow = turbogrid.getSelectedRow();
                                var selectedRows = turbogrid.getSelectedRows();
                            
setFocusedRow(rowIndex, e)
getFocusedRow()
getFocusedRows()

                                turbogrid.setFocusedRow(rowIndex);
                                //for multiple
                                turbogrid.setFocusedRow(rowIndex, {
                                    "ctrlKey":true
                                });
                            
Demo Row Focus
setHighlightRow(rowIndex, highlight)
highlight: true (default) or false
getHighlightRow()

                                turbogrid.setHighlightRow(rowIndex, true);
                                turbogrid.setHighlightRow(rowIndex, false);
                                var rowItem = turbogrid.getHighlightRow();
                            
setLoadingRow(rowIndex, loading)
loading: true (default) or false

                                turbogrid.setLoadingRow(rowIndex, true);
                                turbogrid.setLoadingRow(rowIndex, false);
                            
getSortColumn(id)
setSortColumn(sortColumn)
removeSortStatus()
Remove fast sort status if data changed

                            var sortColumn = turbogrid.getSortColumn(id);
                            turbogrid.setSortColumn(sortColumn);
                            turbogrid.removeSortStatus();
                            
setColumnWidth(columnIndex, width[, keepRange])
Dynamic set column width, keepRange: true/false for minWidth/maxWidth fixing

                            turbogrid.setColumnWidth(columnIndex, width, keepRange);
                            
showColumn(columnIndex[, newWidth])
hideColumn(columnIndex)

                                turbogrid.showColumn(columnIndex, newWidth);
                                turbogrid.hideColumn(columnIndex);
                            
scrollToRow(rowIndex)
scrollToColumn(columnIndex)
scrollToCell(rowIndex, columnIndex)

                            turbogrid.scrollToRow(rowIndex);
                            turbogrid.scrollToColumn(columnIndex);
                            turbogrid.scrollToCell(rowIndex, columnIndex);
                            
Demo Scroll
scrollRowIntoView(rowIndex)
scrollColumnIntoView(columnIndex)
scrollCellIntoView(rowIndex, columnIndex)

                            turbogrid.scrollRowIntoView(rowIndex);
                            turbogrid.scrollColumnIntoView(columnIndex);
                            turbogrid.scrollCellIntoView(rowIndex, columnIndex);
                            
Demo Scroll
invalidateRow(rowIndex)
invalidateRows(rowIndexList)
invalidateRowsExcept(rowIndexList)
invalidateRowsFrom(rowIndex)

                                turbogrid.invalidateRow(rowIndex);
                                turbogrid.invalidateRows(rowIndexList);
                                turbogrid.invalidateRowsExcept(rowIndexList);
                                turbogrid.invalidateRowsFrom(rowIndex);
                            
invalidateColumn(columnIndex)
invalidateColumns(columnIndexList)
invalidateColumnsExcept(columnIndexList)
invalidateColumnsFrom(columnIndex)

                                turbogrid.invalidateColumn(columnIndex);
                                turbogrid.invalidateColumns(columnIndexList); 
                                turbogrid.invalidateColumnsExcept(columnIndexList);
                                turbogrid.invalidateColumnsFrom(columnIndex);
                            
invalidateCell(rowIndex, columnIndex)
invalidateCells(rowIndexList, columnIndexList)

                                turbogrid.invalidateCell(rowIndex, columnIndex);
                                turbogrid.invalidateCells(rowIndexList, columnIndexList);
                            
invalidateAll()

                                turbogrid.invalidateAll();
                            
updateRow(rowIndex)
updateCell(rowIndex, columnIndex)

                                turbogrid.updateRow(rowIndex);
                                turbogrid.updateCell(rowIndex, columnIndex);
                            
copyCellText(rowIndex, columnIndex)
copyCellHTML(rowIndex, columnIndex)
copyCellValue(rowIndex, columnIndex)
copyRowJSON(rowIndex)

                                turbogrid.copyCellText(rowIndex, columnIndex);
                                turbogrid.copyCellHTML(rowIndex, columnIndex);
                                turbogrid.copyCellValue(rowIndex, columnIndex);
                                turbogrid.copyRowJSON(rowIndex);
                            
addRow(rowInfo[, scrollTo])
addRows(rowList[, scrollTo])
addRowsTo(rowList, parentItem[, scrollTo])

                                turbogrid.addRow({
                                    id: "id1",
                                    name: "row item"
                                }, true);
                                turbogrid.addRows(["Row 1", "Row 2"]);
                                turbogrid.addRowsTo(["Row 1", "Row 2"], parentItem, true)
                            
insertRowBefore(rowInfo, rowItem[, scrollTo])
insertRowsBefore(rowList, rowItem[, scrollTo])
insertRowAfter(rowInfo, rowItem[, scrollTo])
insertRowsAfter(rowList,, rowItem[, scrollTo])

                                turbogrid.insertRowBefore("Row Before","level_0",true);
                                turbogrid.insertRowsBefore(["Row Before 1","Row Before 2"],"level_0",true); 
                                turbogrid.insertRowAfter("Row After","level_0",true);
                                turbogrid.insertRowsAfter(["Row After 1","Row After 2"],"level_0",true);
                            
deleteRow(rowIndex)
deleteRows(rowIndexList)

                                turbogrid.deleteRow(2);
                                turbogrid.deleteRows([1, 2]);
                            
forEachColumn(callback)
Executing a function for each column.
forEachRow(callback)
Executing a function for each row.

                                turbogrid.forEachColumn(function(column, index, parent){
                                });
                                turbogrid.forEachRow(function(row, index, parent){
                                });
                            
isRowSelectable(rowData)
isRowFrozen(rowData)
isRowGroup(rowData)
isRowLeaf(rowData)
Returns true or false.

                                var rowData = turbogrid.getRowItem(rowIndex);
                                if (turbogrid.isRowSelectable(rowData)) {
                                    console.log("selectable");
                                }
                            
isCellEditable(rowIndex, columnIndex)

                                var editable = turbogrid.isCellEditable(rowIndex, columnIndex);
                            
TurboGrid.extend(properties[, classProperties])
[static] To create a new class of your own, extends TurboGrid and provide instance properties, as well as optional classProperties to be attached directly to the constructor function.

                            var CustomGrid = TurboGrid.extend({
                                constructor: function() {
                                },
                                customFunction: function() {
                                },
                                //API override and call supper API
                                render: function() {
                                    this.customFunction();
                                    TurboGrid.prototype.render.apply(this, arguments);
                                }
                            });
                            
TurboGrid.mixin(properties[, properties, ...])
[static] Extends TurboGrid like "extend" but support mixing multiple properties.

                            var CustomGrid = TurboGrid.mixin(OwnPropertiesOne, OwnPropertiesTwo);
                            
Data
Both columns and rows are same data structure (JSON/Tree-like):

                                            [{
                                                name: "item 1",
                                                subs: [{
                                                    name : "item 2",
                                                    subs: [{
                                                        name : "item 3",
                                                        subs: [{
                                                            ...
                                                        }]
                                                    }, ...]
                                                }, ...]
                                            }, ...]
                                    

                                    var data = {
                                        columns : [...],
                                        rows : [...]
                                    };
                                    turbogrid.setData(data);    
                            
data.columns
Column item default properties:

                                    var columns = [{ 
                                        id:"c1",
                                        dataType : "string",
                                        name:"Column Name 1"
                                    }, {
                                        id : "c2",
                                        dataType : "number",
                                        name : "Column Name 2"
                                    }, {
                                        id: "c3",
                                        name: "Column Name 3",
                                        subs: [{
                                            id: "c3_s1",
                                            name: "Column Name 3-1"
                                        }, {
                                            id: "c3_s2",
                                            name: "Column Name 3-2"
                                        }]
                                    }];
                            
data.rows
Row item default properties:

                                        {
                                            //customize row type, for example "blank"
                                            rowType : "",
                                            //customize row class name
                                            rowClass : "",
                                            //customize selectable
                                            //selectable : true,
                                            //do not sort if unsorted=true
                                            unsorted : false,
                                            //unsorted item will be move to bottom, for example "Unclassified"
                                            unsortedTop : false,
                                            //for export
                                            //exportable: true
                                        }
                                

                                    var rows = [{
                                        id : "r1",
                                        rowType : "total",
                                        name : "Row Name 1",
                                        c1 : "string value 1",
                                        c2 : 1,
                                        c3_s1 : "value 3 - 1",
                                        c3_s2 : "value 1 - 2"
                                    }, {
                                        id : "r2",
                                        rowType : "group",
                                        name : "Row Name 2",
                                        c1 : "string value 2",
                                        c2 : "value 2",
                                        c3_s1 : "value 3 - 1",
                                        c3_s2 : "value 1 - 2",
                                        subs : [{
                                            id : "r3",
                                            rowType : "holding",
                                            name : "Row Name 3",
                                            c1 : "string value 3",
                                            c2 : 3,
                                            c3_s1 : "value 3 - 1",
                                            c3_s2 : "value 1 - 2"
                                        }]
                                    }];      
                            
data.option
Sets option from data (easy way for back-end sets option, The priority is higher than "setOption")

                                    var data = {
                                        option : {
                                            sortField : "name"
                                        },
                                        columns : columns,
                                        rows : rows
                                    };
                                    turbogrid.setData(data);
                            
data.rowsLength
Dynamic load rows data. No rows data but require total length of rows.

                                    var data = {
                                        columns: columns,
                                        rowsLength: 50000
                                    };
                                    turbogrid.setData(data);
                            
Option
option.className = "turbogrid"
Customize className (CSS namespace).

                            turbogrid.setOption({
                                className: "my-grid-class-name"
                            });
                            
option.rowHeight = 23
option.autoHeight = false
option.showHeader = true
option.showCollapseAllIcon = true
option.collapseAll = false
option.showCheckbox = false
option.showCheckboxAll = false
option.selectedAll = null
true: select all, false: unselect all, or do nothing
option.multiSelect = false
option.multiSelectKey = ""
empty, "ctrl" or "ctrl,shift"
option.showRowNumber = true
false: no number, true: show number with default handler, or a handler: function(rowData, listNumber, leafNumber)
option.rowNumberType = "leaf"
list or leaf (default is leaf)
option.rowDragDropMultiLevel = false
false: single level drag/drop, true: multi-level drag/drop, or a handler function, returns a specified drop list
option.sortField = ""
Single field, or a list for multiple compare
option.sortAsc = true
true: for ascending sort, false: for descending sort
option.sortBlankValueBottom = true
Configuration for sort blank value logic
true: rows with blank values should always be at the bottom of the grid
false: rows with blank values sort at the bottom for descending sort and at the top for ascending sort
option.sortFast = false
Sets true will call Array.reverse() for fast sorting when switch between descending and ascending
option.sortOnInit = false
Sets true will sort by sortField on initialized
option.sortComparers = null
Customize own sort comparers
option.convertDataType = false
Convert rows value by column's dataType
Demo Row Sort
option.columnDefaults =

                                { 
                                    //id is require
                                    //id : "",

                                    //title: "",

                                    // dataType expect to be a string, for example: "string", "number", "date" etc.
                                    // be used for sorting, value formatting
                                    //dataType: "",

                                    // formatter expect to be a function, but also can be a string like dataType
                                    // priority is higher than dataType
                                    // be used for cell formatting
                                    //formatter: null,

                                    //align: undefined,

                                    //Customize class name
                                    //headerItemClass: "",
                                    //headerClass: "",
                                    //headerNameClass: "",
                                    //cellClass: ""

                                    //able
                                    //titleable: false,
                                    //sortable: true,
                                    //resizable: true,
                                    //exportable: false,

                                    minWidth: 73,
                                    maxWidth: 300,
                                    //width: Number,
                                    //originalWidth: Number,

                                    //name is require
                                    name: ""
                                }
                                
Sets column default option
Demo CSS Style
option.columnFormatterDefaults =

                                    {
                                        tree: {
                                            dataType: "tree",
                                            formatter: "tree",
                                            width: 300,
                                            minWidth: 120,
                                            maxWidth: 500
                                        },
                                        number: {
                                            align: "right"
                                        },
                                        date: {
                                            align: "right"
                                        }
                                    }
                                
Sets special type column with default option
Demo Frozen
option.columnDefaultFormatter =

                                        {
                                            name: "tree"
                                        }
                                    
Sets column default formatter by id
Demo Frozen
option.frozenColumn = -1
option.frozenRow = -1
option.frozenBottom = false
Demo Frozen
option.frozenRowTypeList = null
Sets rows frozen if rowType in list

                            turbogrid.setOption({
                                frozenRowTypeList: ["total"]
                            });
                            
option.conditionalStyleList = null
Sets conditional style list, for example: ["background", "border", "color"]
option.scrollbarSize = 15
Sets scrollbar size
Demo Scrollbar
option.scrollPaneMinWidth = 30
Sets scroll pane min width
option.rowFilter
option.nullMatch
Returns true or false. it will call nullFormat if the value match null definition.

                                turbogrid.setOption({
                                    nullMatch: function(value, rowData, columnData) {
                                        return (value === null || typeof(value) === "undefined") ? true : false;
                                    }
                                });
                            
option.numberFormat
option.dateFormat
option.stringFormat
option.iconFormat
option.treeFormat
option.nullFormat

                            turbogrid.setOption({
                                numberFormat: function(value) {
                                    return self.model.formatNumber(value);
                                },
                                dateFormat: function(value) {
                                    return self.model.formatDate(value);
                                }
                            });
                            
Event
Event Type: Event Data: Example:
onHeaderRendered

                                Object: {
                                    node: headerNode
                                }
                            
Demo Events
onHeaderMouseOver
onHeaderMouseOut
onHeaderMouseEnter
onHeaderMouseLeave
onHeaderClick
onHeaderDblClick
onHeaderContextMenu

                            Object: {
                                e: e,
                                columnItem: columnItem,
                                node: headerItemNode
                            }
                            
Demo Events
onSort

                            Object: {
                                e: e,
                                columnItem: columnItem,
                                node: headerItemNode
                            }
                            
onColumnWidthChanged

                                Object: columnItem
                            
Demo Events
onColumnWidthDragStart
onColumnWidthDragUpdate
onColumnWidthDragComplete
onColumnWidthDropped

                                Object: dragOption
                            
Demo Events
onRowMouseEnter
onRowMouseLeave

                                Object: {
                                    e: e,
                                    row: rowIndex
                                }
                            
Demo Events
onRowRequestSubs

                                Object: rowItem
                            
onRowDragStart
onRowDragUpdate
onRowDragComplete
onRowDropped

                                Object: dragOption
                            
onCellRendered

                                Object: {
                                    value: value,
                                    row: rowIndex,
                                    column: columnIndex,
                                    rowItem: rowData,
                                    columnItem: columnData,
                                    node: cellNode
                                }
                            
Demo Events
onCellMouseOver
onCellMouseOut
onCellMouseEnter
onCellMouseLeave

                                Object: {
                                    e: e,
                                    row: rowIndex,
                                    column: columnIndex,
                                    rowNode: rowNode,
                                    cellNode: cellNode
                                }
                            
Demo Events
onClick
onDblClick
onContextMenu

                                Object: {
                                    e: e,
                                    row: rowIndex,
                                    column: columnIndex,
                                    rowNode: rowNode,
                                    cellNode: cellNode
                                }
                            
Demo Events
onMouseWheel

                            Object: {
                                e: e,
                                deltaX: deltaX,
                                deltaY: deltaY
                            }
                            
Demo Scroll
onScroll

                                Object: {
                                    scrollLeft: scrollLeft,
                                    scrollTop: scrollTop
                                }
                            
Same as scrollLeft and scrollTop
Demo Scroll
onScrollStatusChanged

                            Object: {
                                hasHScroll: hasHScroll,
                                hasVScroll: hasVScroll
                            }
                            
Demo Events
onKeyDown

                                Object: {
                                    e: e,
                                    row: rowIndex,
                                    column: columnIndex
                                }
                            
Demo Events
onTreeIconClick

                                Object: {
                                    e: e,
                                    row: rowIndex,
                                    column: columnIndex,
                                    rowNode: rowNode,
                                    cellNode: cellNode,
                                    node: treeIconNode
                                }
                            
onTreeIconAllClick

                                Object: {
                                    e: e,
                                    columnItem: columnItem,
                                    node: treeIconNode
                                }            
                            
onCheckboxClick

                                Object: {
                                    e: e,
                                    row: rowIndex,
                                    column: columnIndex,
                                    rowNode: rowNode,
                                    cellNode: cellNode,
                                    node: checkboxNode
                                }
                            
onCheckboxAllClick

                                Object: {
                                    e: e,
                                    columnItem: columnItem,
                                    node: checkboxNode
                                }
                            
onSelectedChanged

                                Object: {
                                    selectedLength: selectedLength,
                                    totalSelectable: totalSelectable,
                                    selectedAll: selectedAll
                                }
                            
onActiveCellChanged

                                Object: {
                                    row: activeRowIndex,
                                    column: activeColumnIndex
                                }
                            
onCellEditStart
onCellEditRendered
onCellEditValueChanging
onCellEditValueChanged
onCellEditComplete
onCellEditDestroy

                                Object: {
                                    editor: editor,
                                    node: activeNode,
                                    row: rowIndex,
                                    column: columnIndex,
                                    rowItem: rowItem,
                                    columnItem: columnItem
                                }
                            
Demo Editor
onCellEditError

                                Object: {
                                    info: validationResults,
                                    editor: editor,
                                    node: activeNode,
                                    row: activeRowIndex,
                                    column: activeColumnIndex,
                                    rowItem: rowItem,
                                    columnItem: columnItem
                                }
                            
Demo Editor
onRenderStart
onRenderComplete

                                Boolean: renderCompleted
                            
Demo Events
onRenderUpdate

                                Object: visibleRange
                            
Demo Events
onDestroy
N/A
Property
gridView

                                var gridView = turbogrid.getGridView();
                            
visibleRange

                                        {
                                            rowList: rowList,
                                            rowInfo: rowInfo,
                                            columnList: columnList,
                                            columnInfo: columnInfo
                                        }
                                    

                                var range = turbogrid.getGridViewValue("visibleRange");
                            
containerWidth
containerHeight

                                var cw = turbogrid.getGridViewValue("containerWidth");
                                var ch = turbogrid.getGridViewValue("containerHeight");
                            
headerWidth
headerHeight

                                var hw = turbogrid.getGridViewValue("headerWidth");
                                var hh = turbogrid.getGridViewValue("headerHeight");
                            
bodyerWidth
bodyerHeight

                                var bw = turbogrid.getGridViewValue("bodyerWidth");
                                var bh = turbogrid.getGridViewValue("bodyerHeight");
                            
scrollbarSize

                                var scrollbarSize = turbogrid.getGridViewValue("scrollbarSize");
                            
hasHScroll
hasVScroll

                                var hhs = turbogrid.getGridViewValue("hasHScroll");
                                var hvs = turbogrid.getGridViewValue("hasVScroll");
                            
scrollLeft
scrollTop

                                var sl = turbogrid.getGridViewValue("scrollLeft");
                                var st = turbogrid.getGridViewValue("scrollTop");
                            
columnsWidthL
columnsWidthR

                                var cw = turbogrid.getGridViewValue("columnsWidthL");
                                var ch = turbogrid.getGridViewValue("columnsWidthR");
                            
paneWidthL
paneWidthR
paneHeightT
paneHeightB

                                var pwl = turbogrid.getGridViewValue("paneWidthL");
                                var pwr = turbogrid.getGridViewValue("paneWidthR");
                                var pht = turbogrid.getGridViewValue("paneHeightT");
                                var phb = turbogrid.getGridViewValue("paneHeightB");
                            
canvasWidthL
canvasWidthR
canvasHeightT
canvasHeightB

                                var cwl = turbogrid.getGridViewValue("canvasWidthL");
                                var cwr = turbogrid.getGridViewValue("canvasWidthR");
                                var cht = turbogrid.getGridViewValue("canvasHeightT");
                                var chb = turbogrid.getGridViewValue("canvasHeightB");
                            
(L: left, R: right, T: top, B: bottom)
Appendix
dragOption
Default drag option:

                                {
                                    mouseStartX: 0,
                                    mouseStartY: 0,
                                    mousePreviousX: 0,
                                    mousePreviousY: 0,
                                    mouseCurrentX: 0,
                                    mouseCurrentY: 0,
                                    mouseOffsetX: 0,
                                    mouseOffsetY: 0,
                                    mouseMoveX: 0,
                                    mouseMoveY: 0,
                                    valid: false,
                                    state: null
                                }
                            
formatterArguments
Formatter arguments detail:

                                function(value, rowData, columnData, rowIndex, columnIndex, cellNode) { 
                                    //your code
                                } 
                            
value = rowData[columnData.id]
rowIndex = rowData.tg_index
columnIndex = columnData.tg_index
Demo Formatter
tg
The "tg" is TurboGrid prefix or namespace.
CSS className:

                                .tg-pane {}
                                .tg-canvas{}
                                .tg-row{}
                                .tg-cell{}
                            
Private property:

                                rowItem.tg_index
                                rowItem.tg_level
                                rowItem.tg_group
                            
The private properties will be removed when getExportData()