AnyChart
API Reference
Still have questions?
Contact support
Top

class anychart.core.ui.DataGrid Improve this Doc

Extends: anychart.core.VisualBaseWithBounds

Data grid element.
The Data grid is a part of Gantt chart but it also can be used independently.

Methods Overview

Specific settings
buttons()DataGrid button settings.
column()Column settings.
endIndex()End index.
fixedColumns()Gets fixed columns mode.
onEditEnd()onEditStart function.
onEditStart()onEditStart function.
startIndex()Start index.
Coloring
backgroundFill()Background fill settings.
columnStroke()Column stroke settings.
headerFill()Row fill settings.
rowEvenFill()Row even fill settings.
rowFill()Row fill settings.
rowHoverFill()Row fill settings in hover mode.
rowOddFill()Row odd fill settings.
rowSelectedFill()Row fill settings in selected mode.
Data
data()Data settings.
Interactivity
edit()Live edit settings.
enabled()Element state (enabled or disabled).
horizontalScrollBar()Horizontal scroll bar settings.
tooltip()Tooltip settings.
Size and Position
bottom()Bottom bound settings.
bounds()Bounds settings.
getPixelBounds()Returns pixel bounds.
height()Height settings.
horizontalOffset()Horizontal offset.
left()Left bound settings.
maxHeight()Maximum height.
maxWidth()Maximum width.
minHeight()Minimum height.
minWidth()Minimum width.
right()Right bound settings.
top()Top bound settings.
verticalOffset()Vertical offset
width()Width settings.
zIndex()Z-index of the element.
Miscellaneous
draw()Draws data grid.

Methods Description

backgroundFill

Getter for the background fill.

Returns:

anychart.graphics.vector.Fill | string - Background fill.
Setter for background fill settings using an array, an object or a string. Learn more about coloring.

Params:

NameTypeDefaultDescription
coloranychart.graphics.vector.Fill | Array.<(anychart.graphics.vector.GradientKey|string)>
null
Color as an array, an object or a string.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Background fill color with opacity.

Params:

NameTypeDefaultDescription
colorstring
'none'
Color as a string.
opacitynumber
Color opacity.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Linear gradient background fill. Learn more about coloring.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Gradient keys.
anglenumberGradient angle.
modeboolean | anychart.graphics.vector.Rect | ObjectGradient mode.
opacitynumberGradient opacity.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Radial gradient background fill. Learn more about coloring.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Color-stop gradient keys.
cxnumberX ratio of center radial gradient.
cynumberY ratio of center radial gradient.
modeanychart.graphics.math.RectIf defined then userSpaceOnUse mode, else objectBoundingBox.
opacitynumberOpacity of the gradient.
fxnumberX ratio of focal point.
fynumberY ratio of focal point.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Image background fill. Learn more about coloring.

Params:

NameTypeDescription
imageSettingsanychart.graphics.vector.FillObject with settings.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

bottom

Getter for element bottom bound settings.

Returns:

number | string | undefined - Element's bottom bound setting.
Setter for element bottom bound settings.

Params:

NameTypeDefaultDescription
bottomnumber | string | null
null
Bottom bound settings for the element.

Returns:

anychart.core.ui.DataGrid - Returns self for method chaining.

bounds

Getter for element bounds settings.

Returns:

anychart.core.utils.Bounds - Bounds of the element.
Setter for bounds of the element using one parameter.

Params:

NameTypeDescription
boundsanychart.utils.RectObj | anychart.math.Rect | anychart.core.utils.BoundsBounds of element.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Setter for element bounds settings.

Params:

NameTypeDefaultDescription
xnumber | string
null
X-coordinate.
ynumber | string
null
Y-coordinate.
widthnumber | string
null
Width.
heightnumber | string
null
Height.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

buttons

Getter for button settings.

Returns:

anychart.core.gantt.DataGridButton - Button settings.
Setter for button settings.

Params:

NameTypeDescription
settingsObjectButton settings to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

column

Getter for column by index.
Gets column by index or creates a new one if column doesn't exist yet.

Params:

NameTypeDescription
indexnumberColumn index.

Returns:

anychart.core.ui.DataGrid.Column - Column by index.
Setter for the first column.

Params:

NameTypeDescription
settingsanychart.core.ui.DataGrid.Column | ObjectColumn settings to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Setter for the column by index.

Params:

NameTypeDescription
indexnumberColumn index.
settingsanychart.core.ui.DataGrid.Column | ObjectColumn settings to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

columnStroke

Getter for the column stroke.

Returns:

string | anychart.graphics.vector.Stroke - Column stroke.
Setter for the column stroke.

Params:

NameTypeDefaultDescription
coloranychart.graphics.vector.Stroke | string
'#cecece'
Stroke color to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Setter for the column stroke using an object.

Params:

NameTypeDescription
settingsObjectStroke settings from anychart.graphics.vector.Stroke.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

data

Getter for data.

Returns:

anychart.data.Tree - Returns data tree.
Setter for new data.

Params:

NameTypeDescription
dataanychart.data.TreeNew data tree.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

draw

Draws data grid.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

edit

Getter for live edit settings.

Returns:

anychart.core.gantt.edit.StructureEdit - Live edit settings.
Setter for live edit settings. Learn more about Live editing.

Params:

NameTypeDefaultDescription
settingsObject | boolean
false
Live edit settings to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

enabled

Getter for the element state (enabled or disabled).

Returns:

boolean - Element state.
Setter for the element enabled state.

Params:

NameTypeDefaultDescription
enabledboolean
true
Enabled state to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Example.
if (!element.enabled())
   element.enabled(true);

endIndex

Getter for the end index.

Returns:

number - End index.
Setter for the end index.

Params:

NameTypeDefaultDescription
indexnumber
0
End index to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

fixedColumns

Gets fixed columns mode.

Returns:

boolean - Fixed columns mode.
Enable or disable fixed columns mode. In this mode data grid width is controlled by chart splitter.

Params:

NameTypeDefaultDescription
valueboolean
false
Value to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

getPixelBounds

Returns pixel bounds of the element due to parent bounds and self bounds settings.

Returns:

anychart.math.Rect - Pixel bounds of the element.

headerFill

Getter for the header fill.

Returns:

anychart.graphics.vector.Fill | string - Returns header fill color.
See listing
var headerFill = dataGrid.headerFill()
Setter for fill settings using an object, an array or a string. Learn more about coloring.

Params:

NameTypeDefaultDescription
coloranychart.graphics.vector.Fill | Array.<(anychart.graphics.vector.GradientKey|string)>
'#fff'
Color as an object, an array or a string.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Fill color with opacity.

Params:

NameTypeDescription
colorstringColor as a string.
opacitynumberColor opacity.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Linear gradient fill. Learn more about coloring.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Gradient keys.
anglenumberGradient angle.
modeboolean | anychart.graphics.vector.Rect | ObjectGradient mode.
opacitynumberGradient opacity.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Radial gradient fill. Learn more about coloring.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Color-stop gradient keys.
cxnumberX ratio of center radial gradient.
cynumberY ratio of center radial gradient.
modeanychart.graphics.math.RectIf defined then userSpaceOnUse mode, else objectBoundingBox.
opacitynumberOpacity of the gradient.
fxnumberX ratio of focal point.
fynumberY ratio of focal point.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

Params:

NameTypeDescription
imageSettingsanychart.graphics.vector.FillObject with settings.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

height

Getter for element height settings.

Returns:

number | string | undefined - Element's height setting.
Setter for element height setting.

Params:

NameTypeDefaultDescription
heightnumber | string | null
null
Height settings for the element.

Returns:

anychart.core.ui.DataGrid - Returns self for method chaining.

horizontalOffset

Getter for the horizontal offset.

Returns:

number - Horizontal offset.
Setter for the horizontal offset.

Params:

NameTypeDefaultDescription
offsetnumber
0
Horizontal offset to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

horizontalScrollBar

Getter for the horizontal scroll bar.

Returns:

anychart.core.ui.ScrollBar - Scroll bar.
Setter for the horizontal scroll bar.

Params:

NameTypeDescription
settingsObjectHorizontal scroll bar settings to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

left

Getter for element left bound settings.

Returns:

number | string | undefined - Element's left bound setting.
Setter for element left bound settings.

Params:

NameTypeDefaultDescription
leftnumber | string | null
null
Left bound setting for the element.

Returns:

anychart.core.ui.DataGrid - Returns self for method chaining.

maxHeight

Getter for the maximum height.

Returns:

number | string | null - Element's maximum height.
Setter for the maximum height.

Params:

NameTypeDefaultDescription
heightnumber | string | null
null
Maximum height to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

maxWidth

Getter for the maximum width.

Returns:

number | string | null - Element's maximum width.
Setter for the maximum width.

Params:

NameTypeDefaultDescription
widthnumber | string | null
null
Maximum width to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

minHeight

Getter for the minimum height.

Returns:

number | string | null - Element's minimum height.
Setter for the minimum height.

Params:

NameTypeDefaultDescription
heightnumber | string | null
null
Minimum height to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

minWidth

Getter for the minimum width.

Returns:

number | string | null - Element's minimum width.
Setter for the minimum width.

Params:

NameTypeDefaultDescription
widthnumber | string | null
null
Minimum width to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

onEditEnd

Getter for the onEditEnd function.

Returns:

function():Object|undefined - Returns onEditEnd function.
See listing
var dataGrid = chart.dataGrid();
var onEditEnd = dataGrid.onEditEnd();
Setter for the onEditEnd function.

Params:

NameTypeDefaultDescription
onEditEndFunctionfunction():Object|undefined
function() {
 return this[columnIndex] == 1 ? {itemMap: {name: this['value']}} : {cancelEdit: true};
 }
OnEditEnd function to set.
Function that looks like:
function(){
 // this.columnIndex - The column index for the editing. Type is a number
 // this.item - Corresponding dataItem. Type is anychart.data.Tree.DataItem
 // this.value - The value entered by the user. Type is a string
 return Object with a map itemMap or null/undefined;
 // Data changes don't occur at all when:
  - the function returns null or undefined
  - the object contains 'cancelEdit' field set to 'true': {'cancelEdit': true}
}

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

onEditStart

Getter for the onEditStart function.

Returns:

function():Object|undefined - Returns onEditStart function.
See listing
var dataGrid = chart.dataGrid();
var onEditStart = dataGrid.onEditStart();
Setter for the onEditStart function.

Params:

NameTypeDefaultDescription
onEditStartFunctionfunction():Object|undefined
function() {
return this[columnIndex] < 1 ? {cancelEdit: true} : {'value: this['value']};
}
OnEditStart function to set.
Function that looks like:
function(){
 // this.columnIndex - The column index from anychart.core.ui.DataGrid#column method. Type is a number
 // this.item - DataItem (literally corresponding row). Type is anychart.data.Tree.DataItem
 // this.value - The current text value of a cell. Type is a string
 return Object or null/undefined;
 // The input editing doesn't appear:
- if the function returns null or undefined
- if the object contains 'cancelEdit' field set to 'true': {'cancelEdit': true}
}

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Getter for element right bound settings.

Returns:

number | string | undefined - Element's right bound setting.
Setter for element right bound setting.

Params:

NameTypeDefaultDescription
rightnumber | string | null
null
Right bound setting for the element.

Returns:

anychart.core.ui.DataGrid - Returns self for method chaining.

rowEvenFill

Getter for row even fill.

Returns:

anychart.graphics.vector.Fill | string - Row even fill.
Setter for fill settings using an object, an array or a string. Learn more about coloring.

Params:

NameTypeDefaultDescription
coloranychart.graphics.vector.Fill | Array.<(anychart.graphics.vector.GradientKey|string)>
'#fafafa'
Color as an object, an array or a string.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Fill color with opacity.

Params:

NameTypeDescription
colorstringColor as a string.
opacitynumberColor opacity.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Linear gradient fill. Learn more about coloring.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Gradient keys.
anglenumberGradient angle.
modeboolean | anychart.graphics.vector.Rect | ObjectGradient mode.
opacitynumberGradient opacity.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Radial gradient fill. Learn more about coloring.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Color-stop gradient keys.
cxnumberX ratio of center radial gradient.
cynumberY ratio of center radial gradient.
modeanychart.graphics.math.RectIf defined then userSpaceOnUse mode, else objectBoundingBox.
opacitynumberOpacity of the gradient.
fxnumberX ratio of focal point.
fynumberY ratio of focal point.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

Params:

NameTypeDescription
imageSettingsanychart.graphics.vector.FillObject with settings.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

rowFill

Getter for row fill.

Returns:

anychart.graphics.vector.Fill | string - Row fill color.
Setter for fill settings using an object or a string. Learn more about coloring.

Params:

NameTypeDefaultDescription
coloranychart.graphics.vector.Fill | Array.<(anychart.graphics.vector.GradientKey|string)>
'#fff'
Color as an object, an array or a string.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Fill color with opacity.

Params:

NameTypeDescription
colorstringColor as a string.
opacitynumberColor opacity.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Gradient keys.
anglenumberGradient angle.
modeboolean | anychart.graphics.vector.Rect | ObjectGradient mode.
opacitynumberGradient opacity.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Color-stop gradient keys.
cxnumberX ratio of center radial gradient.
cynumberY ratio of center radial gradient.
modeanychart.graphics.math.RectIf defined then userSpaceOnUse mode, else objectBoundingBox.
opacitynumberOpacity of the gradient.
fxnumberX ratio of focal point.
fynumberY ratio of focal point.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

Params:

NameTypeDescription
imageSettingsanychart.graphics.vector.FillObject with settings.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

rowHoverFill

Getter for row hover fill.

Returns:

anychart.graphics.vector.Fill | string - Row hover fill.
Setter for fill settings using an object, an array or a string. Learn more about coloring.

Params:

NameTypeDefaultDescription
coloranychart.graphics.vector.Fill | Array.<(anychart.graphics.vector.GradientKey|string)>
'#edf8ff'
Color as an object, an array or a string.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Fill color with opacity.

Params:

NameTypeDescription
colorstringColor as a string.
opacitynumberColor opacity.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Linear gradient fill. Learn more about coloring.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Gradient keys.
anglenumberGradient angle.
modeboolean | anychart.graphics.vector.Rect | ObjectGradient mode.
opacitynumberGradient opacity.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Radial gradient fill. Learn more about coloring.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Color-stop gradient keys.
cxnumberX ratio of center radial gradient.
cynumberY ratio of center radial gradient.
modeanychart.graphics.math.RectIf defined then userSpaceOnUse mode, else objectBoundingBox.
opacitynumberOpacity of the gradient.
fxnumberX ratio of focal point.
fynumberY ratio of focal point.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

Params:

NameTypeDescription
imageSettingsanychart.graphics.vector.FillObject with settings.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

rowOddFill

Getter for row odd fill.

Returns:

anychart.graphics.vector.Fill | string - Row odd fill.
Setter for fill settings using an object, an array or a string. Learn more about coloring.

Params:

NameTypeDefaultDescription
coloranychart.graphics.vector.Fill | Array.<(anychart.graphics.vector.GradientKey|string)>
'#fff'
Color as an object, an array or a string.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Fill color with opacity.

Params:

NameTypeDescription
colorstringColor as a string.
opacitynumberColor opacity.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Linear gradient fill. Learn more about coloring.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Gradient keys.
anglenumberGradient angle.
modeboolean | anychart.graphics.vector.Rect | ObjectGradient mode.
opacitynumberGradient opacity.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Radial gradient fill. Learn more about coloring.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Color-stop gradient keys.
cxnumberX ratio of center radial gradient.
cynumberY ratio of center radial gradient.
modeanychart.graphics.math.RectIf defined then userSpaceOnUse mode, else objectBoundingBox.
opacitynumberOpacity of the gradient.
fxnumberX ratio of focal point.
fynumberY ratio of focal point.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

Params:

NameTypeDescription
imageSettingsanychart.graphics.vector.FillObject with settings.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

rowSelectedFill

Getter for row fill in selected mode.

Returns:

anychart.graphics.vector.Fill | string - Select row fill.
Setter for row fill settings in selected mode using an array, an object or a string. Learn more about coloring.

Params:

NameTypeDefaultDescription
coloranychart.graphics.vector.Fill | Array.<(anychart.graphics.vector.GradientKey|string)>
function(){return this.sourceColor}
Color as an array, an object or a string.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Fill color in selected mode with opacity. Fill as a string or an object.

Params:

NameTypeDescription
colorstringColor as a string.
opacitynumberColor opacity.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Linear gradient fill in selected mode. Learn more about coloring.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Gradient keys.
anglenumberGradient angle.
modeboolean | anychart.graphics.vector.Rect | ObjectGradient mode.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.
Radial gradient fill in selected mode. Learn more about coloring.

Params:

NameTypeDescription
keysArray.<(anychart.graphics.vector.GradientKey|string)>Color-stop gradient keys.
cxnumberX ratio of center radial gradient.
cynumberY ratio of center radial gradient.
modeanychart.graphics.math.RectIf defined then userSpaceOnUse mode, else objectBoundingBox.
opacitynumberOpacity of the gradient.
fxnumberX ratio of focal point.
fynumberY ratio of focal point.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

Params:

NameTypeDescription
imageSettingsanychart.graphics.vector.FillObject with settings.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

startIndex

Getter for the start index.

Returns:

number - Start index.
Setter for the start index.

Params:

NameTypeDefaultDescription
indexnumber
0
Start index to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

tooltip

Getter for tooltip settings.

Returns:

anychart.core.ui.Tooltip - Tooltip settings.
Getter for tooltip settings.

Params:

NameTypeDefaultDescription
settingsObject | boolean | null
true
Tooltip settings.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

top

Getter for element top bound settings.

Returns:

number | string | undefined - Element's top bound setting.
Setter for element top bound settings.

Params:

NameTypeDefaultDescription
topnumber | string | null
null
Top bound setting for the element.

Returns:

anychart.core.ui.DataGrid - Returns self for method chaining.

verticalOffset

Getter for the vertical offset.

Returns:

number - Vertical offset.
Setter for the vertical offset.

Params:

NameTypeDefaultDescription
offsetnumber
0
Vertical offset to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.

width

Getter for element width settings.

Returns:

number | string | undefined - Element's width setting.
Setter for element width setting.

Params:

NameTypeDefaultDescription
widthnumber | string | null
null
Width settings for the element.

Returns:

anychart.core.ui.DataGrid - Returns self for method chaining.

zIndex

Getter for the Z-index of the element.

Returns:

number - Z-index.
Setter for the Z-index of the element.

Params:

NameTypeDefaultDescription
zIndexnumber
0
Value to set.

Returns:

anychart.core.ui.DataGrid - Self instance for method chaining.