Documentation
API Summary
Initial Parameters
caption
Type: String or Function
Default: null
The text as table caption. You can define a callback function for generating customized caption instead. Set null to disable caption generation.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
captionTooltip
Type: String or Object
Default: null
The tooltip text for caption, which will make use of jQuery UI tooltip. You can pass an object as the initial parameters of jQuery UI tooltip, too.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
initRows
Type: Number
Default: 3
The total number of empty rows generated when init the grid. This will be ignored if initData is assigned.
maxRowsAllowed
Type: Number
Default: 0
The maximum number of rows allowed in this grid. Default value is 0 which means unlimited. The maxNumRowsReached callback function will be triggered when row(s) is/are adding to grid after maximum number of row reached.
initData
Type: Array
Default: null
An array of data to be filled after initialized the grid.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
columns
Type: Array
Default: null
Array of column options. Please refer to Column Parameters for more.
Example:
1 2 3 4 5 6 7 8 9 |
|
i18n
Type: Object
Default: null
Labels or messages used in grid.
append: | The tooltip on the `append` button at the bottom of grid. | |
removeLast: | The tooltip on the `remove` button at the bottom of grid. | |
insert: | The tooltip on the `insert` button at the end on each row. | |
remove: | The tooltip on the `remove` button at the end on each row. | |
moveUp: | The tooltip on the `move up` button at the end on each row. | |
moveDown: | The tooltip on the `move down` button at the end on each row. | |
rowDrag: | The tooltip on the `drag` button at the end on each row, if rowDragging is set to true. | |
rowEmpty: | The message to be displayed when no rows in grid. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
idPrefix
Type: String
Default: null
The ID prefix of controls generated inside the grid. Table ID will be used if not defined.
Example:
1 2 3 4 5 6 7 8 9 10 11 |
|
rowDragging
Type: Boolean
Default: false
Applying jQuery UI Sortable feature to allow re-order grid rows by dragging.
hideButtons
Type: Object
Default: null
Hide the standard action buttons at the end of row or bottom of grid.
append: | Set to true to hide the `append` button at the bottom or grid. | |
removeLast: | Set to true to hide the `remove` button at the bottom of grid. | |
insert: | Set to true to hide the `insert` button at the end on each row. | |
remove: | Set to true to hide the `remove` button at the end on each row. | |
moveUp: | TheSet to true to hide the `move up` button at the end on each row. | |
moveDown: | Set to true to hide the `move down` button at the end on each row. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
buttonClasses
Type: Object
Default: null
The extra class names for buttons.
append: | The extra class name to be added on the `append` button at the bottom of grid. | |
removeLast: | The extra class name to be added on the `remove` button at the bottom of grid. | |
insert: | The extra class name to be added on the `insert` button at the end on each row. | |
remove: | The extra class name to be added on the `remove` button at the end on each row. | |
moveUp: | The extra class name to be added on the `move up` button at the end on each row. | |
moveDown: | The extra class name to be added on the `move down` button at the end on each row. | |
rowDrag: | The extra class name to be added on the `drag` button at the end on each row, if rowDragging is set to true. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
sectionClasses
Type: Object
Default: null
The extra class names for table sections.
caption: | The extra class name to be added on the caption table row. | |
header: | The extra class name to be added on the column header table row. | |
body: | The extra class name to be added on each grid content table row. | |
footer: | The extra class name to be added on the footer table row. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
hideRowNumColumn
Type: Boolean
Default: false
Hide the row number column which is the first column of grid.
rowButtonsInFront
Type: Boolean
Default: false
Generate row button column in the front of input columns.
customGridButtons
Type: Object
Default: null
Customize the standard grid button such as changing the icon, adding text to the button or even use another button to replace the default one. You can specify jQuery UI Button initial parameter, a DOM element or a function that create a DOM element for each of the following button.
append: | The jQuery UI button initial parameter or DOM element or a function that create a DOM element as the `append` button at the bottom of grid. | |
removeLast: | The jQuery UI button initial parameter or DOM element or a function that create a DOM element as the `remove` button at the bottom of grid. | |
insert: | The jQuery UI button initial parameter or DOM element or a function that create a DOM element as the `insert` button at the end on each row. | |
remove: | The jQuery UI button initial parameter or DOM element or a function that create a DOM element as the `remove` button at the end on each row. | |
moveUp: | The jQuery UI button initial parameter or DOM element or a function that create a DOM element as the `move up` button at the end on each row. | |
moveDown: | The jQuery UI button initial parameter or DOM element or a function that create a DOM element as the `move down` button at the end on each row. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
|
customRowButtons
Type: Array
Default: null
Add an array of customized buttons to the last cell of each row. The generated buttons are supported all jQuery UI Button widget parameters with a click event handler.
uiButton: | Required. Object of parameters used to initial jQuery UI Button widget. | |
click: | Required. A event handler to be called when the generated button is clicked. Followings are the parameters will be sent to this event handler: 1. evtObj: The standard jQuery event object. 2. uniqueIndex: The uniqueIndex of that row. 3. rowData: An object contains the values of all controls of that row. | |
btnCss: | The extra CSS to be added on the generated button. | |
btnClass: | The extra classes to be added on the generated button. | |
btnAttr: | The extra attributes to be added on the generated button. | |
atTheFront: | Set to true for generate button at the front of standard action buttons. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
|
customFooterButtons
Type: Array
Default: null
Add an array of customized buttons to the bottom of grid. The generated buttons are supported all jQuery UI Button widget parameters with a click event handler.
uiButton: | Required. Object of parameters used to initial jQuery UI Button widget. | |
click: | Required. A event handler to be called when the generated button is clicked. The first parameter of the call back function is the standard jQuery event object. | |
btnCss: | The extra CSS to be added on the generated button. | |
btnClass: | The extra classes to be added on the generated button. | |
btnAttr: | The extra attributes to be added on the generated button. | |
atTheFront: | Set to true for generate button at the front of standard action buttons. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
rowCountName
Type: String
Default: '_RowCount'
The variable name of row count used for object mode of `getAllValue` method.
useSubPanel
Type: Boolean
Default: false
Use the sub panel or not.
maintainScroll
Type: Boolean
Default: false
The web browser will maintain the scroll position when add or remove row if this parameter is set to true.
maxBodyHeight
Type: Number
Default: 0
The maximum height of table body. Vertical scrollbar will be displayed when this height limit is reached. Default value is 0 which means this limit will not be applied.
Example:
1 2 3 4 5 6 7 8 9 10 11 |
|
Grid Callbacks
nameFormatter(idPrefix, name, uniqueIndex)
Type: Function
The callback function for format the HTML name of generated controls.
idPrefix: | The idPrefix defined in Initial Parameters. | |
name: | The name of column. | |
uniqueIndex: | The unique index assigned to this row. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
|
dataLoaded(caller, records)
Type: Function
The callback function to be triggered after data loaded to grid.
caller: | The table object that triggered this event. | |
records: | The array of data that loaded to grid. |
rowDataLoaded(caller, record, rowIndex, uniqueIndex)
Type: Function
The callback function to be triggered after data loaded to a row.
caller: | The table object that triggered this event. | |
record: | The data object that loaded to this row. | |
rowIndex: | Row index of target row. | |
uniqueIndex: | Unique index of target row. |
afterRowAppended(caller, parentRowIndex, addedRowIndex)
Type: Function
The callback function to be triggered after new row appended.
caller: | The table object that triggered this event. | |
parentRowIndex: | The index of row that above new added rows. This value will be null when table is empty. | |
addedRowIndex: | An array of row index added. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
afterRowInserted(caller, parentRowIndex, addedRowIndex)
Type: Function
The callback function to be triggered after new row inserted.
caller: | The table object that triggered this event. | |
parentRowIndex: | The index of row that above new added rows. This value will be null when inserting a row in front of the first row. | |
addedRowIndex: | An array of row index added. |
afterRowSwapped(caller, oldRowIndex, newRowIndex)
Type: Function
The callback function to be triggered after grid row swapped (moved up or down).
caller: | The table object that triggered this event. | |
oldRowIndex: | The old row index of swapped row. | |
newRowIndex: | The new row index of swapped row. |
afterRowDragged(caller, rowIndex, uniqueIndex)
Type: Function
The callback function to be triggered after grid row dragged.
caller: | The table object that triggered this event. | |
rowIndex: | The row index of dragged row. | |
uniqueIndex: | The unique index of dragged row. |
beforeRowRemove(caller, rowIndex)
Type: Function
The callback function to be triggered before grid row removed. Return `false` to terminate row moving process.
caller: | The table object that triggered this event. | |
rowIndex: | The row index to be removed. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
afterRowRemoved(caller, rowIndex)
Type: Function
The callback function to be triggered after grid row removed.
caller: | The table object that triggered this event. | |
rowIndex: | The row index of removed row. This value will be null when removed the last row in grid. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
subPanelBuilder(cell, uniqueIndex)
Type: Function
The callback function for generating sub panel content.
cell: | The table cell that act as sub panel. You should generate elements and append to it. | |
uniqueIndex: | The unique index assigned to this row. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
subPanelGetter(uniqueIndex)
Type: Function
The callback function for getting values from sub panel. Used for getAllValue and getRowValue method.
uniqueIndex: | The unique index assigned to this row. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
maxNumRowsReached()
Type: Function
The callback function to be triggered when row(s) is/are adding to grid but the maximum number of rows allowed is reached.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
Column Parameters
type
Type: String
Default: 'text'
The type of control generated in a table cell.
text: | Generate a text input box. | |
select: | Generate a drop down list control. The available option item can be defined in ctrlOptions. | |
checkbox: | Generate a checkbox control. | |
color: | Generate a HTML5 color control. A normal text control will be generated when browser not supported. | |
date: | Generate a HTML5 date control. A normal text control will be generated when browser not supported. | |
datetime: | Generate a HTML5 datetime control. A normal text control will be generated when browser not supported. | |
datetime-local: | Generate a HTML5 datetime-local control. A normal text control will be generated when browser not supported. | |
email: | Generate a HTML5 email control. A normal text control will be generated when browser not supported. | |
number: | Generate a HTML5 number control. A normal text control will be generated when browser not supported. | |
range: | Generate a HTML5 range control. A normal text control will be generated when browser not supported. | |
search: | Generate a HTML5 search control. A normal text control will be generated when browser not supported. | |
tel: | Generate a HTML5 tel control. A normal text control will be generated when browser not supported. | |
time: | Generate a HTML5 time control. A normal text control will be generated when browser not supported. | |
url: | Generate a HTML5 url control. A normal text control will be generated when browser not supported. | |
week: | Generate a HTML5 week control. A normal text control will be generated when browser not supported. | |
hidden: | Generate a hidden control which will not be shown on screen. It is useful for keeping data that meaningless to user but important to application logic such as database primary key sequence number. | |
ui-datepicker: | Generate a text input box with jQuery UI datapicker widget. | |
ui-spinner: | Generate a text input box with jQuery UI spinner widget. | |
ui-autocomplete: | Generate a text input box with jQuery UI autocomplete widget. | |
ui-selectmenu: | Generate a select element with jQuery UI selectmenu widget. | |
custom: | Generate a custom input field. The customBuilder, customGetter and customSetter callback function must be defined for custom control type. |
name
Type: String
Default: null
The name of control generated. This value must be unique across the columns array.
value
Type: String, Number, Boolean, Object or Array
Default: null
The default value of control. The data type is variance due to different type of the control.
display
Type: String Or Function
Default: null
The display label showed at the top of each column. You can define a callback function for generating customized text instead.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
|
displayCss
Type: Object
Default: null
The extra CSS style settings to be applied on the display column header label.
Example:
1 2 3 4 5 6 7 8 9 |
|
displayTooltip
Type: String or Object
Default: null
The tooltip text for column header, which will make use of jQuery UI tooltip. You can pass an object as the initial parameters of jQuery UI tooltip, too. If you want a tooltip on the generated element such as textbox please check the uiTooltip option. Detailed description on jQuery UI tooltip is available at their API page.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
headerSpan
Type: Integer
Default: null
Set the `colSpan` value of the header column table cell.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
cellCss
Type: Object
Default: null
The extra CSS style settings to be applied on table cell that contain the generated control.
Example:
1 2 3 4 5 6 7 8 9 |
|
ctrlAttr
Type: Object
Default: null
The extra control attribute settings for the generated control. This setting will not be applied on `custom` control type.
Example:
1 2 3 4 5 6 7 8 9 |
|
ctrlProp
Type: Object
Default: null
The extra control properties settings for the generated control. This setting will not be applied on `custom` control type.
Example:
1 2 3 4 5 6 7 8 9 10 |
|
ctrlCss
Type: Object
Default: null
The extra CSS style settings to be applied on the generated control. This setting will not be applied on `custom` control type.
Example:
1 2 3 4 5 6 7 8 9 |
|
ctrlClass
Type: String
Default: null
The extra CSS class to be added on the generated control. This setting will not be applied on `custom` control type.
Example:
1 2 3 4 5 6 7 8 9 |
|
ctrlOptions
Type: Array or Object or String or Function
Default: null
The available options for `select` type control. Please check Demo for more.
Array: | Passing options as array such as ['Option 1', 'Option 2', 'Option 3'] or [{ label: 'Option 1', value: 1 }, { label: 'Option 2', value: 2 }, { label: 'Option 3', value: 3 }]. | |
Object: | Passing options as object such as { 1: 'Option 1', 2: 'Object 2', 3: 'Object 3' }. | |
String: | Passing a string contain label and value pair that separated by semicolon such as 'Option 1;Option 2;Option 3' or '1:Option 1;2:Option 2;3:Option 3'. | |
Function: | Passing a function that generate options. The first parameter is the select element DOM object. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
|
invisible
Type: Boolean
Default: false
Hide current column after initialization or not.
Example:
1 2 3 4 5 6 7 8 9 |
|
resizable
Type: Boolean
Default: false
Enable resizable on current column header cell (the right edge) by using jQuery UI Resizible.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 |
|
emptyCriteria
Type: String or Function
Default: null
The value to compare for indentify this column value is empty. You can define a callback function to check the value is empty or not. Please check Demo for more.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
uiOption
Type: Object
Default: null
The initial parameters for jQuery UI widgets. Please check the jQuery UI API for more.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
uiTooltip
Type: Object
Default: null
The initial parameters for jQuery UI tooltip on generated elements such as textboxes and checkboxes. If you want a tooltip on column header text please check the displayTooltip option. Detailed description on jQuery UI tooltip is available at their API page.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
customBuilder(parent, idPrefix, name, uniqueIndex)
Type: Function
Default: null
The callback function to build a custom control. It is mandatory for `type` defined as `custom`.
parent: | The parent control which is a table cell that holds this custom control. | |
idPrefix: | The idPrefix defined in Initial Parameters. | |
name: | The name of column. | |
uniqueIndex: | The unique index assigned to this row. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
|
customGetter(idPrefix, name, uniqueIndex)
Type: Function
Default: null
The callback function to get the value of this custom control. It is mandatory for `type` defined as `custom`. Check the example of customBuilder for more.
idPrefix: | The idPrefix defined in Initial Parameters. | |
name: | The name of column. | |
uniqueIndex: | The unique index assigned to this row. |
customSetter(idPrefix, name, uniqueIndex, value)
Type: Function
Default: null
The callback function to get the value of this custom control. It is mandatory for `type` defined as `custom`. Check the example of customBuilder for more.
idPrefix: | The idPrefix defined in Initial Parameters. | |
name: | The name of column. | |
uniqueIndex: | The unique index assigned to this row. | |
value: | The value to be assigned to this custom control. |
onClick(evt, rowIndex)
Type: Function
Default: null
The `onClick` event callback function to be bound on generated control. This setting will not be applied on `custom` control type.
evt: | The original jQuery event object. | |
rowIndex: | The row index of control triggered this event. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
onChange(evt, rowIndex)
Type: Function
Default: null
The `onChange` event callback function to be bound on generated control. This setting will not be applied on `custom` control type.
evt: | The original jQuery event object. | |
rowIndex: | The row index of control triggered this event. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
Methods
isReady()
Returns: Boolean
Get a value to indicate the first element in the set of matched elements is initialized as appengGrid or not.
Example:
1 2 3 4 5 |
|
isDataLoaded()
Returns: Boolean
Get a value to indicate the first element in the set of matched elements has loaded data or not.
Example:
1 2 3 4 5 |
|
load(records)
Returns: jQuery
Load records to the first element in the set of matched elements.
records: | An array of object for filling the appengGrid. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
|
appendRow(numOfRow)
Returns: jQuery
Append specified number of row or row data to the end of first element in the set of matched elements.
numOfRowOrRowArray: | The number of rows or row data to be appended. Default is 1. |
Example:
1 2 3 4 5 6 7 8 9 10 |
|
insertRow(numOfRowOrRowArray, rowIndex)
Returns: jQuery
Insert specified number of row or row data above the specified rowIndex of first element in the set of matched elements.
numOfRowOrRowArray: | The number of rows or row data to be appended. Default is 1. | |
rowIndex: | The row index of the new row to be inserted. |
Example:
1 2 3 4 5 6 7 8 9 |
|
removeRow(rowIndex)
Returns: jQuery
Remove row in specified index of first element in the set of matched elements.
rowIndex: | The row index of the new row to be inserted. |
Example:
1 2 3 4 |
|
moveUpRow(rowIndex)
Returns: jQuery
Move the row up in specified index of first element in the set of matched elements.
rowIndex: | The row index of the row to be moved up. |
Example:
1 2 3 4 |
|
moveDownRow(rowIndex)
Returns: jQuery
Move the row down in specified index of first element in the set of matched elements.
rowIndex: | The row index of the row to be moved down. |
Example:
1 2 3 4 |
|
getRowCount()
Returns: Number
Get the total number of rows of first element in the set of matched elements.
Example:
1 2 3 4 |
|
getUniqueIndex(rowIndex)
Returns: Number
Get the unique index by row index. Click here for more information about `uniqueIndex`.
rowIndex: | The row index of target row. |
Example:
1 2 3 4 |
|
getRowIndex(uniqueIndex)
Returns: Number
Get the row index by unique index. Click here for more information about `uniqueIndex`.
uniqueIndex: | The unique index of target row. |
Example:
1 2 3 4 |
|
getRowValue(rowIndex)
Returns: Object
Get all control values of specified row index first element in the set of matched elements.
rowIndex: | The row index of the data to be retrieved from. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
getAllValue(objectMode)
Returns: Array or Object
Get all control values in first element in the set of matched elements.
objectMode: | The result will be returned as array by default. Set this value to true to return as object. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
|
getCtrlValue(name, rowIndex)
Returns: String or Number or Boolean or Object
Get the control value on specified column and row index of first element in the set of matched elements. The return type is based on the generated control type.
name: | The column name assigned in columns of Initial Parameters. | |
rowIndex: | The row index of the data to be retrieved from. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
setCtrlValue(name, rowIndex, value)
Returns: jQuery
Set the control value on specified column and row index of first element in the set of matched elements.
name: | The column name assigned in columns of Initial Parameters. | |
rowIndex: | The row index of the data to be retrieved from. | |
value: | The value to be assigned. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
|
getCellCtrl(name, rowIndex)
Returns: DOM Element
Get the control (DOM element) generated by specified column name and row index.
name: | The column name assigned in columns of Initial Parameters. | |
rowIndex: | The row index of the control to be retrieved from. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
getCellCtrlByUniqueIndex(name, uniqueIndex)
Returns: DOM Element
Get the control (DOM element) generated by specified column name and unique index. This function will return the same result as getCellCtrl.
name: | The column name assigned in columns of Initial Parameters. | |
uniqueIndex: | The unique index of the control to be retrieved from. |
getRowOrder()
Returns: Array
Get the unique index array of the first element in the set of matched elements. Click here for more information about `uniqueIndex`.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
|
getColumns()
Returns: Array
Get an array of columns used in the first element in the set of matched elements. Please notice that changing the returned array items will not affect initialized `appendGrid`.
showColumn(name)
Returns: jQuery
Show the whole column with specified name.
name: | The column name assigned in columns of Initial Parameters. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
hideColumn(name)
Returns: jQuery
Hide the whole column with specified name.
name: | The column name assigned in columns of Initial Parameters. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
|
isColumnInvisible(name)
Returns: Boolean
Check specified column is invisible or not.
name: | The column name assigned in columns of Initial Parameters. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
|
isRowEmpty(rowIndex)
Returns: Boolean
Check specified row is empty or not. You may need to change the emptyCriteria to meet your requirement. Please check Demo for more.
rowIndex: | Row index of target row. |
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
removeEmptyRows()
Returns: jQuery
Remove all empty rows in grid. You may need to change the emptyCriteria to meet your requirement. Please check Demo for more.
Example:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|