appendGrid - Documentation

API Summary

Initial Parameters	Grid Callbacks	Column Parameters	Methods
caption	nameFormatter	type	isReady
captionTooltip	dataLoaded	name	isDataLoaded
initRows	rowDataLoaded	value	load
maxRowsAllowed	afterRowAppended	display	appendRow
initData	afterRowInserted	displayCss	insertRow
columns	afterRowSwapped	displayTooltip	removeRow
i18n	afterRowDragged	headerSpan	moveUpRow
idPrefix	beforeRowRemove	cellCss	moveDownRow
rowDragging	afterRowRemoved	ctrlAttr	getRowCount
hideButtons	subPanelBuilder	ctrlProp	getUniqueIndex
buttonClasses	subPanelGetter	ctrlCss	getRowIndex
sectionClasses	maxNumRowsReached	ctrlClass	getRowValue
hideRowNumColumn		ctrlOptions	getAllValue
rowButtonsInFront		invisible	getCtrlValue
customGridButtons		resizable	setCtrlValue
customRowButtons		emptyCriteria	getCellCtrl
customFooterButtons		uiOption	getCellCtrlByUniqueIndex
rowCountName		uiTooltip	getRowOrder
useSubPanel		customBuilder	getColumns
maintainScroll		customGetter	showColumn
maxBodyHeight		customSetter	hideColumn
		onClick	isColumnInvisible
		onChange	isRowEmpty
			removeEmptyRows

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    // Define a function to generate a customized caption
                    caption: function (cell) {
                        $(cell).css('font-size', '16pt').text('This is my caption!');
                    },
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ]
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    caption: 'My CD Album',
                    captionTooltip: {
                        items: 'td',
                        content: 'This is my CD Album',
                        show: {
                            effect: 'fold',
                            delay: 250
                        }
                    },
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ]
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    initData: [
                        { Album: 'Album1', Artist: 'Artist1', Year: '2001' },
                        { Album: 'Album2', Artist: 'Artist2', Year: '2003' },
                        { Album: 'Album3', Artist: 'Artist3', Year: '2005' }
                    ]
                });
            });

columns

Type: Array
Default: null

Array of column options. Please refer to Column Parameters for more.

Example:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', type: 'text', display: 'Album', ctrlAttr: { maxlength: 100 } },
                        { name: 'Artist', type: 'select', display: 'Artist', ctrlOptions: { 0: '{Choose One}', 1: 'Theresa Fu', 2: 'Kelly Chen' } },
                        { name: 'Year', type: 'ui-spinner', display: 'Year', value: new Date().getFullYear(), uiOption: { /* UI spinner Settings */ }
                    ]
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    i18n: {
                        append: 'Hey! Append a new row at bottom!',
                        removeLast: 'Caution! Remove the last row!'
                    }
                });
            });

idPrefix

Type: String
Default: null

The ID prefix of controls generated inside the grid. Table ID will be used if not defined.

Example:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    idPrefix: 'HelloTable'
                });
                // The field id and name will be generated as `HelloTable_Album_1`.
            });

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:	Set 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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    hideButtons: {
                        remove: true,
                        removeLast: true
                    }
                    // Remove buttons will not be displayed
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    buttonClasses: {
                        insert: 'extra1 extra2',
                        moveUp: 'extra3'
                    }
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    sectionClasses: {
                        header: 'extra1 extra2',
                        body: 'extra3'
                    }
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    customGridButtons: {
                        // Use jQuery UI Button initial parameter
                        append: { icons: { primary: 'ui-icon-star' }, text: true, label: 'Append!' },
                        // Use a DOM element
                        insert: $('<button/>').css('color', 'red').text('Insert').get(0),
                        // Use a function that create DOM element
                        moveUp: function (){
                            var button = document.createElement('input');
                            button.type = 'button';
                            button.value = '^^^';
                            return button;
                        }
                    }
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    customRowButtons: [
                        {
                            uiButton: { icons: { primary: 'ui-icon-star' }, text: false },
                            click: setFavorite, btnCss: { 'min-width': '30px' },
                            btnAttr: { title: 'Set favorite!' }, atTheFront: true
                        },
                        {
                            uiButton: { icons: { primary: 'ui-icon-print' }, label: 'Print' },
                            click: function (evtObj, uniqueIndex, rowData) {
                                alert('You clicked the print button!');
                            },
                            btnClass: 'print'
                        }
                    ]
                });
            });
            function setFavorite(evtObj, uniqueIndex, rowData) {
                alert('I know you love this album now :)');
                // Check the caller button exist in event object
                if (evtObj && evtObj.target) {
                    // Do something on the button, such as disable the button
                    $(evtObj.target).button('disable');
                }
            }

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    customFooterButtons: [
                        {
                            uiButton: { icons: { primary: 'ui-icon-refresh' }, label: 'Refresh' },
                            btnCss: { 'color': '#ff0000' },
                            click: function (evt) {
                                alert('You clicked `Refresh` button!');
                            },
                            atTheFront: true
                        },
                        {
                            uiButton: { icons: { primary: 'ui-icon-arrowthickstop-1-s' }, text: false },
                            btnAttr: { title: 'Download Data' },
                            click: function (evt) {
                                alert('Download is in process...');
                            }
                        }
                    ]
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    maxBodyHeight: 240, // Limit the table body height to 240px
                    maintainScroll: true // Scroll the table body when new rows are appended
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    nameFormatter: function (idPrefix, name, uniqueIndex) {
                        // It is OK to just use the `name` to name the control.
                        // So, server side can receive values in array format.
                        // The generated elements will be something like that:
                        // 
                        // <input id="tblAppendGrid_Album_1" name="Album" type="text" />
                        // <input id="tblAppendGrid_Album_2" name="Album" type="text" />
                        // <input id="tblAppendGrid_Album_3" name="Album" type="text" />
                        // 
                        // C#/ASP.NET
                        // string[] albums = Request.Form.GetValues("Album");
                        //
                        // PHP
                        // $albums = $_POST['Album'];
                        //
                        return name;
                    }
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    afterRowAppended: function (caller, parentRowIndex, addedRowIndex) {
                        // Copy data of `Year` from parent row to new added rows
                        var parentValue = $(caller).appendGrid('getCtrlValue', 'Year', parentRowIndex);
                        for (var z = 0; z < addedRowIndex.length; z++) {
                            $(caller).appendGrid('setCtrlValue', 'Year', addedRowIndex[z], parentValue);
                        }
                    }
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    beforeRowRemove: function (caller, rowIndex) {
                        return confirm('Are you sure to remove this row?');
                    }
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    afterRowRemoved: function (caller, rowIndex) {
                        // Do something
                    }
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    useSubPanel: true, // Required
                    subPanelBuilder: function (cell, uniqueIndex) {
                        // Create a textarea element and append to the cell
                        $('<textarea></textarea>').attr({
                            id: 'tblAppendGrid_Comment_' + uniqueIndex,
                            name: 'tblAppendGrid_Comment_' + uniqueIndex,
                            cols: 80,
                            rows: 3
                        }).appendTo(cell);
                    }
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    useSubPanel: true, // Required
                    subPanelBuilder: function (cell, uniqueIndex) {
                        // Create a textarea element and append to the cell
                        $('<textarea></textarea>').attr({
                            id: 'tblAppendGrid_Comment_' + uniqueIndex,
                            name: 'tblAppendGrid_Comment_' + uniqueIndex,
                            cols: 80,
                            rows: 3
                        }).appendTo(cell);
                    },
                    subPanelGetter: function (uniqueIndex) {
                        // Return the values as object
                        return {
                            'Comment': document.getElementById('tblAppendGrid_Comment_' + uniqueIndex).value
                        };
                    }
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    maxRowsAllowed: 5,
                    maxNumRowsReached: function () {
                        // Show an alert message
                        alert('You cannot add more than 5 rows!');
                    }
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' },
                        // Generate a select all/deselect all checkbox at column header text
                        {
                            name: 'Poster',
                            type: 'checkbox',
                            display: function (cell) {
                                // Declare the ID of the checkbox
                                var tickId = 'tblAppendGrid_RowHeader_PosterTick';
                                // Generate the checkbox
                                $('<input/>').attr({ id: tickId, type: 'checkbox' }).appendTo(cell).on('click', function (evt) {
                                    // Get total row count and loop on all rows
                                    var count = $('#tblAppendGrid').appendGrid('getRowCount');
                                    for (var z = 0; z < count; z++) {
                                        // Set checked / unchecked based on the checkbox state
                                        $('#tblAppendGrid').appendGrid('getCellCtrl', 'Poster', z).checked = evt.target.checked;
                                    }
                                });
                                // Add a label that reference to the checkbox
                                $('<label></label>').attr('for', tickId).text('Poster').appendTo(cell);
                            }
                        }
                    ]
                });
            });

displayCss

Type: Object
Default: null

The extra CSS style settings to be applied on the display column header label.

Example:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album', displayCss: { 'font-weight': 'bold' } },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ]
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        {
                            name: 'Artist', display: 'Artist',
                            // You can just pass in the content which will use the default setting of UI Tooltip
                            displayTooltip: 'The name of artist'
                        },
                        {
                            name: 'Year', display: 'Year',
                            // You can also pass in the UI Tooltip initial parameters
                            displayTooltip: {
                                items: 'td',
                                content: 'The release year of the album',
                                show: {
                                    effect: 'drop',
                                    delay: 250
                                }
                            }
                        }
                    ]
                });
            });

headerSpan

Type: Integer
Default: null

Set the `colSpan` value of the header column table cell.

Example:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        // The header cells of `DurationMinute` and `DurationSecond` will not be generated
                        // as `headerSpan` value of `DurationHour` is assigned to 3.
                        { name: 'DurationHour', display: 'Duration', headerSpan: 3, ctrlAttr: { maxlength: 2 }, value: 0 },
                        { name: 'DurationMinute', ctrlAttr: { maxlength: 2 }, value: 0 },
                        { name: 'DurationSecond', ctrlAttr: { maxlength: 2 }, value: 0 },
                        { name: 'Year', display: 'Year' }
                    ]
                });
            });

cellCss

Type: Object
Default: null

The extra CSS style settings to be applied on table cell that contain the generated control.

Example:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album', cellCss: { 'background-color': '#ffffff' } },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ]
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album', ctrlAttr: { 'maxlength': 100 } },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ]
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' },
                        { name: 'Poster', display: 'Poster', type: 'checkbox', ctrlProp: { checked: true } }
                    ]
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album', ctrlCss: { 'text-align': 'center', width: '200px' } },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ]
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album', ctrlClass: 'class-one class-two' },
                        { name: 'Artist', display: 'Artist', ctrlClass: 'class-three' },
                        { name: 'Year', display: 'Year' }
                    ]
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        {
                            // Pass options as object
                            name: 'Artist', display: 'Artist', type: 'select',
                            ctrlOptions: { 1: 'Theresa Fu', 2: 'Kelly Chen', 3: 'Arashi' }
                        },
                        {
                            // Pass options as string array
                            name: 'Year', display: 'Year', type: 'select',
                            ctrlOptions: ['2010', '2011', '2012', '2013']
                        },
                        {
                            // Pass options as string
                            name: 'Origin', display: 'Origin', type: 'select',
                            ctrlOptions: '1:Hong Kong;2:Taiwan;3:Japan'
                        },
                        {
                            // Generate options by callback function
                            name: 'Poster', display: 'Poster', type: 'select',
                            ctrlOptions: function (elem) {
                                var group = document.createElement('optgroup');
                                group.label = 'With poster?';
                                elem.appendChild(group);
                                group.appendChild(new Option('No', 0));
                                group.appendChild(new Option('Yes', 1));
                            }
                        }
                    ]
                });
            });

invisible

Type: Boolean
Default: false

Hide current column after initialization or not.

Example:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year', invisible: true }
                    ]
                });
            });

resizable

Type: Boolean
Default: false

Enable resizable on current column header cell (the right edge) by using jQuery UI Resizible.

Example:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { 
                            name: 'Artist', display: 'Artist', resizable: true,
                            ctrlCss: { width: '100%' }, displayCss: { 'min-width': '160px'}
                        },
                        { name: 'Year', display: 'Year' }
                    ]
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album', type: 'text' },
                        { name: 'Artist', display: 'Artist', type: 'text' },
                        {
                            name: 'Year', display: 'Year', type: 'text',
                            // Consider current year as empty
                            emptyCriteria: new Date().getFullYear()
                        },
                        {
                            name: 'Price', display: 'Price', type: 'text',
                            emptyCriteria: function (value) {
                                // A value lesser than zero will consider as empty.
                                return (value < 0);
                            }
                        }
                    ]
                });
            });

uiOption

Type: Object
Default: null

The initial parameters for jQuery UI widgets. Please check the jQuery UI API for more.

Example:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year', type: 'ui-spinner', uiOption: { min: 2000, max: new Date().getFullYear() } },
                        {
                            // Generate jQuery UI autocomplete with pre-defined source
                            name: 'Origin', display: 'Origin', type: 'ui-autocomplete',
                            uiOption: {
                                source: ['Hong Kong', 'Taiwan', 'Japan', 'Korea', 'US', 'Others']
                            }
                        }
                    ]
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        {
                            name: 'Artist', display: 'Artist',
                            uiTooltip: {
                                items: 'input',
                                content: 'Please fill in the Artist name!!',
                                show: {
                                    effect: 'slideDown',
                                    delay: 250
                                }
                            }
                        },
                        { name: 'Year', display: 'Year' }
                    ]
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist', ctrlAttr: { title: 'Please fill in the Artist name!!' }, uiTooltip: { show: true} },
                        { name: 'Year', display: 'Year' },
                        { name: 'Duration', display: 'Total Duration', type: 'custom', value: '0:00:00',
                            customBuilder: function (parent, idPrefix, name, uniqueIndex) {
                                // Prepare the control ID/name by using idPrefix, column name and uniqueIndex
                                var ctrlId = idPrefix + '_' + name + '_' + uniqueIndex;
                                // Create a span as a container
                                var ctrl = document.createElement('span');
                                // Set the ID and name to container and append it to parent control which is a table cell
                                $(ctrl).attr({ id: ctrlId, name: ctrlId }).appendTo(parent);
                                // Create extra controls and add to container
                                $('<input/>', { type: 'text', maxLength: 1, id: ctrlId + '_Hour' }).css('width', '20px').appendTo(ctrl).spinner({ max: 9, min: 0 });
                                $('<input/>', { type: 'text', maxLength: 2, id: ctrlId + '_Minute' }).css('width', '20px').appendTo(ctrl).spinner({ max: 59, min: 0 });
                                $('<input/>', { type: 'text', maxLength: 2, id: ctrlId + '_Second' }).css('width', '20px').appendTo(ctrl).spinner({ max: 59, min: 0 });
                                // Finally, return the container control
                                return ctrl;
                            },
                            customGetter: function (idPrefix, name, uniqueIndex) {
                                // Prepare the control ID/name by using idPrefix, column name and uniqueIndex
                                var ctrlId = idPrefix + '_' + name + '_' + uniqueIndex;
                                // Get the value of spinners
                                var hour = $('#' + ctrlId + '_Hour').spinner('value');
                                var minute = $('#' + ctrlId + '_Minute').spinner('value');
                                var second = $('#' + ctrlId + '_Second').spinner('value');
                                // Return the formatted duration
                                return hour + ':' + (minute < 10 ? '0' + minute : minute) + ':' + (second < 10 ? '0' + second : second);
                            },
                            customSetter: function (idPrefix, name, uniqueIndex, value) {
                                // Prepare the control ID/name by using idPrefix, column name and uniqueIndex
                                var ctrlId = idPrefix + '_' + name + '_' + uniqueIndex;
                                // Check the input value and split it to array if valid
                                var sep = null;
                                if (value != null && -1 != value.search(/^[0-9]:[0-9]{1,2}:[0-9]{1,2}$/)) {
                                    sep = value.split(':');
                                }
                                // Set the value to different spinners
                                $('#' + ctrlId + '_Hour').spinner('value', sep == null ? 0 : sep[0]);
                                $('#' + ctrlId + '_Minute').spinner('value', sep == null ? 0 : sep[1]);
                                $('#' + ctrlId + '_Second').spinner('value', sep == null ? 0 : sep[2]);
                            }
                        }
                    ]
                });
            });

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 set 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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist',
                            onClick: function (evt, rowIndex) {
                                alert('You have clicked on Artist at row ' + rowIndex);
                            }
                        },
                        { name: 'Year', display: 'Year' }
                    ]
                });
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album',
                            onChange: function (evt, rowIndex) {
                                alert('You have changed value of Album at row ' + rowIndex);
                            }
                        },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ]
                });
            });

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:

            $(function() {
                if ($('#tblAppendGrid').appendGrid('isReady')) {
                    // Do something
                }
            });

isDataLoaded()

Returns: Boolean

Get a value to indicate the first element in the set of matched elements has loaded data or not.

Example:

            $(function() {
                if ($('#tblAppendGrid').appendGrid('isDataLoaded')) {
                    // Do something
                }
            });

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:

            $(function() {
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ]
                });
                $('#tblAppendGrid').appendGrid('load', [
                    { Album: 'Album1', Artist: 'Artist1', Year: '2001' },
                    { Album: 'Album2', Artist: 'Artist2', Year: '2003' },
                    { Album: 'Album3', Artist: 'Artist3', Year: '2005' }
                ]);
            }

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:

            $(function() { 
                // Appending 2 empty rows.
                $('#tblAppendGrid').appendGrid('appendRow', 2);
                // Appending 3 rows with data.
                $('#tblAppendGrid').appendGrid('appendRow', [ 
                    { Album: 'Album1', Artist: 'Artist1', Year: '2001' },
                    { Album: 'Album2', Artist: 'Artist2', Year: '2003' },
                    { Album: 'Album3', Artist: 'Artist3', Year: '2005' }
                ]);
            });

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:

            $(function() {
                // Insert one row above the third row (rowIndex=2)
                $('#tblAppendGrid').appendGrid('insertRow', 1, 2);
                // Insert two rows above the forth row (rowIndex=3)
                $('#tblAppendGrid').appendGrid('insertRow', [
                    { Album: 'Album1', Artist: 'Artist1', Year: '2001' },
                    { Album: 'Album2', Artist: 'Artist2', Year: '2003' }
                ], 3);
            });

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 removed.

Example:

            $(function() {
                // Remove the second row (rowIndex=1)
                $('#tblAppendGrid').appendGrid('removeRow', 1);
            });

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:

            $(function() {
                // Move the third row up (rowIndex=2)
                $('#tblAppendGrid').appendGrid('moveUpRow', 2);
            });

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:

            $(function() {
                // Move the forth row down (rowIndex=3)
                $('#tblAppendGrid').appendGrid('moveDownRow', 3);
            });

getRowCount()

Returns: Number

Get the total number of rows of first element in the set of matched elements.

Example:

            $(function() {
                var count =  $('#tblAppendGrid').appendGrid('getRowCount');
                alert('There are ' + count + ' row(s) inside the grid!');
            });

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:

            $(function() {
                var uniqueIndex = $('#tblAppendGrid').appendGrid('getUniqueIndex', 2);
                alert('The unique index of the third row is ' + uniqueIndex);
            });

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:

            $(function() {
                var rowIndex = $('#tblAppendGrid').appendGrid('getRowIndex', 2);
                alert('The row index of uniqueIndex=2 is ' + rowIndex);
            });

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:

            $(function() {
                // Initialize the grid with data
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    initData: [
                        { Album: 'Album1', Artist: 'Artist1', Year: '2001' },
                        { Album: 'Album2', Artist: 'Artist2', Year: '2003' },
                        { Album: 'Album3', Artist: 'Artist3', Year: '2005' }
                    ]
                });
                // Get data of row 2
                var data = $('#tblAppendGrid').appendGrid('getRowValue', 1);
                // Get the Album from data object
                alert('Album of second row is ' + data.Album);
                // Get the Artist in another way
                alert('Artist of second row is ' + data['Artist']);
            }

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:

            $(function() {
                // Initialize the grid with data
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    initData: [
                        { Album: 'Album1', Artist: 'Artist1', Year: '2001' },
                        { Album: 'Album2', Artist: 'Artist2', Year: '2003' },
                        { Album: 'Album3', Artist: 'Artist3', Year: '2005' }
                    ]
                });
                // Example 1: Get all data as array
                var data = $('#tblAppendGrid').appendGrid('getAllValue');
                // Get the Album of row 1
                alert('Album of first row is ' + data[0].Album);
                // Get the Artist of row 2
                alert('Artist of second row is ' + data[1]['Artist']);
                // Example 2: Get all data as object
                var data = $('#tblAppendGrid').appendGrid('getAllValue', true);
                // Get the Album of row 1
                alert('Album of first row is ' + data.Album_0);
                // Get the Artist of row 2
                alert('Artist of second row is ' + data['Artist_1']);
                // Get the total row count
                var count = data['_RowCount'];
                alert('Total ' + count + ' row(s) in object');
            }

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:

            $(function() {
                // Initialize the grid with data
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    initData: [
                        { Album: 'Album1', Artist: 'Artist1', Year: '2001' },
                        { Album: 'Album2', Artist: 'Artist2', Year: '2003' },
                        { Album: 'Album3', Artist: 'Artist3', Year: '2005' }
                    ]
                });
                // Get the value of Album of second row (rowIndex=1)
                var value = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Album', 1);
                alert('Album of second row is ' + value);
            }

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:

            $(function() {
                // Initialize the grid with data
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    initData: [
                        { Album: 'Album1', Artist: 'Artist1', Year: '2001' },
                        { Album: 'Album2', Artist: 'Artist2', Year: '2003' },
                        { Album: 'Album3', Artist: 'Artist3', Year: '2005' }
                    ]
                });
                // Set the value of Artist of third row (rowIndex=2)
                $('#tblAppendGrid').appendGrid('setCtrlValue', 'Artist', 2, 'Wonder Girls');
                alert('Artist of third row is changed!');
            }

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:

            $(function() {
                // Initialize the grid with data
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    initData: [
                        { Album: 'Album1', Artist: 'Artist1', Year: '2001' },
                        { Album: 'Album2', Artist: 'Artist2', Year: '2003' },
                        { Album: 'Album3', Artist: 'Artist3', Year: '2005' }
                    ]
                });
                // Get the control of Album of second row (rowIndex=1)
                var elem = $('#tblAppendGrid').appendGrid('getCellCtrl', 'Album', 1);
                // Do something on the element, such as adjust its maxlength
                $(elem).attr('maxlength', 100);
            }

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:

            $(function() {
                // Initialize the grid with data
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    initData: [
                        { Album: 'Album1', Artist: 'Artist1', Year: '2001' },
                        { Album: 'Album2', Artist: 'Artist2', Year: '2003' },
                        { Album: 'Album3', Artist: 'Artist3', Year: '2005' }
                    ]
                });
                // Get the rowOrder
                var rowOrder = $('#tblAppendGrid').appendGrid('getRowOrder');
                alert('There are ' + rowOrder.length + ' row(s) in grid.');
                alert('Unique index of the first row is ' + rowOrder[0]);
                alert('Unique index of the last row is ' + rowOrder[rowOrder.length - 1]);
            }

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:

            $(function() {
                // Initialize the grid with data
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year', invisible: true }
                    ],
                    initData: [
                        { Album: 'Album1', Artist: 'Artist1', Year: '2001' },
                        { Album: 'Album2', Artist: 'Artist2', Year: '2003' },
                        { Album: 'Album3', Artist: 'Artist3', Year: '2005' }
                    ]
                });
                // Show the `Year` column which is invisible
                $('#tblAppendGrid').appendGrid('showColumn', 'Year');
            }

hideColumn(name)

Returns: jQuery

Hide the whole column with specified name.

name:

The column name assigned in columns of Initial Parameters.

Example:

            $(function() {
                // Initialize the grid with data
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    initData: [
                        { Album: 'Album1', Artist: 'Artist1', Year: '2001' },
                        { Album: 'Album2', Artist: 'Artist2', Year: '2003' },
                        { Album: 'Album3', Artist: 'Artist3', Year: '2005' }
                    ]
                });
                // Hide the `Year` column
                $('#tblAppendGrid').appendGrid('hideColumn', 'Year');
            }

isColumnInvisible(name)

Returns: Boolean

Check specified column is invisible or not.

name:

The column name assigned in columns of Initial Parameters.

Example:

            $(function() {
                // Initialize the grid with data
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    initData: [
                        { Album: 'Album1', Artist: 'Artist1', Year: '2001' },
                        { Album: 'Album2', Artist: 'Artist2', Year: '2003' },
                        { Album: 'Album3', Artist: 'Artist3', Year: '2005' }
                    ]
                });
                // Hide the `Year` column
                if ($('#tblAppendGrid').appendGrid('isColumnInvisible', 'Year')) {
                    alert('Year is invisible!');
                } else {
                    alert('Year is visible!');
                }
            }

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:

            $(function() {
                // Initialize the grid with data
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    initRows: 3
                });
                // Check the first row is empty
                if ($('#tblAppendGrid').appendGrid('isRowEmpty', 0)) {
                    alert('The first row is empty!');
                }
            }

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:

            $(function() {
                // Initialize the grid with data
                $('#tblAppendGrid').appendGrid({
                    columns: [
                        { name: 'Album', display: 'Album' },
                        { name: 'Artist', display: 'Artist' },
                        { name: 'Year', display: 'Year' }
                    ],
                    initRows: 3
                });
                // Check the first row is empty
                $('#tblAppendGrid').appendGrid('removeEmptyRows');
            }