POST - Add child organization to a Partner Portal

Purpose

The API creates a new child organization, along with the domain and other details and associates it with the partner portal. Only the users having Partner Admin role can use this API.

Request URL

https://mail.zoho.com/api/organization

Scope

partner.organization

Request Body (JSON Object)

Parameter	Data Type	Allowed Values	Description
domainName*	String	Domain name	The domain of the child organization that needs to be added
orgName	String	Organization name	The name of the child organization that needs to be added
emailId*	String	Email ID	The contact email address of the child organization owner
firstName*	String	First Name	The First Name of the Super Admin of the child organization
lastName*	String	Last Name	The Last Name of the Super Admin of the child organization
password	String	Password	The password of the Super Admin account of the child organization

* - Mandatory parameters

Sample Request

The below request adds the domain zylkerchildnew.com to the Partner Portal.

Create a JSON Configuration
Add a New User

Grid Options

columnHeader

columnHeader will be enabled by default, and by setting it to false, you can disable the columnHeader, and columnHeader will not appear in the grid.

You can also configure the below options for the columnHeader.

Note: If you do not configure the columnHeader options, it will be set to it's default state.

CopiedcolumnHeader : {
        height : number,
        manualResize : true | false,
        readOnly : true | false,
        renderOnResize : true | false,
        reorderable : true | false
}

height

The height of the columnHeader can be adjusted using the height attribute. The minimum and maximum acceptable range is 30 and 100.

Type	Value	Default
number	any number	30

manualResize

Setting manualResize to true allows users to manually resize the column width by using the resize cue. The 'renderOnResize' option can only be utilized when 'manualResize' is set to true.

Type	Value	Default
boolean	true \| false	true

readOnly

Setting readOnly to true will prevent the users from editing the column headers.

Type	Value	Default
boolean	true \| false	true

renderOnResize

By setting renderOnResize to true, the grid will be rendered in the background when the user resizes the column using the resizing cue. When set to false, the grid will be rendered only after the user completes the dragging action. In this case, a 'preview line' will be visible during the dragging operation.

Type	Value	Default
boolean	true \| false	true

reorderable

Setting "reorderable" to true allows users to rearrange columns easily through drag and drop functionality.

Type	Value	Default
boolean	true \| false	false

columnHighlighter

Enabling this feature will cause the entire column to be highlighted when the user hovers the mouse over it.

Type	Value	Default
boolean	true \| false	false

fillSeries

By setting fillseries to true, users can drag the active cell to fill a set of cells. You can refer here to understand the different types of Fillseries.

Type	Value	Default
boolean	true \| false	true

freezeColumnUpTo

Using freezeColumnUpTo, you can freeze the 'n' number of columns starting from the first column while setting up the grid. The number of columns frozen will be visible in the grid even if the user scrolls.

Type	Value	Default
number	Any number	0

freezeRowUpTo

Using freezeRowUpTo, you can freeze the 'n' number of rows starting from the first row while setting up the grid. The number of rows frozen will be visible in the grid even if the user scrolls.

Type	Value	Default
number	any number	0

height

To set the height of the grid.

Type	Value	Default
number	size in pixels	Takes the innerHeight

plugins

You can enable the plugins that you need while setting up the grid. You can also enable them later using the enable API.

Param	Type	Value
contextMenu	boolean	true \| false
filter	boolean	true \| false
pagination	object \| boolean	paginationObject \| true \| false
search	object \| boolean	searchObject \| true \| false
sort	boolean	true \| false

readOnly

Setting readOnly to true for the grid will prevent the users from performing any actions like insert, delete, and update in the grid.

Type	Value	Default
boolean	true \| false	false

rowHeader

Row Header will be enabled by default, and by setting it to false, you can disable the rowHeader, and it will not appear in the grid.

You can also configure the below options for rowHeader

Note: If you do not configure the rowHeader options, it will be set to it's default state.

CopiedrowHeader : {
        label : boolean | function(row : number) : string,
        width : number
}

label

The rowLabel represents the content shown in the rowHeader. By default, it is enabled, and if you set it to false, the rowHeader will render only the row checkbox. Below are the possible values for the label key:

Type	Value	Default
boolean	true \| false	true
function	function (row: number) : string	-

CopiedrowHeader : {
        label : boolean | function(row : number) : string 
}

width

The width of the rowHeader can be adjusted using the width key. The minimum and maximum acceptable range is 30 and 100.

Type	Value	Default
number	any number	50

CopiedrowHeader : {
        width : number
}

rowHighlighter

Enabling this feature will cause the entire row to be highlighted when the user hovers the mouse over it.

Type	Value	Default
boolean	true \| false	false

rtl

Setting 'rtl' to true will render the grid from right to left.

Type	Value	Default
boolean	true \| false	false

selection

Selection features include row, column, cell, and range selection. When selection is set to false, these features will not work.

Type	Value	Default
boolean	true \| false	true

styles

Using the styles option, you can customize the grid to fit your product ecosystem. There are a set of styles that you can use to customize the grid.

Style	Type	Default	Value
font	string	Puvi	Any font
color	string	Black	Any color
background	string	white	Any color
size	number	11 (in pt)	Between 7 and 50
bold	boolean	false	true \| false
italic	boolean	false	true \| false
underline	boolean	false	true \| false
overline	boolean	false	true \| false
strikeThrough	boolean	false	true \| false
verticalAlign	string	'middle'	'top' \| 'middle' \| 'bottom'
horizontalAlign	string	Based on field types	'left' \| 'center' \| 'right'
padding	object	top : 2, left : 4, right : 4, bottom : 2	value in pixel

theme

By default, the grid has a light theme. You can set a different theme, midNightBlue, when you first configure the grid. Even after setting the initial theme, you can change the grid's theme while it is running using the changeTheme API.

Type	Value	Default
string	'light' \| 'midNightBlue'	'light'

width

To set the width of the grid.

Type	Value	Default
number	Size in Pixels	Takes the innerWidth

zoomLevel

Below are the zoom levels supported by DataGrid,

You can give any number between the range of 50 and 400. The numbers will be considered in percentages and rounded off to the nearest value from the above mentioned options.

Type	Value	Default
number	Any number within the range	100

Grid methods

addBufferSpaceInContainerEnds

This API will add the specified additional space at the end of the grid, following the last row and column.

Param	Type
width	number
height	number

Copied<gridInstance>.addBufferSpaceInContainerEnds(width, height);

addEventListener

The Grid supports many custom events. You can attach a callback function for these events using this API. Refer to the list of grid events.

Copied<gridInstance>.addEventListener(eventName, callback);

blur

This method will remove the focus in the grid.

Copied<gridInstance>.blur();

changeTheme

changeTheme API is used to alter your grid's theme. There are two theme options available currently.

light
midNightBlue

Copied<gridInstance>.changeTheme(themeName);

clearAllCache

This method will clear all the cell caches of the grid.

Copied<gridInstance>.clearAllCache();

clearCache

This method will clear the cell cache of a specific range in the grid.

Param	Type	Value
startRow	number	row index of the first cell in the selected range
startColumn	number	column index of the first cell in the selected range
endRow	number	row index of the last cell in the selected range
endColumn	number	column index of the last cell in the selected range

Copied<gridInstance>.clearCache(startRow, startColumn, endRow, endColumn);

clearColumnHeaderCache

This method will clear the cell cache of all the column headers in the grid.

Copied<gridInstance>.clearColumnHeaderCache();

clearRange

To clear a specific range of cells based on the provided values.

Param	Type
startRow	number(index based starts from 0)
endRow	number(index based starts from 0)
endColumn	number(index based starts from 0)
startColumn	number(index based starts from 0)

Copied<gridInstance>.clearRange(startRow, startColumn, endRow, endColumn);

copy

This method will copy a specific range in the grid.

Param	Type	Value
startRow	number	row index of the first cell in the selected range
startColumn	number	column index of the first cell in the selected range
endRow	number	row index of the last cell in the selected range
endColumn	number	column index of the last cell in the selected range

Copied<gridInstance>.copy(startRow, startColumn, endRow, endColumn);

download

To download the entire grid data in the form of a JSON / CSV.

Param	Type	Value
fileName	string	string
format	string	'CSV' \| 'JSON'

Copied<gridInstance>.download(fileName, format);

focus

This method will enable focus on the grid.

Copied<gridInstance>.focus();

getViewPort

This method will return to the current visible region of the grid. It returns the viewport range as an array of objects.

Range values	Type	Value
startRow	number	row index of the first cell in the selected range
startColumn	number	column index of the first cell in the selected range
endRow	number	row index of the last cell in the selected range
endColumn	number	column index of the last cell in the selected range

Note: getViewPort will only include the scrollable region of the grid. It will not have the columns or rows that are frozen.

Copied<gridInstance>.getViewPort();

goToCell

This API will set the active cell or move the selection to a specific cell within a grid based on the values provided.

Param	Type
row	number
column	number

Copied<gridInstance>.goToCell(row, column);

goToColumn

This API will set the active column or move the selection to the current row of a specific column within a grid based on the values provided.

Param	Type
column	number

Copied<gridInstance>.goToColumn(column);

goToRow

This API will set the active row or move the selection to the current column of a specific row within a grid based on the values provided.

Param	Type
row	number

Copied<gridInstance>.goToRow(row);

isRedoAvailable

To check if redo action is available. Returns true if redo action can be performed and false otherwise.

Return Type	Value
boolean	true \| false

Copied<gridInstance>.isRedoAvailable();

isUndoAvailable

To check if undo action is available. Returns true if undo action can be performed and false otherwise.

Return Type	Value
boolean	true \| false

Copied<gridInstance>.isUndoAvailable();

redo

To redo the user's last action on the grid.

Copied<gridInstance>.redo();

refresh

This method will refresh the grid.

Copied<gridInstance>.refresh();

removeEventListener

Using this API, you can remove the callback functions attached for any of these events. Refer to the list of grid events.

Copied<gridInstance>.removeEventListener(eventName, callback);

reset

reset API will reset the grid to its default state. The grid will be rendered with 10 rows and 5 columns with the default column type as 'text'.

Copied<gridInstance>.reset();

resizeTo

This API will resize the grid based on the dimension(width and height) provided. The current dimension will be checked and updated accordingly.

Param	Type
width	number
height	number

Copied<gridInstance>.resizeTo(width, height);

scrollBy

scrollBy allows you to scroll by a specified amount relative to its current position.

Param	Type
dx	number
dy	number

Copied<gridInstance>.scrollBy(dx, dy);

scrollTo

To scroll from the current position of the grid to the specified (x, y) position.

Param	Type
x	number
y	number

Copied<gridInstance>.scrollTo(x, y);

undo

To undo the user's last action on the grid.

Copied<gridInstance>.undo();

updateOptions

This API will update the default gridOptions like row header, row/column freezing, etc.

Copied<gridInstance>.updateOptions(gridOptions);

updateStyle

This API can be used to update the overall style of the grid.

Param	Type	Value
style	object	styles
force(optional)	boolean	true \| false

When force param is set to 'true', all the existing styles will be removed and the style properties provided in the style object will only be applied. Otherwise, the properties provided in the style object will be added to the existing grid style.

Copied<gridInstance>.updateStyle(style, force);

zoom

This API will set the zoom level of the grid based on the zoom value you provide. By default, the zoom level is set to 100%. The zoom level should be provided in the range of 50,100,200,300,400.

Param	Type
Zoomlevel	number

Copied<gridInstance>.zoom(Zoomlevel);

Grid Events

Zoho DataGrid offers the following events to which you can attach an evenlistener a

Event Name

mousedown

mousemove

mouseleave

viewportChange

rowHoverChange

columnHoverChange

cellHoverChange

doubleClick

scroll

mousemove

When a mousemove event occurs in the grid, the attached callback function will be executed.

Param	Description	Type
event	Mouse event	object
row	index of the current row	number
column	index of the current column	number
cell dimension	{x - absolute x position, y - absolute y position, width - width, height - height}	object
type	'cell' \| 'columnHeader' \| 'rowHeader' \| 'selectAll'	string

mousedown

When mousedown event occurs in the grid, the attached callback function will be executed.

Param	Description	Type
event	Mouse event	object
row	index of the current row	number
column	index of the current column	number
cell dimension	{x - absolute x position, y - absolute y position, width - width, height - height}	object
type	'cell' \| 'columnHeader' \| 'rowHeader' \| 'selectAll'	string

mouseleave

When mouseleave event occurs in the grid, the attached callback function will be executed.

Param	Description	Type
event	Mouse event	object

viewportChange

When the currently visible viewport of the grid changes, the attached callback function will be executed.

Param	Description	Type
range	[{startRow : number, startColumn : number, endRow : number, endColumn : number}]	[ ] object

rowHoverChange

When rowHoverChange event occurs in the grid, the attached callback function will be executed.

Param	Description	Type
event	Mouse event	object
row	index of the current row	number
column	index of the current column	number
cell dimension	{x - absolute x position, y - absolute y position, width - width, height - height}	object
type	'cell' \| 'columnHeader' \| 'rowHeader' \| 'selectAll'	string

columnHoverChange

When columnHoverChange event occurs in the grid, the attached callback function will be executed.

Param	Description	Type
event	Mouse event	object
row	index of the current row	number
column	index of the current column	number
cell dimension	{x - absolute x position, y - absolute y position, width - width, height - height}	object
type	'cell' \| 'columnHeader' \| 'rowHeader' \| 'selectAll'	string

cellHoverChange

When cellHoverChange event occurs in the grid, the attached callback function will be executed.

Param	Description	Type
event	Mouse event	object
row	index of the current row	number
column	index of the current column	number
cell dimension	{x - absolute x position, y - absolute y position, width - width, height - height}	object
type	'cell' \| 'columnHeader' \| 'rowHeader' \| 'selectAll'	string

doubleClick

When doubleClick event occurs in the grid, the attached callback function will be executed.

Param	Description	Type
event	Mouse event	object
row	index of the current row	number
column	index of the current column	number
cell dimension	{x - absolute x position, y - absolute y position, width - width, height - height}	object
type	'cell' \| 'columnHeader' \| 'rowHeader' \| 'selectAll'	string

scroll

When scroll event occurs in the grid, the attached callback function will be executed.

Param	Description	Type
scroll left	Number of pixels content is scrolled from its left edge	number
scroll top	Number of pixels content is scroleed from its top edge	number

Row

addRow

This API will insert an 'n' number of rows after the last row in the grid. If no parameter is passed, a single row will be inserted at the end by default.

Param	Type	Default
count(optional)	number	1

Copied<gridInstance>.addRow(count);

appendRow

To append one or 'n' number of rows in the grid. Multiple rows can be appended by providing multiple data sets in the object.

Param	Key	Type
rowObject	row	number
	datas	string [][]
	rowHeights	number \| number []

Note: By default, the new row will be added at the end of the grid after the last row.

Copied<gridInstance>.appendRow(rowObject);

copyRow

To copy the content of one or a continuous set of rows. If no value is provided for endRow, only the row specified by the startRow parameter will be copied.

Param	Type
startRow	number
endRow (optional)	number

Note: The value provided in the startRow should be less than or equal to that provided in the endRow.

Copied<gridInstance>.copyRow(startRow, endRow);

copyRows

To copy a set of rows that are not adjacent to each other.

Param	Type
rows	number[ ]

Note: The values in the array should represent row indices. They should be positive and less than the total number of rows.

Copied<gridInstance>.copyRows(rows);

getRowCount

This API will return the number of rows in the grid.

ReturnType: number

Copied<gridInstance>.getRowCount();

insertRowAbove

This API will insert the required rows above the mentioned row based on the values you provide. A row will be inserted by default if the second parameter is not provided.

Param	Type
row	number(index based - starts from 0)
count(optional)	number

Copied<gridInstance>.insertRowAbove(row, count);

insertRowBelow

This API will insert the required number of rows below the mentioned row based on the values you provide. A single row will be inserted by default if the second parameter is not provided.

Param	Type
row	number(index based - starts from 0)
count(optional)	number

Copied<gridInstance>.insertRowBelow(row, count);

lockRow

To lock one or a continuous set of rows. If no value is provided for endRow, only the row specified by the startRow parameter will be locked.

Param	Type
startRow	number
endRow (optional)	number

Note: The value provided in the startRow should be less than or equal to that provided in the endRow.

Copied<gridInstance>.lockRow(startRow, endRow);

lockRows

To lock a set of rows that are not adjacent to each other.

Param	Type
rows	number [ ]

Note: The values in the array should represent row indices. They should be positive and less than the total number of rows.

Copied<gridInstance>.lockRows(rows);

removeRow

To remove one or a continuous range of rows from the grid. If no value is provided for endRow, only the row specified by the startRow parameter will be removed.

Param	Type
startRow	number
endRow (optional)	number

Note: The value provided in the startRow should be less than or equal to that provided in the endRow.

Copied<gridInstance>.removeRow(startRow, endRow);

removeRows

To remove a set of rows that are not adjacent to each other.

Param	Type
rows	number[ ]

Note: The values in the array should represent row indices. They should be positive and less than the total number of rows.

Copied<gridInstance>.removeRows(rows);

resetRow : server

resetRow API will clear the row axis cache in the grid.

Copied<gridInstance>.resetRow();

setAllRowHeightAs

setAllRowHeightAs will reset the height of entire rows to the value provided.

Param	Type
height	number

Note: Minimum row height that can be set - 30 px

Maximum row height that can be set - 100 px

Copied<gridInstance>.setAllRowHeightAs(height);

setRowHeight

setRowHeight is to set the height of a particular Row.

Param	Type
row	number(index based - starts from 0)
height	number

Note: Minimum row height that can be set - 30 px

Maximum row height that can be set - 100 px

Copied<gridInstance>.setRowHeight(row, height);

unlockRow

To unlock one or a continuous set of locked rows. If no value is provided for endRow, only the row specified by the startRow parameter will be unlocked.

Param	Type
startRow	number
endRow (optional)	number

Note: The value provided in the startRow should be less than or equal to that provided in the endRow.

Copied<gridInstance>.unlockRow(startRow, endRow);

unlockRows

To unlock the locked rows that are not adjacent to each other.

Param	Type
rows	number [ ]

Note: The values in the array should represent row indices. They should be positive and less than the total number of rows.

Copied<gridInstance>.unlockRows(rows);

addRow
appendRow
copyRow
copyRows
getRowCount
insertRowAbove
insertRowBelow
lockRow
lockRows
removeRow
removeRows
resetRow:Server
setAllRowHeightAs
setRowHeight
unlockRow
unlockRows

Column

addColumn

This API will insert the 'n' number of columns after the last column in the grid. If no parameter is passed, a single column will be inserted at the end by default.

Param	Type	Default
count (optional)	number	1
columnObject (optional)	object(object)	{ 'type' : 'text' }

Param	Object key	Type
columnObject	type (optional)	string
	styles (optional)	object
	properties (optional)	object

Note: If the columnObject is not passed, by default, a column with a text field will be added/inserted.

Copied<gridInstance>.addColumn(count, columnObject);

copyColumn

To copy the content of one or a continuous set of columns. If no value is provided for endColumn, only the column specified by the startColumn parameter will be copied.

Param	Type
startColumn	number
endColumn (optional)	number

Note: The value provided in the startColumn should be less than or equal to that provided in the endColumn.

Copied<gridInstance>.copyColumn(startColumn, endColumn);

copyColumns

To copy a set of columns that are not adjacent to each other.

Param	Type
columns	number[ ]

Note: The values in the array should represent column indices. They should be positive and less than the total number of columns.

Copied<gridInstance>.copyColumns(columns);

getColumnCount

This API will return the number of columns in the grid.

ReturnType: number

Copied<gridInstance>.getColumnCount();

insertColumnAfter

This API will insert the required number of columns after the mentioned column. If the second parameter is not provided, a single column will be inserted by default.

Param	Type	Default
column	number(index based - starts from 0)	-
count (optional)	number	1
columnProperties (optional)	object \| object []	{ 'type' : 'text' }

Note: If the columnProperties is not passed, by default, a column with a text field will be inserted.

Copied<gridInstance>.insertColumnAfter(column, count, columnProperties);

insertColumnBefore

This API will insert the required columns before the mentioned column. A single column will be inserted by default if the second parameter is not provided.

Param	Type	Default
column	number(index based - starts from 0)	-
count(optional)	number	1
columnProperties (optional)	object \| object []	{ 'type' : 'text' }

Note: If the columnProperties is not passed, by default, a column with a text field will be inserted.

Copied<gridInstance>.insertColumnBefore(column, count, columnProperties);

lockColumn

To lock one or a continuous set of columns. If no value is provided for endColumn, only the column specified by the startColumn parameter will be locked.

Param	Type
startColumn	number
endColumn (optional)	number

Note: The value provided in the startColumn should be less than or equal to that provided in the endColumn.

Copied<gridInstance>.lockColumn(startColumn, endColumn);

lockColumns

To lock a set of columns that are not adjacent to each other.

Param	Type
columns	number[ ]

Note: The values in the array should represent column indices. They should be positive and less than the total number of columns.

Copied<gridInstance>.lockColumns(columns);

removeColumn

To remove one or a continuous range of columns from the grid. If no value is provided for endColumn, only the column specified by the startColumn parameter will be removed.

Param	Type
startColumn	number
endColumn (optional)	number

Note: The value provided in the startColumn should be less than or equal to that provided in the endColumn.

Copied<gridInstance>.removeColumn(startColumn, endColumn);

removeColumns

To remove a set of columns that are not adjacent to each other.

Param	Type
columns	number[ ]

Note: The values in the array should represent column indices. They should be positive and less than the total number of columns.

Copied<gridInstance>.removeColumns(columns);

resetColumn: server

resetColumn API will clear the column axis cache in the grid.

Copied<gridInstance>.resetColumn();

setAllColumnWidthAs

setAllColumnWidthAs will reset the width of entire columns to the value provided.

Param	Type
width	number

Note: Minimum column width that can be set - 80 px
Maximum column width that can be set - 500 px

Copied<gridInstance>.setAllColumnWidthAs(width);

setColumnWidth

setColumnWidth API is to set the width of a particular column.

Param	Type
column	number(index based - starts from 0)
width	number

Note: Minimum column width that can be set - 80 px
Maximum column width that can be set - 500 px

Copied<gridInstance>.setColumnWidth(column, width);

unlockColumn

To unlock one or a continuous set of locked columns. If no value is provided for endColumn, only the column specified by the startColumn parameter will be unlocked.

Param	Type
startColumn	number
endColumn (optional)	number

Note: The value provided in the startColumn should be less than or equal to that provided in the endColumn.

Copied<gridInstance>.unlockColumn(startColumn, endColumn);

unlockColumns

To unlock the locked columns that are not adjacent to each other.

Param	Type
columns	number [ ]

Note: The values in the array should represent column indices. They should be positive and less than the total number of columns.

Copied<gridInstance>.unlockColumns(columns);

updateColumnHeaderStyles

This API will update the columnHeader Styles based on the properties you provide.

Param	Type
column	number(index based - starts from 0)
styles	object

Copied<gridInstance>.updateColumnHeaderStyles(column, styles);

updateColumnProperties

This API will update the column properties of a particular column.

Param	Type
column	number(index based - starts from 0)
properties	object

Copied<gridInstance>.updateColumnProperties(column, properties);

updateColumnStyles

This API will update the column styles based on the properties you provide.

Param	Type
column	number(index based - starts from 0)
styles	object

Copied<gridInstance>.updateColumnStyles(column, styles);

addColumn
copyColumn
copyColumns
getColumnCount
insertColumnAfter
insertColumnBefore
lockColumn
lockColumns
removeColumn
removeColumns
resetColumn:Server
setAllColumnWidthAs
setColumnWidth
unlockColumn
unlockColumns
updateColumnHeaderStyles
updateColumnProperties
updateColumnStyles

Client-Side

There is a certain structure you have to follow to load the data in your grid. The structure is explained in detail below.

Structure

Copiedconst Data = {
    data         : string[][],
    columnHeaders: string[],
    columns      : JSONObject[],
    columnwidths : number | number[],
    rowHeights   : number | number[]
}

Note: The columnHeaders, columns, columnWidths, and rowHeights are optional properties. The grid will be rendered with the default configurations if you do not pass them.

Column Header

The Column Header data should be in the 2D array format with the type 'string.'

CopiedcolumnHeaders : [] String

Column

Provide an array of JSON objects just like the structure mentioned below.

Copied[ 
    {
        type,     
        styles,    
        properties,
        source,
        autoFit,  
        renderer,
        validator	
    } 
]

Param	Type
type	string
styles	object
properties	object
source	string[ ]
renderer	function
autoFit	number
validator	function

Column Type:

Column Type should be String representation.

ColumnType	Value	DataFormat
Text	text	Text
Numeric	number	Number
Currency	currency	Number
Percent	percent	Number
Date&Time	dateTime	Timestamp
Checkbox	checkbox	Boolean
Rating	rating	Number
Phone Number	phoneNumber	String
Email	email	String
URL	url	String
Dotchart	dotChart	Number
Dropdown	dropDown	String
Auto Complete	autoComplete	String
Multi Select	multiSelect	Array
Custom Dom	custom	String \| Number

Column Style:

Column Style should be of String representation. You can modify the look of the columns using the styles.

Style	Default values	Details
fontFamily	Roboto	Webfont, Mono Space font, which we suggest using for better clarity on Numbers.
color	Black	To match with a white background
background	white	To match with black font color
size	11	Decent size for the data types
bold	false	Bolder in size for highlight
italic	false	Stylish for highlight
underline	false	Stylish for highlight
overline	false	Stylish for highlight
strikeThrough	false	Stylish for highlight
verticalAlign	'middle'	'top' \| 'middle' \| 'bottom'
horizontalAlign	Based on field types	'left' \| 'center' \| 'right'

ColumnType	Properties
Text	format : 'none' \| 'initialCaps' \| 'uppercase' \| 'lowercase' \| 'sentenceCase'
Numeric	precision: precision value, thousandSeparator : true \| false
Currency	symbol: '$', symbolPosition : 0 \| 1 \| 2 \| 3, //this value will be changed soon precision: precision value, thousandSeparator : true \| false
Percent	precision: 2, showSymbol: true\|false, thousandSeparator: true\|false, fromDecimal : true\|false,
Date&Time	time: true \| false, dateFormat : DATE_FORMATS, timeFormat: TIME_FORMATS, hourCycle : '12H' \| '24H'
Checkbox	color: 'any color'
Rating	color: 'any color,' maxCount: maxCount
Phone Number	format: PHONE_NUMBER_FORMATS
Dotchart	lowColor : 'any color,' highColor : 'any color,' benchMark : benchMarkValue(number), maxCount: count

Property Formats:

DATE FORMATS
'DD/MM/YYYY'
'YYYY/MM/DD'
'Montd D, YYYY'
'M/D/YYYY'
'D/M/YYYY'
'YYYY/M/D'
'MMDDYYYY'
'DDMMYYYY'
'YYYYMMDD'
'MonDDYYYY'
'DDMonYYYY'
'YYYYMonDD'
'D Montd, YYYY'
'YYYY, Montd D'
'Mon-DD-YYYY'
'DD-Mon-YYYY'
'YYYY-Mon-DD'
'Mon DD, YYYY'
'DD Mon, YYYY'
'YYYY, Mon DD'
'bM/bD/YYYY'
'bD/bM/YYYY'
'YYYY/bM/bD'
'q Q YY'
'q Q YYYY'
'MMM YY'
'MMM YYYY'
'WW WK YY'
'WW WK YYYY'

TIME FORMATS
'HH:MM:SS'
'HH:MM'
'HH'
'HH:MM:SS timeZone'
'HH:MM timeZone'
'HH timeZone'
'HH:MM:SS TZN'
'HH:MM TZN'
'HH TZN'

PHONENUMBER FORMATS
'+xx xxxxx xxxxx'
'+xx-xxxxx-xxxxx'
'+xx xxx xxx xxxx'
'+xx-xxx-xxx-xxxx'
'xxxxx xxxxx'
'xxxxx-xxxxx'
'xxx xxx xxxx'
'xxx-xxx-xxxx'
'xxx xxx-xxxx'
'(xxx) xxx-xxxx'
'xxxxxxxxxx

Custom Field properties:

Apart from the above, the renderer() function can be used for the custom fields you design for your grid—and the validator() function to add your custom validations to the required field types.

Column Width

The column width can be configured by providing a single number or an array of numbers.

CopiedcolumnWidths : number | number[] | string

Example

Note: Default value: 100px

Copied/* Set an unique column width for all columns */                                 
columnWidths: 200

/* Set different column width */
columnWidths: [100, 200,300, 150]

/* Set an autofit column width for all columns */
columnWidths: 'auto'

Note: Zero('0') will set the default width

Row Height

The row height can be made by providing a single number or an array of numbers.

CopiedrowHeights : Number | []Number

Example:

Note: Default value: 30px

Copied/* Set an unique row height for all columns */
rowHeights: 30

/* Set different row height */
rowHeights: [30, 40, 20, 50]

Note: Zero('0') will set the default height

Structure
Column Header
Column
Column Type
Column Style
Custom Field properties
Column Width
Row Height

Server-Side

DataGrid provides a set of APIs to bind the Server-Side Data to the Grid. This partial data rendering method has many advantages.

Partial data rendering enables dynamic data loading, where additional data is loaded and rendered as the user scrolls through the Grid or performs other actions rather than loading all the data simultaneously.
Loading and rendering a large amount of data in a data grid can be slow and resource-intensive, mainly if the data contains many columns or rows. Partial data rendering can improve performance by loading and rendering only the currently visible data on the screen rather than the entire dataset.
Loading and rendering only a subset of the data in the Grid can reduce memory usage, which can be particularly important in applications with limited resources.
DataGrid provides an abstract class that can bind the data with the Grid.

Copied<div id="gridContainer"></div>

Copiedconst container     = document.querySelector('#gridContainer');
const configuration = {
    width: 500,
    height: 500
}
const grid = new window.DataGrid.Server(container, configuration);

// all methods of DataProvider are optional

class dataProvider extends DataGrid.DataProvider {
    getCellData(row, col) {
        return `${row}, ${col}`
    }
    getMaxRow() {
        return 100;
    }
    getMaxColumn() {
        return 100;
    }
}

grid.renderData(new dataProvider());

getCellData

The data provided in this API will be rendered in the grid to the respective row and column.

Return Type: String

Param	Type
row(index based)	number
column(index based)	number

getColumnLabel

The data provided in this API will be rendered as the column header to the respective column.

ReturnType: String

Param	Type
column(index based)	number

getColumnWidth

The value provided in this API will be used as the column width for the respective column.

ReturnType: number

Param	Type
column(index based)	number

getRowHeight

The value provided in this API will be used as the row height for the respective row.

ReturnType: number

Param	Type
row(index based)	number

getMaxRow

The value provided in this API will be considered as the total number of rows to be rendered in the grid.

ReturnType: number

Param	Type
row(index based)	number

getMaxColumn

The value provided in this API will be considered as the total number of columns to be rendered in the grid.

ReturnType: number

Param	Type
column(index based)	number

getColumnProperty

The column object provided in this API will be used to render the styles and properties. of a particular column.

ReturnType: Array of objects

Param	Type
column(index based)	number

getColumnHeaderProps

The object provided in this API will be used to render the styles for a particular column header.

ReturnType: object{styles}

Param	Type
column(index based)	number

getCellData
updateCellData
setCellDataForRange
clearCellData
getColumnLabel
getColumnWidth
getRowHeight
getMaxRow
getMaxColumn
getColumnProps
getColumnHeaderProps

Plugins

enable

You can easily enable plugins using the enablePlugin API.

Param	Type	Value
pluginName	string	'pagination' \| 'search' \| 'sort' \| 'filter' \| 'contextMenu'
options (optional)	object	properties

Copied<gridInstance>.plugins.enable(pluginName, options)

disable

You can easily disable plugins using the disablePlugin API.

Param	Type	Value
pluginName	string	'pagination' \| 'search' \| 'sort' \| 'filter' \| 'contextMenu'

Copied<gridInstance>.plugins.disable(pluginName)

update

You can easily update plugins using the updatePlugin API.

Param	Type	Value
pluginName	string	'pagination' \| 'search' \| 'sort' \| 'filter' \| 'contextMenu'
options (optional)	object	properties

Copied<gridInstance>.plugins.update(pluginName, options)

A set of properties comes along with each plugin. These properties help you to configure the plugins as you wish.

Note: Properties are optional and can be provided if required.

enable
disable
update

Properties

Pagination

This plugin provides functionality to break down an extensive data set into smaller pieces and display them in a grid format with navigation controls that allow the user to move between different data pages.

Properties	Type	Default	Description
style	string	style1	To choose from style1, style2, style3, style4
rowsPerPageOptions	[ ] number	[5, 10, 25, 50, 100, 250]	Number of rows in array. Will be present as the options in the dropdown menu in pagination.
rowsPerPage	number	25	Number of rows per page in default.
suppressUI	boolean	false

Search

Properties	Type	Default	Description
suppressUI	boolean	false

Events

The hooks feature will add a listener to a particular hook name to the grid. It can be used for executing custom methods based on your requirements.

dataUpdate

This hook will be fired when a cell's data is being updated.

Param	Type	Description
row	number	row index of the updated cell
column	number	column index of the updated cell
content	string	content that has been updated

Copied<gridInstance>.onBefore('dataUpdate',()=>{
    console.log("dataUpdate onBefore");
    return true;
});

<gridInstance>.onAfter('dataUpdate',()=>{
    console.log("dataUpdate onAfter");
});

dataDelete

This hook will be fired when a cell's content is deleted.

Param	Type	Description
start row	number	row index of the first cell in the selected range
start column	number	column index of the first cell in the selected range
end row	number	row index of the last cell in the selected range
end column	number	column index of the previous cell in the selected range

Copied<gridInstance>.onBefore('dataDelete',()=>{
    console.log("cell data delete onBefore");
    return true;
});

<gridInstance>.onAfter('dataDelete',()=>{
    console.log("cell data delete onAfter");
});

dataPaste

This hook will be fired when content is pasted.

Param	Type	Description
start row	number	row index of the first cell in the selected range
start col	number	column index of the first cell in the selected range
content	array	content that has been pasted

Copied<gridInstance>.onBefore('dataPaste',()=>{
    console.log("data paste onBefore");
    return true;
});

<gridInstance>.onAfter('dataPaste',()=>{
    console.log("data paste onAfter");
});

dataCopy

This hook will be fired when content is copied.

Param	Type	Description
startRow	number	row index of the first cell in the selected range
startColumn	number	column index of the first cell in the selected range
endRow	number	row index of the last cell in the selected range
endColumn	number	column index of the last cell in the selected range

Copied<gridInstance>.onBefore('dataCopy',()=>{
    console.log("data copy onBefore");
    return true;
});

<gridInstance>.onAfter('dataCopy',()=>{
    console.log("data copy onAfter");
});

dataCut

This hook will be fired when content is cut.

Param	Type	Description
start row	number	row index of the first cell in the selected range
start column	number	column index of the first cell in the selected range
end row	number	row index of the last cell in the selected range
end column	number	column index of the last cell in the selected range

Copied<gridInstance>.onBefore('dataCut',()=>{
    console.log("data cut onBefore");
    return true;
});

<gridInstance>.onAfter('dataCut',()=>{
    console.log("data cut onAfter");
});

columnInsertBefore

This hook will be fired when columns are inserted before the current column.

Param	Type	Description
column	number	Column index of the selected column in the selected range
count	number	Number of columns inserted
column props	object	object

Copied<gridInstance>.onBefore('columnInsertBefore',()=>{
    console.log("columnInsertBefore initiated");
    return true;
});

<gridInstance>.onAfter('columnInsertBefore',()=>{
    console.log("columnInsertBefore done");
});

columnInsertAfter

This hook will be fired when columns are inserted after the current column.

Param	Type	Description
column	number	Column index of the selected column in the selected range
count	number	Number of columns inserted
column props	object	object

Copied<gridInstance>.onBefore('columnInsertAfter',()=>{
    console.log("columnInsertAfter initiated");
    return true;
});

<gridInstance>.onAfter('columnInsertAfter',()=>{
    console.log("columnInsertAfter done");
});

rowInsertAbove

This hook will be fired when a row is inserted above the current row.

Param	Type	Description
row	number	index of the row selected
count	number	number of rows inserted

Copied<gridInstance>.onBefore('rowInsertAbove',()=>{
    console.log("rowInsertAbove initiated");
    return true;
});

<gridInstance>.onAfter('rowInsertAbove',()=>{
    console.log("rowInsertAbove done");
});

rowInsertBelow

This hook will be fired when a row is inserted below the current row.

Param	Type	Description
row	number	row index of the row selected
count	number	number of rows inserted

Copied<gridInstance>.onBefore('rowInsertBelow', ()=>{
    console.log("rowInsertBelow initiated");
    return true;
});

<gridInstance>.onAfter('rowInsertBelow', ()=>{
    console.log("rowInsertBelow done");
});

columnAutoFit

This hook will be fired when autoFit functionality is triggered.

Param	Type	Description
column	number	column index of the selected column

Copied<gridInstance>.onBefore('columnAutoFit', ()=>{
    console.log("columnAutoFit initiated");
    return true;
});

<gridInstance>.onAfter('columnAutoFit', ()=>{
    console.log("columnAutoFit done");
});

columnDelete

This hook will be fired when a column is deleted from your grid.

Param	Type	Description
column	number	column index of the selected column

Copied<gridInstance>.onBefore('columnDelete', ()=>{
    console.log("columnDelete initiated");
    return true;
});

<gridInstance>.onAfter('columnDelete', ()=>{
    console.log("columnDelete done");
});

rowDelete

This hook will be fired when a row is deleted from your grid.

Param	Type	Description
row	number	row index of the deleted row

Copied<gridInstance>.onBefore('rowDelete', ()=>{
    console.log("rowDelete initiated");
    return true;
});

<gridInstance>.onAfter('rowDelete', ()=>{
    console.log("rowDelete done");
});

columnHeaderDataUpdate

This hook will be fired when the data in the column header gets updated.

Param	Type	Description
column	number	column index of the cell that is being updated
content	string	content that is updated to the cell

Copied<gridInstance>.onBefore('columnHeaderDataUpdate',()=>{
    console.log("columnHeaderDataUpdate initiated");
    return true;
});

<gridInstance>.onAfter('columnHeaderDataUpdate',()=>{
    console.log("columnHeaderDataUpdate done");
});

columnWidthChange

This hook will be fired when the width of the column is changed.

Param	Type	Description
column	number	column index of the selected column
width	number	updated width in pixels

Copied<gridInstance>.onBefore('columnWidthChange', ()=>{
    console.log("columnWidthChange initiated");
    return true;
});

<gridInstance>.onAfter('columnWidthChange', ()=>{
    console.log("columnWidthChange done");
});

lockColumn

This hook will be fired when a column is locked.

Param	Type	Description
start column	number	index of the start column
end column	number	index of the end column

Copied<gridInstance>.onBefore('lockColumn', ()=>{
    console.log("lockColumn initiated");
    return true;
});

<gridInstace>.onAfter('lockColumn',()=>{
    console.log("lockColumn done");
});

unlockColumn

This hook will be fired when a column is unlocked.

Param	Type	Description
start column	number	index of the start column
end column	number	index of the end column

Copied<gridInstance>.onBefore('unlockColumn',()=>{
    console.log("unlockColumn initiated");
    return true;
});

<gridInstance>.onAfter('unlockColumn',()=>{
    console.log("unlockColumn done");
});

lockRow

This hook will be fired when a row is locked.

Param	Type	Description
start row	number	index of the start row
end row	number	index of the end row

Copied<gridInstance>.onBefore('unlockColumn',()=>{
    console.log("unlockColumn initiated");
    return true;
});

<gridInstance>.onAfter('unlockColumn',()=>{
    console.log("unlockColumn done");
});

unlockRow

This hook will be fired when a row is unlocked.

Param	Type	Description
start row	number	index of the start row
end row	number	index of the end row

Copied<gridInstance>.onBefore('lockRow',()=>{
    console.log("lockRow initiated");
    return true;
});

<gridInstance>.onAfter('lockRow',()=>{
    console.log("lockRow done");
});

columnReorder

This hook will be fired when a column is moved from one position to another.

Param	Type	Description
source column	number	index of source column
target column	number	index of target column

Copied<gridInstance>.onBefore('columnReorder',()=>{
    console.log("columnReorder initiated");
    return true;
});

<gridInstance>.onAfter('columnReorder',()=>{
    console.log("columnReorder done");
});

undo

This hook will be fired when undo operation is triggered.

Copied<gridInstance>.onBefore('columnReorder',()=>{
    console.log("columnReorder initiated");
    return true;
});

<gridInstance>.onAfter('columnReorder',()=>{
    console.log("columnReorder done");
});

redo

This hook will be fired when redo operation is triggered.

Copied<gridInstance>.onBefore('undo',()=>{
    console.log("undo initiated");
    return true;
});

<gridInstance>.onAfter('undo',()=>{
    console.log("undo done");
});

fillSeries

Param	type	Description
start Row	number	row index of the first cell in the selected range
start Column	number	column index of the first cell in the selected range
end Row	number	row index of the last cell in the selected range
end Column	number	column index of the last cell in the selected range

Copied<gridInstance>.onBefore('redo',()=>{
    console.log("redo initiated");
    return true;
});

<gridInstance>.onAfter('redo',()=>{
    console.log("redo done");
});

pageChange

Param	type	Description
pageNumber	number

Copied<gridInstance>.onBefore('fillSeries',()=>{
    console.log("fillSeries initiated");
    return true;
});

<gridInstance>.onAfter('fillSeries',()=>{
    console.log("fillSeries done");
});

pageSizeChange

Param	type	Description
pageNumber	number

Copied<gridInstance>.onBefore('pageChange',()=>{
    console.log("pageChange initiated");
    return true;
});

<gridInstance>.onAfter('pageChange',()=>{
    console.log("pageChange done");
});

copyRow

Param	type	Description
start Row	number	index of the start row
end Row	number	index of the end row

Copied<gridInstance>.onBefore('pageSizeChange',()=>{
    console.log("pageSizeChange initiated");
    return true;
});

<gridInstance>.onAfter('pageSizeChange',()=>{
    console.log("pageSizeChange done");
});

copyColumn

Param	type	Description
start column	number	index of the start column
end column	number	index of the end column

Copied<gridInstance>.onBefore('copyRow',()=>{
    console.log("copyRow initiated");
    return true;
});

<gridInstance>.onAfter('copyRow',()=>{
    console.log("copyRow done");
});

Methods

onAfter

The registered callback will be fired after the hook action is executed.

Parameter	Type	Description
hookName	String	Register the callback to be executed before the provided hook actions.
callback	Function	Register the callback to be executed before the provided hook actions.

Copied<gridInstance>.onBefore(hookName, callback);

onBefore

The registered callback will be fired before the hook action is executed. The registered method should return either true or false. If true, further grid actions will be performed. If false, different Grid actions won't happen.

Note: Hook action will be executed only if the return value is true.

Param	Type	Description
hookName	String	Register the callback to be executed before the provided hook actions.
callback	Function	Register the callback to be executed before the provided hook actions.

Copied<gridInstance>.onBefore(hookName, callback);

onAfter
onBefore

Overview

Welcome to Zoho DataGrid!

DataGrid is a lightweight JavaScript data grid component that helps you present your data in a grid with the familiar spreadsheet feel. The uniqueness of DataGrid is that it utilizes Canvas - HTML5 element for faster rendering, flexible structuring, and improved performance.

DataGrid offers basic grid operations to powerful functionalities such as Search, Sort, Filter, and more.

Zoho DataGrid - Aimed, Intended, and Built for Developers!

Where can I use DataGrid?

Zoho DataGrid is a versatile grid component designed to display and manage tabular data in a user-friendly manner efficiently. It can create customizable grids with sorting, filtering, pagination, and other advanced features, making it ideal for displaying large datasets and handling complex data interactions.

What are the different use cases solved by DataGrid?

DataGrid's impressive array of features and limitless customizations make it a perfect fit for every industry and software out there!

Financial Applications: DataGrid is well-suited for financial applications that require displaying and analyzing large amounts of financial data, such as stock market analytics or portfolio management systems.

Enterprise Resource Planning (ERP) Systems: It can be used in ERP systems to manage efficiently and manipulate data tables, such as inventory management, sales order processing, or production planning.

Data Analytics and Reporting: DataGrid provides a solid foundation for data analysis and reporting applications, enabling users to manipulate, visualize, and export data in various formats.

Note: The examples listed above are just the tip of the iceberg, as DataGrid's versatile potential spans across countless industries.

Professional Support:

If you need help implementing DataGrid, contact us at support@zohodatagrid.com anytime. By purchasing our commercial license, you will also have premium support activated for one year.

Compatibility:

Check out the complete browser compatibility details here.

Version and Release Information:

Current Version: Beta Version 1.2

Release Date: 4th October 2023

Use cases solved by DataGrid
Support
Compatibility
Version

Installation

Step 1: Include Files

a) To import the complete distribution of DataGrid as a minified JavaScript file from the CDN, include the following JS file using the script tag, use the code snippet below.

Copied<script type="text/javascript" src="https://static.zohocdn.com/datagrid/v1_beta_2/grid.min.js"></script>

b) To include the following CSS file using the link tag, use the code snippet below.

Copied<link rel="stylesheet" type="text/css" href="https://static.zohocdn.com/datagrid/v1_beta_2/grid.min.css">

Download files

To use DataGrid in your application, download the zip file from the following URL and include its JS and CSS files in your project.

Download here:https://static.zohocdn.com/datagrid/v1_beta_2/grid.zip

Step 2: Create Container

You can specify an HTML container to render the grid, but if you don't provide one, the grid will be rendered within the body container by default.

Copied<div id="gridContainer"></div>

Step 3: Creating the Grid

Instantiate the grid object as shown in the code snippet below.

Refer to this documentation for more details on the gridObject.

Copiedconst container = document.querySelector('#gridContainer');

const data          = [
    ["8403", "John", "john@zylker.com" ,"5"],
    ["15256", "Ram", "ram@zylker.com" ,"4"],
    ["14058", "Priya", "priya.sr@zylker.com" ,"4"]
];

const options   = {
        width: innerWidth, 
        height: innerHeight,
};

const gridObject = {
        options,
        licenseKey: 'non-commercial',
        data: data,
}
const grid = new DataGrid(container, gridObject);

Note: The licenseKey configuration option is mandatory. Refer to this document to know how licenseKey works.

Data Binding

Client-Side

Provide your data to DataGrid as a 2D array /Json of strings. This way, DataGrid will handle your data entirely.

When we say client-side data binding, we mean that DataGrid binds your data source based on values rather than references.

Refer here for more client-side data settings.

Example:

Copiedconst data = [
    ["8403", "John", "john@zylker.com" ,"5"],
    ["15256", "Ram", "ram@zylker.com" ,"4"],
    ["14058", "Priya", "priya.sr@zylker.com" ,"4"]
];

const gridObject = {
        licenseKey: 'non-commercial',
        data: data
}
const grid = new DataGrid(document.body, gridObject);

Server-side

To bind server-side data to the grid component, pass an instance of DataProvider to gridObject with keyName 'data'. This way, DataGrid will not have complete access to your data. Instead, you can use the dataProvider APIs to provide the data and styles required for rendering to DataGrid.

Refer here for more server-side data settings.

Example:

Copiedconst data = [
        ["8403", "John", "john@zylker.com" ,"5"],
        ["15256", "Ram", "ram@zylker.com" ,"4"],
        ["14058", "Priya", "priya.sr@zylker.com" ,"4"]
        ];

const gridObject = {
        licenseKey: 'non-commercial',
        data: data
}
class ServerDataProvider extends DataGrid.DataProvider {
        constructor() {
            super();
        }
        getCellData(row, column) {
            return data[row][column];
        }
        getMaxRow() {
            return data.length;
        }
        getMaxColumn() {
            return data[0].length;
        }
}    

const grid = new DataGrid(document.body, gridObject);

Clipboard

Copying and moving data often requires formatting options such as cut, copy, and paste. These options are helpful in duplicating data within or outside of a grid. Users can perform these actions either by using their mouse or by utilizing keyboard shortcuts.

Copy and Paste:

Users can select one or more cells, rows, or columns and copy the data to the clipboard. They can then paste the data into another location within the grid or another application.

Cut and Paste:

Like copying and pasting, users can select one or more cells, rows, or columns and cut the data to the clipboard. This removes the data from the original location and allows users to paste it into another area inside the grid or another application.

Users can perform the actions using keyboard shortcuts or by accessing the context menu (if it is enabled).

Context Menu

To copy data, select cells and right-click to access the context menu. Then, choose the "Copy" option. Similarly, to cut data, select cells and right-click to access the context menu. From there, choose the "Cut" option.

Windows	macOS	Description
Ctrl + C	Cmd + C	copies the selected content
Ctrl + X	Cmd + X	cuts the selected content
Ctrl + V	Cmd + V	pastes the content from the clipboard

Paste data from other sources

You can copy data from outside and paste it into the grid. The data will be pasted as plain text.

Limitations

Images cannot be copied from outside and pasted in the grid.
If you copy data from the DataGrid and try to paste it outside the grid, the data will be pasted in a table format.

Selection

Navigating quickly through the grid, even with a large volume of data, is expected. You can navigate within your grid speedily and select the cells. This section explains the various selection methods in DataGrid.

Before going into the selection types, these types will be active only if the selection is set to true in the gridOptions.

Copiedconst gridObject = {
        licenseKey : 'non-commercial',
        options : { selection : true }
}
const grid = new DataGrid(document.body, gridObject);

When you click on a particular cell, the cell will be in focus. This cell is referred to as an 'active cell'. At a given time, only one cell will be active, and it will be highlighted.

DataGrid also allows you to select multiple cells or a range of cells within the grid. Range selection is a powerful feature that enables users to work with large amounts of data more efficiently and effectively.

This is typically done by clicking and dragging the mouse cursor over the desired cells or using keyboard shortcuts.

Once a range of cells is selected, it can be used for various actions such as copying, pasting, and deleting.

The entire row in the grid can be selected using the checkbox available in the Row Header at the start of every row. Multiple rows can also be selected using the checkbox in the row header, and various actions can be performed.

The entire column can be selected by clicking the Column Header of that particular column. Along with the grid actions, context menu options like Sort, Filter, Lock, and Autofit can also be performed with the selected column.

Apart from the entire column and range selection, the whole grid data can also be selected using the select all checkbox in the top left.

Windows	macOS	Description
Ctrl + a	Cmd + a	Select the entire grid.
Shift + ↑	Shift + ↑	Selects one cell above the current cell.
Shift + ↓	Shift + ↓	Selects one cell below the current cell.
Shift + ←	Shift + ←	Selects one cell to the left of the current cell.
Shift + →	Shift + →	Selects one cell to the right of the current cell
Ctrl + Shift + ↑	Cmd + Shift + ↑	Selects the entire cells above the current cell.
Ctrl + Shift + ↓	Cmd + Shift + ↓	Selects the entire cells below the current cell.
Ctrl + Shift + ←	Cmd + Shift + ←	From the current cell, all the cells remaining to the left in that current row will be selected.
Ctrl + Shift + →	Cmd + Shift + →	From the current cell, all the cells remaining to the right in that current row will be selected.
PgUp	Nil	Traverses from the current page to the next page.
PgDn	Nil	Traverses from the current page to the previous page.

Fill Series

Fill Series is your go-to feature when you need to input repeated information across multiple cells in a grid quickly and easily. Fill Series feature can be enabled using the grid properties while configuring the grid. Once activated, you will notice a plus icon in the bottom right corner of your active cell. You can easily fill in the necessary cells by dragging this icon down.

Copiedconst gridObject = {
        licenseKey : 'non-commercial',
        options : { fillSeries : true }
}
const grid = new DataGrid(document.body, gridObject);

Numeric Fields

When you use Fill Series on a single cell with a number input, the other cells will be filled with the same value from the active cell.
However, if you have multiple cells with numeric input selected and use Fill Series, the intended cells will be filled with a logical pattern. For instance, if you have the numbers 1, 3, and 5 in three cells and you select all three cells and drag the cell containing 5 to Fill Series the next three cells, it will fill them in with the sequences 7, 9, 11.
It is important to note that if you have a non-relational set of numbers selected and try to use Fill Series, the same set of numbers will be repeated below. For example, if you have 3, 4, 8 in three cells, select all three cells and try to drag the cell containing 8 to autofill the next three cells; it will be filled with the same sequence 3, 4, 8.

Supported Types

Number, Checkbox, Rating, DateTime, DotChart, Percent, Phone Number

Text Fields

When you use Fill Series on a single cell with a string, the other cells will be filled with the same content as the active cell.
However, if you have multiple cells with strings selected and you drag to Auto Fill, the intended cells will be filled with the same content pattern. So, for example, if you have "apple," "banana," and "orange" in three cells, and you select all three cells and drag the cell containing "orange" to Auto Fill the next three cells, it will fill them in with the sequence "orange," "orange," "orange."

Supported Types

Text, Email, Dropdown, MultiSelect, URL

Themes

Themes are a way of customizing the grid. Applying themes changes the overall look and feel of your grid. Currently, two themes are supported in DataGrid -

1. light

2.midNightBlue

By default, the grid will be rendered with a Light theme. You can change it to the other theme while setting up the configurations initially.

While configuring the grid:

To set the theme, you need to pass the type of theme in the theme property from the gridOptions.

Copiedconst gridObject = {
        licenseKey : 'non-commercial',
        options : { theme : 'midNightBlue' }
}
const grid = new DataGrid(document.body, gridObject);

Dynamic:

Once the grid is rendered, you can change the theme using the updateOptions and changeTheme API.

Copied<gridInstance>.updateOptions( { theme : 'light' } );
<gridInstance>.changeTheme('midNightBlue');

Zoom

Zooming in on data is a valuable feature that enhances the readability and clarity of information. DataGrid offers the zoom API, which enables users to zoom in on the grid to view data more keenly.

While rendering:

To zoom the grid, you must pass the zoom level to be scaled in the zoomLevel property from the gridOptions.

Copiedconst gridObject = {
        licenseKey : 'non-commercial',
        options : { zoomLevel : 200 }
}
const grid = new DataGrid(document.body, gridObject);

Dynamic:

Once the grid is rendered, you can scale the grid using the updateOptions API and zoom API.

Copied<gridInstance>.zoom(200);
<gridInstance>.updateOptions( { zoomLevel : 200 } );

Right to Left Grid Direction (RTL)

RTL, alias Right to Left, is a feature that allows you to display languages that are read from right to left, such as (Hebrew, Persian, and Arabic). By default, the grid will be positioned with LTR, but you can enable RTL in such instances.

You can use the updateOptions API to enable RTL in your grid.

How keyboard shortcuts function when RTL is enabled:

Windows	macOS	Functionality when RTL Enabled
←	←	Navigate the cell to the right.
→	→	Navigate the cell to the left.
Tab	Tab	Pressing the tab button will move the active cell by one cell to the left.
Shift +Tab	Shift +Tab	Moves one cell to the right.
Shift + ←	Shift + ←	Selects the next cell to the right.
Shift + →	Shift + →	Selects the next cell to the left.
Ctrl + Shift + ←	Cmd + Shift + ←	All the cells to the right of the current cells of that column will be selected.
Ctrl + Shift + →	Cmd + Shift + →	All the cells to the left of the current cells of that column will be selected.

While rendering the grid:

To change the direction of the grid from right to left, you need to set rtl property from gridOptions to true.

Dynamic:

Once the grid is rendered, you can freeze the columns using the updateOptions API.

Copiedconst gridObject = {
        licenseKey : 'non-commercial',
        options : { rtl : true }
}
const grid = new DataGrid(document.body, gridObject);

Row Height

Set the row heights for your grid using a number or an array of numbers.

Overview

The grid will be rendered with a default row height of 30px. However, the row height can be passed as a constant or an array of values.

The allowable minimum height in DataGrid is 30px, and the maximum allowable row height is 100px.

Row height as a constant

In this example, we set a constant height of 50px for all the rows in the grid.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        rowHeights : 50
 };
const grid = new DataGrid(document.body , configuration);

Row height as an array

In this example, individual heights are set for the first four rows [50,30,40,60]. The remaining rows are rendered with the default height of 30px.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        rowHeights : [50,30,40,60]
 };
const grid = new DataGrid(document.body , configuration);

Row Header

The Row Header is the first cell that appears to the left of every row. By default, the Row Header will be enabled, and it will be in the numeric format such as 1,2,3.. and so on. You can turn it on or off by using updateOptions API.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        options : {
                rowHeader : false
        }
 };
const grid = new DataGrid(document.body , configuration);

Row Label

The row label is enabled by default, displaying numbers (1, 2, 3, etc.) on the left of each row. You can customize the row label using a function, or set it to false to show a checkbox in the row header.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        options : {
                rowHeader : false
        }
 };
const grid = new DataGrid(document.body , configuration);

Row Reordering

When you enable row reordering in the grid properties during configuration, you gain the ability to drag and drop rows. This allows you to easily interchange the contents of two rows using this feature.

Copiedconst gridObject = {
        licenseKey : 'non-commercial',
        options : {
                rowHeader : {
                        label : function(row) {
                                return "Row-"+row;
                        }
                }
        }
}
const grid = new DataGrid(document.body, gridObject);

Row Width

Set the row header width for your grid by providing width from RowHeader in options.

Copiedconst gridObject = {
        licenseKey : 'non-commercial',
        options : {
                rowHeader : {
                        width : 50
                }
        }
}
const grid = new DataGrid(document.body, gridObject);

Row Freezing

The position of specified rows will be locked and visible even when the users scroll to another area in the grid. These frozen rows will be fixed on the top of the grid, while the remaining rows will move accordingly during scrolling.

While configuring the grid:

To freeze the rows on the top, you need to pass the number of rows to be frozen in the freezeColumnUpTo property from the gridOptions.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        options : {
                freezeRowUpTo : 2
        }
 };
const grid = new DataGrid(document.body , configuration);

Dynamic:

Once the grid is rendered, you can freeze the rows using the updateOptions API.

Copied<gridInstance>.updateOptions( { freezeRowUpTo : 2 } );

Column Width

Set the column widths for your grid and let your users manually change the width of the columns using DataGrid's interface.

Overview

Column resizing is a feature that allows the users to change the width of the columns with the help of the resizing cue in the column header using their mouse. Manual column resizing will be possible only when the manualResize is set to true in the gridOptions.

The allowable minimum width in DataGrid is 80px. So, if the column width is less than 80px, it will not be applicable, and 80px will be applied to that column. And the maximum allowable column width is 500px.

Note: As of now, the content of a cell will be clipped if it does not fit the width.

Column width as a constant

In this example, we set a constant width of 200px for all the columns in the grid.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        columnWidths : 200 
};
const grid = new DataGrid(document.body , configuration);

Column width as an array

In this example, individual widths are set for the first four columns [60,90,120,110]. The remaining columns are rendered with the default width of 100px.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        columnWidths : [60, 90, 120, 110] 
};
const grid = new DataGrid(document.body , configuration);

Autofit based on content.

In this example, the column's width is autofitted based on the content. This is achieved by passing auto to the columnWidths property. In this case, too, the minimum width of the column remains 80px.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        columnWidths : 'auto'
};
const grid = new DataGrid(document.body , configuration);

Adjusting column width manually

Set the option manualResize to true to allow the users to manually resize the column width by dragging the cue between the adjacent column headers. If you double-click on that cue, the width will be instantly autofitted.

Note: Be sure to have columnHeader enabled for this feature to work.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        options : {
                columnHeader : {
                        manualResize : true
                } 
        }
};
const grid = new DataGrid(document.body, configuration);

Column Header

The Column Header appears on top of every column. By default, the ColumnHeader will be enabled and will be in the alphabetical series like A, B, C... and so on. You can turn it on or off by using updateSettings API.

You can also change the column headers to custom values by providing them in an array of strings or functions.

Custom column headers:

Using an array of strings:

An array of strings ['name,' 'ID,' 'Phone,' 'Location'] can be used to set the columnHeaders, as shown in the below example.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        columnHeaders : ['name', 'ID', 'Phone', 'Location']
 };
const grid = new DataGrid(document.body , configuration);

Using a function:

The columnHeaders can also be populated using a function as shown in the example below.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        columnHeaders : function( column ) {
                        return "Column-"+column;
                },
 };
const grid = new DataGrid(document.body , configuration);

Column Freezing

The position of specified columns will be locked and visible even when the users scroll to another area in the grid. These frozen columns will be fixed on the left-hand side of the grid, while the remaining columns will move accordingly during scrolling.

While configuring the grid:

To freeze the columns on the left-hand side, you need to pass the number of columns to be frozen in the freezeColumnUpTo property from the gridOptions.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        options : {
                freezeColumnUpTo : 2
        }
};
const grid = new DataGrid(document.body, configuration);

Dynamic:

Once the grid is rendered, you can freeze the columns using the updateOptions API.

Copied<gridInstance>.updateOptions({freezeColumnUpTo : 2});

Column Reordering

Enable your users to change the order of the columns in your grid based on their priorities/preferences.

By enabling column reordering in the grid properties while configuring the grid, you can drag and drop the columns. The contents of two columns can be interchanged using this feature. This is again an alternative to cut & paste.

Enabling the column reordering setting:

Set reordable to 'true' to enable your users to rearrange the columns by clicking on the column headers and dragging.

Note: When the users reorder the columns manually, the column headers get reordered along with the column data.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        options : {
                columnHeader : {
                        reorderable : true
                }
        }
};
const grid = new DataGrid(document.body, configuration);

Column Locking

Enables your users to lock the columns in the grid that are very crucial and want them to be safe under all circumstances.

When a column is locked, that particular column cannot be edited. The locked column will be in a read-only mode. However, the contents from the locked column can be copied.

Column locking using the context menu:

Note: To enable your users to access the column locking feature from the context menu, the contextMenu plugin should be enabled.

Once the context menu is enabled, your users can lock and unlock the columns easily.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        options : {
                plugins : {
                        contextMenu : true
                }
        }
};
const grid = new DataGrid(document.body, configuration);

Column locking using the API:

Column locking and unlocking can also be dynamically done using the lockColumn and unlockColumn API. By providing the column index(starting from 0), that column can be locked and unlocked.

Copied<gridInstance>.lockColumn(0);
<gridInstance>.unLockColumn(0);

Cell Customization

Custom Field

We also let you create your own field type apart from the ones provided above. Using the custom renderer() function, you can create custom field types.

Note: The custom renderer() function should return a DOM element.

Copiedconst columnProperties = [{
    name    : "tags"
    renderer: function() {
        let dom              = document.createElement('div');
            dom.style.width  = "100px";
            dom.style.height = "20px";
            dom.style.border = "1px solid black";
        document.body.appendChild(dom);
        dom.addEventListener("click", () => {
            dom.style.background = colors[i];
            i = (i == (colors.length - 1)) ? 0 : i+1;
        })
        return dom;
    }
}];

Column Validator

You can add your additional validation to the individual columns using the Column Validator function. Column Validator should be of Function representation. It should either return the boolean or object value.

Copiedconst columnProperties = [{
    name     : "tags",
    validator: function (value) {
        if ((isNaN(+value))) {
            return false;
        } else if (value < 0) {
            return {
                value: 0
            };
        } else if (value > 100) {
            return {
                value: 100
            };
        } else {
            return true;
        }
    } 
}];

Column Properties

Each column type has a specific set of properties and styles with which you can customize the fields. Refer here to know more about column props and column styles.

Field Types

Text

The text field type allows you to enter data in a textual format.

Number

The Number field type allows you to enter numeric data. Precision denotes the number of digits to be displayed after the decimal point. Using the thousandSeparator, you can format your number with commas.

Currency

The currency field allows you to enter currency symbol and number formatted data. You can give the currency symbol to be used in the currency setting. You can set the symbolPosition, precision, and thousandSeparator to make it look how you want.

Percent

The percent field allows you to display the data in a percentage format. When users input numbers, this field will display them in percentage format.

You can configure the precision and thousandSeparator option.

DateTime

You can display the date and time in your preferred format using the date and time field type. When you edit the cell, a calendar icon and a clock icon will be available. You can click the calendar and clock icon to edit the data and time in a particular cell. To display only the date, you can provide 'false' to the time property. You can also select your preferred date and time format using the dateFormat and timeFormat properties.

Checkbox

To render a checkbox in a column, define the column type as check-box. You can change the look of the checkbox by changing the colour.

Rating

The rating field type allows you to set up a column for getting rating input. Stars will appear in this field based on the value you give in the maxCount property. The color of the stars can be changed using the color property.

Phone Number

The Phone Number field type allows you to display your data in the form of a phone number. DataGrid provides you with ten phone number formats to use. The Phone Number field is clickable - when users click, they will be redirected to the connected phone service.

Email

The Email field type allows you to represent the data via email. The email field is also clickable - the connected mail service will open when the user clicks.

URL

The URL field type allows you to enter links inside the grid. Once you add the data, it will get converted into a clickable link (URL).

Dot Chart

The Dot Chart field type allows you to represent your values as a dotted structure. You can configure the lowColor, highColor, benchMark, and maxCount properties. Based on the value the user provides, the dotted design will be displayed in the high/low color.

Values greater than or equal to the benchmark will be rendered with high color, and values less than the benchmark will be rendered with low color.

Auto Complete

The AutoComplete field predicts and automatically completes the words when you begin typing in the cell. You can provide the list of options in the source property.

Multi Select

The Multi Select field allows users to select more than one option from the list of options. You can give the array of strings to be used as the options using the source property.

Overview

DataGrid provides you with predefined field types along with the custom field type, which allows you to create your own field type based on the requirement.

Cells can have various field types, such as

Sort

With this plugin, you can quickly sort your grid data in ascending or descending order based on various column types, whether it has numerical data, dates, or text. Sorting your data in ascending or descending order is as simple as a click.

It is important to note that currently, the plugin allows sorting for one column at a time. When you configure sorting for a particular column, the previous sort will be automatically removed.

By default, the sorting functionality is disabled. You can enable the Sort plugin using the grid options or enablePlugin API.

Types	Description
Ascending	Sorts the data in the ascending order
Descending	Sorts the data in the descending order

Copiedconst gridObject = {
    licenseKey : 'non-commercial',
    options : {
        plugins : {
            sort: true
        }
    }
}
const grid = new DataGrid(document.body, gridObject);

Filter

The filtering option allows you to filter your columns based on the conditions you want. It allows the users to view the records in your grid based on specific criteria they configure. By default, the filtering option will be disabled.

Filtering can be applied to Columns with any data format. You can use the enablePlugin API to enable the filter feature in your grid.

While configuring the filter, you can give the conditions for strings and numbers as given below.

Criteria for String Data

You can apply filters to columns that contain data in the form of a string. There are various filter conditions you can set to view the records. They are listed below -

Conditions	Description
Equals	To filter data based on a specific value.
Not Equals	To exclude data entries based on a specific value.
Is empty	To filter data entries that are empty or have a null value.
Is not empty	To filter data entries that are not empty.
starts with	To filter data entries based on the starting characters.
Ends with	To filter data entries based on the ending characters.
Contains	To filter data entries based on the presence of a specific character or string.
Does not contain	To filter data entries that do not contain a specific character or a string.

Criteria for Numeric Data

You can apply filters to columns that consist of data in the form of numbers. There are conditions you can set to view the records. They are listed below -

Conditions	Description
=	Only lists the records that exactly match the value you provide.
!=	To filter records that match the value you have provided and display the rest of the records.
<	To filter records that are greater than the value you provide
>	To filter records that are less than the value you provide.
>=	To filter records that are either greater than or equal to the value you provide.
<=	To filter records that are either lesser than or equal to the value you provide.
Between	To filter records that are available in between the value range you provide.
Not between	To filter records that are not in between the value range you provide.
Is empty	To filter the records that have empty values (empty field values, empty data).
Is not empty	To filter the records that do not have any empty values.

Copiedconst gridObject = {
    licenseKey : 'non-commercial',
    options : {
        plugins : {
            filter: true
        }
    }
}
const grid = new DataGrid(document.body, gridObject);

Search

The Search feature will allow you to perform a search inside the grid.

Once the grid is focused, click ctrl/cmd+f to perform the search operation. The search input box will appear. Enter the string to be searched across the grid and hit enter.

The number of results will be displayed below the search bar. If you keep clicking enter, the result cells will be focused one after the other.

Note: Search will function only when the focus is on the grid.

Copiedconst configurations = {
    options : {
        plugins : {
            search: true
        }
    }
}
const grid = new DataGrid(document.body, configurations);

Pagination

Pagination is useful for those users who want to split the data into multiple pages. This improves the readability and ensures the user takes the right action.

When the grid is rendered for the first time, the number of rows displayed per page will be equal to the minimum of the pages array.

With the Pagination feature enabled, you can navigate to the first, last, next, and previous pages. You can give an array of numbers, which will be present as options in the dropdown using pages property.

Copiedconst gridObject = {
    licenseKey : 'non-commercial',
    options : {
        plugins : {
            pagination: true
        }
    }
}
const grid = new DataGrid(document.body, gridObject);

Pagination can be customized using the below-mentioned properties.

Properties	Description	Allowed Values
pageSize	Number of rows per page in default	number
pages	Array of number of rows. Will be present as the options in the dropdown menu in pagination.	array of numbers
style	Styling for pagination	style1, style2, style3, style4

Context Menu

Users can perform contextual actions like inserting a row or deleting a row using the Context Menu.

Note: By enabling the DataGrid's context menu, the browser's default context menu will not be active.

Copiedconst gridObject = {
    licenseKey : 'non-commercial',
    options : {
        plugins : {
            contextMenu: true
        }
    }
}
const grid = new DataGrid(document.body, gridObject);

Row

When you right-click on a Row Header, the following context menu options will pop up.

Options	Description
Insert	Row Above/Row Below inserts a new row above or below the current row
Delete	Deletes the selected row from the grid

Column

When you right-click on a Column Header, the following context menu options will pop up.

Options	Description
Insert	Column Below/Column After inserts a new column above or below the current column.
Delete	Deletes the selected column from the grid.
AutoFit	AutoFit the column based on the contents in the column.
Lock / Unlock	Lock and Unlock the selected column from the grid.

Note: Sort and Filter options will also be displayed here if enabled.

Cell

When you right-click on a cell, the following context menu options will pop up -

Options	Description
Cut	Cuts the content of the active cell
Copy	Copies the active cell content
Paste	Pastes the content copied from the system clipboard
Delete	Clears active cell content

Print

1. Install Zoho DataGrid

Install Zoho DataGrid seamlessly - Effortless Installation in a Snap

You can install Zoho DataGrid through your preferred package manager or import the assets directly from a CDN.

Using a package manager

Run the below command to install Zoho DataGrid locally using a package manager.

Copiednpm set registry http://cm-npmregistry
npm install @zoho/data-grid

Using the original path to import in js

Copiedimport { DataGrid } from '@zoho/data-grid';

2. Using the script tag

Include the JS file below using the script tag. This will import the complete distribution of DataGrid as a minified JavaScript file from the CDN.

Copiedimport { DataGrid } from "./node_modules/@zoho/data-grid/dist/js/zohogrid.esm.js"

b) CSS

1. Using the link tag

You can import Zoho DataGrid's CSS using a link tag

Copied<script type="text/javascript" src="https://static.stratuscdn.com/datagrid/v1_beta_1/grid.js"></script>

2. Using import

If your bundler allows it, you can import Zoho DataGrid's full distribution CSS file using an import statement.

Copied<link rel="stylesheet" href="https://static.stratuscdn.com/datagrid/v1_beta_1/grid.css">

3. Create the Grid

Instantiate the grid object as shown in the code snippet below.

Copiedimport "@zoho/data-grid/zohogrid.css";

<HTML_Element> to render the grid. Use the <options> parameter to specify the Grid options as a JSONObject. For more information on available Grid Options, refer to the documentation.

Copiedconst grid = new DataGrid(<HTML_Element>, <options>);

Note: The licenseKey configuration option is mandatory. Refer to this document to know how licenseKey works.

Copiedconst columnHeaders = ["ID", "Name", "Email ID", "Rating"];
const data          = [
    ["8403", "John", "john@zylker.com" ,"5"],
    ["15256", "Ram", "ram@zylker.com" ,"4"],
    ["14058", "Priya", "priya.sr@zylker.com" ,"4"]
];
const container = document.querySelector('#gridContainer');
const options   = {width: innerWidth, 
height: innerHeight,
licenseKey: 'non-commercial'
};
const grid      = new DataGrid(container, options);
const gridData  = {
        data: data,
        columnHeaders: columnHeaders,
        columnWidths: [100, 150 , 250, 100],
        rowHeights: 30
}
grid.renderData(gridData);

Row Highlighter

Easy data visualization is one of the significant aims of DataGrid. The row highlighter feature of DataGrid makes your viewing experience easier by highlighting the row over which you move your mouse. You can even select multiple rows and view that strip of rows for better clarity.

Set rowHighlighter to true to enable row highlighter in options.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        options : {
                rowHighlighter : true
        }
 };
const grid = new DataGrid(document.body , configuration);

Column Highlighter

Similar to row highlighting, column highlighting is also possible in DataGrid. This feature enhances the viewing experience by automatically highlighting the column your mouse hovers over, making it easier to read. The column highlighting feature will be enabled by default, and you can modify columnHighlighter from options.

Copiedconst configuration = { 
        licenseKey: 'non-commercial',
        options : {
                columnHighlighter : true
        }
};
const grid = new DataGrid(document.body, configuration);

Supported Browsers

Zoho DataGrid browser compatibility across all major browsers and operating systems:

	Chrome	Firefox	Microsoft Edge	Opera	Safari
Mac	Yes	Yes	Yes	Yes	Yes
Windows	Yes	Yes	Yes	Yes	N/A
Linux	Yes	Yes	Yes	Yes	N/A

FAQs

General FAQs:

What are the steps involved in the DataGrid Installation?

There are three steps involved in the installation procedure of DataGrid. You can refer here to find the detailed steps to create your first grid using DataGrid.

How do I create a new row in the grid?

Using the addRow API, you can add the required number of new rows in the grid.

How do I create a new column in the grid?

Using the addColumn API, you can add the required number of new columns in the grid. Click here to read more about the APIs.

What are the different field types supported by DataGrid?

DataGrid supports more than ten different column types, such as Text, Number, URL, and so on. Click here to read about the supported field types in detail.

What are the default properties of these field types?

Each of the fields will be rendered with the default properties given below. However, you can customize these fields with the help of the properties attached to each of them.

How many rows and columns can we create? Is there any limit?

There is no limit on the number of rows and columns you want to create. Create as many rows and columns as you wish. By default, a grid comprising 10 rows and 5 columns will be created.

What is the default row height and column width?

The default row height is 30 pixels, and the default column width is 100 pixels.

How can I change the default style of the grid?

You can change the default properties of the grid while initializing the grid using the gridOptions.

Will all the plugins be enabled by default?

No, all the plugins will be disabled by default and can be enabled using the enablePlugin API.

Can we apply our own sort conditions?

No, currently, we support only ascending and descending sort conditions.

Can we apply more than one filter condition?

Currently, we support a single filter, i.e., you can apply only one filter to one column at a time.

Support

Email

If you are looking for further information or have any trouble, contact our 24/7 support at:

support@zohodatagrid.com

Connect with us

Case Studies

Zoho Sites

Qntrl

Licensing

Zoho DataGrid is available for free and commercial use. Based on how you use DataGrid, specify the license key in the 'licenseKey' gridObject.

Note: 'licenseKey' is a string, so mention it in single quotes ' '

Free or non-commercial license

If you use DataGrid for non-commercial purposes, pass the string 'non-commercial' to the 'licenseKey' option from the gridObject.

HTML :

Copied<div id="GridContainer"></div>

JS :

Copiedconst gridObject = {
    licenseKey: 'non-commercial'
};
const grid = new DataGrid(document.body, gridObject);

Commercial license

If you use the paid version of Zoho DataGrid for your projects, pass the specific license key (string) provided to you after you purchase.

Contact our sales team to get the commercial license key for your grid.

Appropriate messages[read below] will be shown based on the value in the 'licenseKey' option. This message will be displayed in two places, above the grid as HTML text and in the console.

HTML :

Copied<div id="GridContainer"></div>

JS :

Copiedconst gridObject = {
    licenseKey: '00000-00000-00000-00000-00000'
};
const grid = new DataGrid(document.body, gridObject);

Valid license key

If you use a valid license key for commercial purposes, no messages will be displayed.

Non - commercial

You are using DataGrid's non-commercial version. It is not licensed for development projects intended for production. Contact us at support@zohodatagrid.com to get a valid license key for commercial usage.

Missing license key

The license key for DataGrid is missing. Use your purchased license key for commercial use. Use 'non-commercial' in the 'licenseKey' option for non-commercial purposes.

Invalid license key

The license key for DataGrid is invalid. Contact us at support@zohodatagrid.com to get a valid license key.

Expired license key

The license key for DataGrid has expired and is not valid further. Contact us at support@zohodatagrid.com and renew your license key.

Pagination

Properties	Type	Default	Description
style	string	style1	To choose from style1, style2, style3, style4
rowsPerPageOptions	number[ ]	[5, 10, 25, 50, 100, 250]	Number of rows in array. Will be present as the options in the dropdown menu in pagination.
rowsPerPage	number	25	Number of rows per page in default.
suppressUI	boolean	false	To suppress the default UI provided by Zoho DataGrid and implement your custom pagination bar interface instead.

getCurrentPageNumber

To get the current page number of the grid in the viewport.

ReturnType: number

Copied<gridInstance>.plugin.pagination.getCurrentPageNumber()

getProperties

To get the current active pagination properties.

ReturnType: object

Copied<gridInstance>.plugins.pagination.getProperties()

getRowsPerPage

To get the current pageSize (i.e.), the number of rows per page displayed currently.

Return type: number

Copied<gridInstance>.plugins.pagination.getRowsPerPage()

getTotalPages

To get the total number of pages in the grid.

ReturnType: number

Copied<gridInstance>.plugins.pagination.getTotalPages()

goToFirst

To navigate to the first page from the current one in the grid.

Copied<gridInstance>.plugins.pagination.goToFirst()

goToLast

To navigate to the last page from the current one in the grid.

Copied<gridInstance>.plugins.pagination.goToLast()

goToNext

To navigate to the next page from the current one in the grid.

Copied<gridInstance>.plugins.pagination.goToNext()

goToPage

To navigate to the specified page number.

Param	Type
pageNumber	number

Copied<gridInstance>.plugins.pagination.goToPage(pageNumber)

goToPrevious

To navigate to the previous page from the current one in the grid.

Copied<gridInstance>.plugins.pagination.goToPrevious()

setRowsPerPage

To change the number of rows per page displayed in the grid.

Param	Type
pageSize	number

Note: By default, there will be 25 rows per page when you enable pagination.

Copied<gridInstance>.plugins.pagination.setRowsPerPage(pageSize)

update

To modify the existing pagination properties as needed.

Param	Type
properties	object

Copied<gridInstance>.plugins.pagination.update()

Note: All the above APIs will work when you have already enables pagination in the grid.

Sort

add

To apply sort to the specified column.

Param	Type
sortObject	{ [key: number]: [string : 'ascending' \| 'descending'] }

Copied<gridInstance>.plugins.sort.add(sortObject)

clear

To remove all the sorts applied on the grid.

Copied<gridInstance>.plugins.sort.clear()

getApplied

To get all the applied sorts on the grid.

ReturnType: Array of objects

[{[key: number]: [string : 'ascending' | 'descending']},...]

Copied<gridInstance>.plugins.sort.getApplied()

getSortedOrder

To get the applied sort order of a particular column.

Param	Type
column	number

ReturnType: string ('ascending' | 'descending')

Copied<gridInstance>.plugins.sort.getSortedOrder(column)

remove

To remove the sort applied on the particular column in the grid.

Param	Type
column	number

Copied<gridInstance>.plugins.sort.remove(column)

updateSort

To modify the sorting order in the specified column.

Param	Type
sortObject	{ [key: number]: [string : 'ascending' \| 'descending'] }

Copied<gridInstance>.plugins.sort.updateSort(sortObject)

add
clear
getApplied
getSortedOrder
remove
updateSort

Filter

add

To apply a filter condition to a specific column in the grid.

Param	Type
columnNumber	number
operation	string
values	any

Copied<gridInstance>.plugin.filter.add(columnNumber, operation, values)

clear

To clear all the applied filter conditions in the grid.

Copied<gridInstance>.plugins.filter.clear()

getFilters

To get the filtered data in the form of an array after applying a filter condition to a particular column.

ReturnType: Array of objects
[{ fieldId : number, operation : string, values : string [] },...]

Copied<gridInstance>.plugin.filter.getFilters()

Note: All the above APIs expect add will work only when you have already done a filter operation.

add
clear
getFilters

Search

Properties	Type	Default	Description
suppressUI	boolean	false	To suppress the default UI provided by Zoho DataGrid and implement your custom search bar interface instead.

clear

This API is used to clear the context of the most recent search operation, effectively resetting the search state and allowing users to initiate a new search operation.

Copied<gridinstance>.plugins.search.clear()

find

To search for a string in the grid. This will highlight all the search results present in the grid.

Param	Type
key	string

Copied<gridinstance>.plugins.search.find(key)

getAllIndexes

To get the indexes of all the search results in an array of objects.

ReturnType: Array of objects

[ {row,column}, {row,column},....]

Copied<gridinstance>.plugins.search.getAllIndexes()

getCurrentIndex

To get the cell index of the cell currently holds the focused search result. This will return an object containing the cell position.

ReturnType: object

{ row, column}

Copied<gridinstance>.plugins.search.getCurrentIndex()

getNextIndex

To get the index of the cell holding the succeeding search result. This will return an object containing the cell position.

ReturnType: object

{ row, column}

Copied<gridinstance>.plugins.search.getNextIndex()

getPreviousIndex

To get the index of the cell holding the preceding search result. This will return an object containing the cell position.

ReturnType: object

{ row, column}

Copied<gridinstance>.plugins.search.getPreviousIndex()

getTotalCount

To get the total number of the cells containing the search results for a specific string.

ReturnType: number

Copied<gridinstance>.plugins.search.getTotalCount()

goTo

To navigate to a specific search result index. This will shift the focus to the cell with the specified search result index.

Param	Type
index	number

Copied<gridinstance>.plugins.search.goTo(index)

goToNext

To navigate to the succeeding search result index from the current one. This will shift the focus to the cell with the subsequent search result.

Copied<gridinstance>.plugins.search.goToNext()

goToPrevious

To navigate to the preceding search result index from the current one. This will shift the focus to the cell containing the previous search result.

Copied<gridinstance>.plugins.search.goToPrevious()

Note: All the above APIs expect find will work only when you have already made a search in the grid.

Properties
clear
find
getAllIndexes
getCurrentIndex
getNextIndex
getPreviousIndex
getTotalCount
goTo
goToNext
goToPrevious

Properties

Column Type

Column Type should be String representation.

ColumnType	Value	DataFormat
Text	text	Text
Numeric	number	Number
Currency	currency	Number
Percent	percent	Number
Date&Time	dateTime	Timestamp
Checkbox	checkbox	Boolean
Rating	rating	Number
Phone Number	phoneNumber	String
Email	email	String
URL	url	String
Dotchart	dotChart	Number
Dropdown	dropDown	String
Auto Complete	autoComplete	String
Multi Select	multiSelect	Array
Custom Dom	custom	String \| Number

Column Style

Column Style should be of String representation. You can modify the look of the columns using the styles.

Style	Type	Default	Value
font	string	Puvi	Any font
color	string	Black	Any color
background	string	white	Any color
size	number	11 (in pt)	Between 7 and 50
bold	boolean	false	true \| false
italic	boolean	false	true \| false
underline	boolean	false	true \| false
overline	boolean	false	true \| false
strikeThrough	boolean	false	true \| false
verticalAlign	string	'middle'	'top' \| 'middle' \| 'bottom'
horizontalAlign	string	Based on field types	'left' \| 'center' \| 'right'
padding	object	top : 2, left : 4, right : 4, bottom : 2	value in pixel

Column Properties

Below are the properties associated with individual column types.

ColumnType

Properties

text

Key	Type	Value	Default value
format	string	'none' \| 'initialCaps' \| 'uppercase' \| 'lowercase' \| 'sentenceCase'	'none'

autoComplete

rating

Key

Type

Default value

color

string

yellow

maxCount

number

minimum – 2

maximum -10

dropdown

phoneNumber

Key

Type

Value

Default value

format

string

'+xx xxxxx xxxxx' | '+xx-xxxxx-xxxxx' |

'+xx xxx xxx xxxx' | '+xx-xxx-xxx-xxxx' |

'xxxxx xxxxx' | 'xxxxx-xxxxx' | 'xxx xxx xxxx' |

'xxx-xxx-xxxx' | 'xxx xxx-xxxx' |

'(xxx) xxx-xxxx' | 'xxxxxxxxxx'

'xxxxxxxxxx'

currency

Key	Type	Default value
symbol	string	USD
symbolPosition	number	0
precision	number	2
thousandSeparator	boolean	true

checkbox

Key	Type	Default value
color	string	green

dateTime

Key	Type	Value	Default value
timeFormat	string	'HH:MM:SS' \| 'HH:MM' \| 'HH' \| 'HH:MM:SS timeZone' \| 'HH:MM timeZone' \| 'HH timeZone' \| 'HH:MM:SS TZN' \| 'HH:MM TZN' \| 'HH TZN'	HH:MM:SS
hourCycle	string	'12H' \| '24H'	'12H'
dateFormat	string	'MM/DD/YYYY' \| 'DD/MM/YYYY' \| 'YYYY/MM/DD' \| 'Month D, YYYY' \| 'M/D/YYYY' \| 'D/M/YYYY' \| 'YYYY/M/D' \| 'MMDDYYYY' \| 'DDMMYYYY' \| 'YYYYMMDD' \| 'MonDDYYYY' \| 'DDMonYYYY' \| 'YYYYMonDD' \| 'D Month, YYYY' \| 'YYYY, Month D' \| 'Mon-DD-YYYY' \| 'DD-Mon-YYYY' \| 'YYYY-Mon-DD' \| 'Mon DD, YYYY' \| 'DD Mon, YYYY' \| 'YYYY, Mon DD' \| 'bM/bD/YYYY' \| 'bD/bM/YYYY' \| 'YYYY/bM/bD' \| 'q Q YY' \| 'q Q YYYY' \| 'MMM YY' \| 'MMM YYYY' \| 'WW WK YY' \| 'WW WK YYYY'	DD/MM/YYYY

percent

Key	Type	Value	Default value
precision	number	-	0
showSymbol	boolean	true \| false	true
fromDecimal	boolean	true \| false	false
thousandSeparator	boolean	true \| false	false
type	string	'bar' \| 'text'	'text'

dotChart

Key	Type	Default value
lowColor	string	"#E2C67C"
highColor	string	"#6DBE5B"
benchMark	number	3
maxCount	number	5

number

Key	Type	Default value
precision	number	0
thousandSeparator	boolean	false

Column Type
Column Style
Column Properties

Configurations

To instantiate the grid in the client-side model

Client_Object

Key	Type
data	client-data
options	gridoptions
columnHeaders	columnHeaders
columns	columns
columnWidths	columnWidths
rowHeights	rowHeights
licenseKey	licenseKey

Copiedconst grid = new DataGrid(container, gridObject);

To instantiate the grid in the server-side model

Server_Object

Key	Type
data	server-data
licenseKey	licenseKey

Copiedconst grid = new DataGrid.Server(container, gridObject);

Arguments

Param	Type
container	HTML_Element
gridObject	Client_Object \| Server_Object

License key

Use the licenseKey option to set your DataGrid license key.

You can set the licenseKey option to one of the following:

Value	Details
'non-commercial'	For non-commercial use
provided commercial license key	For commercial use

Note: licenseKey is mandatory. Logger messages will be displayed on the console and above the grid.

Data methods

setCellData

The setCellData API will be updated in the respective row and column of the grid.

Return Type: String

Param	Type
row(index based)	number
column(index based)	number
data	string

Copied<gridInstance>.setCellData(row, column, data);

setCellDataForRange

The setDataForRange API will be updated in the respective range of the grid.

Return Type: String

Param	Type
startRow(index based)	number
endRow(index based)	number
startColumn(index based)	number
endColumn(index based)	number
data	[ ] [ ]

Copied<gridInstance>.setCellDataForRange(startRow, startColumn, endRow, endColumn)

Note: Certain methods may not be compatible with server models. For these cases, hooks are executed and implemented using a data provider.

POST - Add child organization to a Partner Portal

Purpose

Request URL

Scope

Request Body (JSON Object)

Sample Request

Table of contents

Table of contents

Grid Options

columnHeader

height

manualResize

readOnly

renderOnResize

reorderable

columnHighlighter

fillSeries

freezeColumnUpTo

freezeRowUpTo

height

plugins

readOnly

rowHeader

label

width

rowHighlighter

rtl

selection

styles

theme

width

zoomLevel

Table of contents

Grid methods

addBufferSpaceInContainerEnds

addEventListener

blur

changeTheme

clearAllCache

clearCache

clearColumnHeaderCache

clearRange

copy

download

focus

getViewPort

goToCell

goToColumn

goToRow

isRedoAvailable

isUndoAvailable

redo

refresh

removeEventListener

reset

resizeTo

scrollBy

scrollTo

undo

updateOptions

updateStyle

zoom

Grid Events

mousemove

mousedown

mouseleave

viewportChange

rowHoverChange

columnHoverChange

cellHoverChange

doubleClick

scroll

Table of contents

Row

addRow

appendRow

copyRow

copyRows

getRowCount

insertRowAbove