Documentation AppendGrid

8/10/2019 Documentation AppendGrid

1/49

Documentation

API Summary

Initial Parameters Column Parameters

caption type

initRows name

initData value

columns display

i18n displayCss

idPrefix headerSpan

rowDragging cellCsshideButtons ctrlAttr

buttonClasses ctrlProp

hideRowNumColumn ctrlCss

rowButtonsInFront ctrlClass

customGridButtons ctrlOptions

customRowButtons invisible

customFooterButtons resizable

nameFormatter uiOption

dataLoaded uiTooltip

afterRowAppended customBuilder

afterRowInserted customGetter

afterRowSwapped customSetter

afterRowDragged onClick

beforeRowRemove onChange

afterRowRemoved

Initial Parameters

caption
http://appendgrid.apphb.com/Documentation#link-captionhttp://appendgrid.apphb.com/Documentation#link-typehttp://appendgrid.apphb.com/Documentation#link-initRowshttp://appendgrid.apphb.com/Documentation#link-namehttp://appendgrid.apphb.com/Documentation#link-namehttp://appendgrid.apphb.com/Documentation#link-initDatahttp://appendgrid.apphb.com/Documentation#link-valuehttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-displayhttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-displayCsshttp://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-headerSpanhttp://appendgrid.apphb.com/Documentation#link-rowDragginghttp://appendgrid.apphb.com/Documentation#link-cellCsshttp://appendgrid.apphb.com/Documentation#link-hideButtonshttp://appendgrid.apphb.com/Documentation#link-ctrlAttrhttp://appendgrid.apphb.com/Documentation#link-buttonClasseshttp://appendgrid.apphb.com/Documentation#link-ctrlProphttp://appendgrid.apphb.com/Documentation#link-hideRowNumColumnhttp://appendgrid.apphb.com/Documentation#link-hideRowNumColumnhttp://appendgrid.apphb.com/Documentation#link-ctrlCsshttp://appendgrid.apphb.com/Documentation#link-rowButtonsInFronthttp://appendgrid.apphb.com/Documentation#link-ctrlClasshttp://appendgrid.apphb.com/Documentation#link-customGridButtonshttp://appendgrid.apphb.com/Documentation#link-ctrlOptionshttp://appendgrid.apphb.com/Documentation#link-customRowButtonshttp://appendgrid.apphb.com/Documentation#link-invisiblehttp://appendgrid.apphb.com/Documentation#link-customFooterButtonshttp://appendgrid.apphb.com/Documentation#link-resizablehttp://appendgrid.apphb.com/Documentation#link-nameFormatterhttp://appendgrid.apphb.com/Documentation#link-uiOptionhttp://appendgrid.apphb.com/Documentation#link-dataLoadedhttp://appendgrid.apphb.com/Documentation#link-uiTooltiphttp://appendgrid.apphb.com/Documentation#link-afterRowAppendedhttp://appendgrid.apphb.com/Documentation#link-customBuilderhttp://appendgrid.apphb.com/Documentation#link-afterRowInsertedhttp://appendgrid.apphb.com/Documentation#link-customGetterhttp://appendgrid.apphb.com/Documentation#link-afterRowSwappedhttp://appendgrid.apphb.com/Documentation#link-customSetterhttp://appendgrid.apphb.com/Documentation#link-afterRowDraggedhttp://appendgrid.apphb.com/Documentation#link-onChangehttp://appendgrid.apphb.com/Documentation#link-beforeRowRemovehttp://appendgrid.apphb.com/Documentation#link-onChangehttp://appendgrid.apphb.com/Documentation#link-afterRowRemovedhttp://appendgrid.apphb.com/Documentation#link-afterRowRemovedhttp://appendgrid.apphb.com/Documentation#link-onChangehttp://appendgrid.apphb.com/Documentation#link-beforeRowRemovehttp://appendgrid.apphb.com/Documentation#link-onChangehttp://appendgrid.apphb.com/Documentation#link-afterRowDraggedhttp://appendgrid.apphb.com/Documentation#link-customSetterhttp://appendgrid.apphb.com/Documentation#link-afterRowSwappedhttp://appendgrid.apphb.com/Documentation#link-customGetterhttp://appendgrid.apphb.com/Documentation#link-afterRowInsertedhttp://appendgrid.apphb.com/Documentation#link-customBuilderhttp://appendgrid.apphb.com/Documentation#link-afterRowAppendedhttp://appendgrid.apphb.com/Documentation#link-uiTooltiphttp://appendgrid.apphb.com/Documentation#link-dataLoadedhttp://appendgrid.apphb.com/Documentation#link-uiOptionhttp://appendgrid.apphb.com/Documentation#link-nameFormatterhttp://appendgrid.apphb.com/Documentation#link-resizablehttp://appendgrid.apphb.com/Documentation#link-customFooterButtonshttp://appendgrid.apphb.com/Documentation#link-invisiblehttp://appendgrid.apphb.com/Documentation#link-customRowButtonshttp://appendgrid.apphb.com/Documentation#link-ctrlOptionshttp://appendgrid.apphb.com/Documentation#link-customGridButtonshttp://appendgrid.apphb.com/Documentation#link-ctrlClasshttp://appendgrid.apphb.com/Documentation#link-rowButtonsInFronthttp://appendgrid.apphb.com/Documentation#link-ctrlCsshttp://appendgrid.apphb.com/Documentation#link-hideRowNumColumnhttp://appendgrid.apphb.com/Documentation#link-ctrlProphttp://appendgrid.apphb.com/Documentation#link-buttonClasseshttp://appendgrid.apphb.com/Documentation#link-ctrlAttrhttp://appendgrid.apphb.com/Documentation#link-hideButtonshttp://appendgrid.apphb.com/Documentation#link-cellCsshttp://appendgrid.apphb.com/Documentation#link-rowDragginghttp://appendgrid.apphb.com/Documentation#link-headerSpanhttp://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-displayCsshttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-displayhttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-valuehttp://appendgrid.apphb.com/Documentation#link-initDatahttp://appendgrid.apphb.com/Documentation#link-namehttp://appendgrid.apphb.com/Documentation#link-initRowshttp://appendgrid.apphb.com/Documentation#link-typehttp://appendgrid.apphb.com/Documentation#link-caption


2/49

Type:StringDefault:null

The text as table caption. Set null to disable caption generation.

initRows

Type:NumberDefault:3

The total number of empty rows generated when init the grid. This will beignored ifinitData is assigned.

initData

Type:ArrayDefault:null

An array of data to be filled after initialized the grid.

Example:

?

1

234

5

67

8

9

$(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'}
http://appendgrid.apphb.com/Documentation#link-initDatahttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation#link-initData


3/49

10

11

1213

14

]});

});

columns


Array of column options. Please refer toColumn Parameters for more.

Example:

?

1

2

3

45

6

78

9


columns: [

{ name: 'Album', type: 'text', display: 'Album', ctrlAttr: { maxlength: { name: 'Artist', type: 'select', display: 'Artist', ctrlOptions: { 0: { name: 'Year', type: 'ui-spinner', display: 'Year', value: newDate(). ]

});});

i18n

Type:ObjectDefault:null

Labels or messages used in grid.
http://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation#link-top


4/49

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, ifrowDraggingis setto true.

rowEmpty: The message to be displayed when no rows in grid.

Example:

?

12

3

456

7

8

910

11

1213



],i18n: {

append: 'Hey! Append a new row at bottom!',removeLast: 'Caution! Remove the last row!'

}});});
http://appendgrid.apphb.com/Documentation#link-rowDragginghttp://appendgrid.apphb.com/Documentation#link-rowDragginghttp://appendgrid.apphb.com/Documentation#link-rowDragginghttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation#link-rowDragging


5/49

idPrefix


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

Example:

?

1234

5

67

8

910

11



],idPrefix: 'HelloTable'

});// The field id and name will be generated as `HelloTable_Album_1`.

});

rowDragging

Type:BooleanDefault:false

Applying jQuery UI Sortable feature to allow re-order grid rows bydragging.

hideButtons
http://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation


6/49


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

23

4

5

67

8

9

1011

12

1314



],hideButtons: {

remove: true,removeLast: true

}// Remove buttons will not be displayed

});});


7/49

buttonClasses


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

moveUp: The extra class name to be added on the `move up` button at the end on eachrow.

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,ifrowDraggingis set to true.

Example:

?

1

2

34

5

6



],buttonClasses: {
http://appendgrid.apphb.com/Documentation#link-rowDragginghttp://appendgrid.apphb.com/Documentation#link-rowDragginghttp://appendgrid.apphb.com/Documentation#link-rowDragginghttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation#link-rowDragging


8/49

7

8

910

11

1213

insert: 'extra1 extra2',moveUp: 'extra3'

}});

});

hideRowNumColumn


Hide the row number column which is the first column of grid.

rowButtonsInFront


Generate row button column in the front of input columns.

customGridButtons


Customize the standard grid button such as changing the icon, adding textto the button or even use another button to replace the default one. You


9/49

can specify jQuery UI Button initial parameter, a DOM element or afunction 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 thatcreate 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 thatcreate 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 thatcreate a DOM element as the `move down` button at the end on each row.

Example:

?

12

3

4

56

789

10

11

1213

14



],

customGridButtons: {// Use jQuery UI Button initial parameterappend: { icons: { primary: 'ui-icon-star'}, text: tr

// Use a DOM elementinsert: $('

').text('Insert').get(0), // Use a function that create DOM elementmoveUp: function(){

varbutton = document.createElement('input');button.type = 'button';


10/49

15

16

1718

19

202122

23

24

button.value = '^^^';returnbutton;

}}

});});

customRowButtons


Add an array of customized buttons to the last cell of each row. Thegenerated buttons are supported all jQuery UI Button widget parameterswith 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.


11/49

Example:

?

12

3

4

56

7

8

910

11

1213

14

1516

17

1819

20

21



],customRowButtons: [

{ uiButton: { icons: { primary: 'ui-icon-star'}, text: false}, click:true},

{ uiButton: { icons: { primary: 'ui-icon-print'}, label: 'Print'}, clbtnClass: 'print'}

]});});functionsetFavorite(evtObj, uniqueIndex, rowData) {

alert('I know you love this album now :)');// Check the caller button exist in event objectif(evtObj && evtObj.target) {

// Do something on the button, such as disable the button$(evtObj.target).button('disable');

}}

customFooterButtons


Add an array of customized buttons to the bottom of grid. The generated

buttons are supported all jQuery UI Button widget parameters with a clickevent handler.

uiButton: Required. Object of parameters used to initial jQuery UI Button widget.


12/49

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

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

45

678

9

1011

12

13



],customFooterButtons: [{ uiButton: { icons: { primary: 'ui-icon-refresh'}, label: 'Refresh'}

button!'); }, atTheFront: true},{ uiButton: { icons: { primary: 'ui-icon-arrowthickstop-1-s'}, text:

process...'); } }]

});});

nameFormatter(idPrefix, name, uniqueIndex)

Type:Function

The callback function for format the HTML name of generated controls.


13/49

idPrefix: TheidPrefixdefined inInitial Parameters.

name: The name of column.

uniqueIndex: The unique index assigned to this row.

Example:

?

1

23

4

56

7

89

10

11

1213

14

1516

17

18

1920

21

22

2324

2526



],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://// // // //// C#/ASP.NET// string[] albums = Request.Form.GetValues("Album");//// PHP// $albums = $_POST['Album'];//returnname;

}});

});

dataLoaded(caller)
http://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-idPrefix


14/49

Type:Function

The callback function to be triggered after data loaded to grid.

caller: The table object that triggered this event.

afterRowAppended(caller, parentRowIndex, addedRowIndex)

Type:Function

The callback function to be triggered after new row appended.


parentRowIndex: The index of row that above new added rows. This value will be nullwhen table is empty.

addedRowIndex: An array of row index added.

Example:

?

1

2

345

6

78

9

10



],afterRowAppended: function(caller, parentRowIndex, addedRowIndex) {

// Copy data of `Year` from parent row to new added rowsvarparentValue = $(caller).appendGrid('getCtrlValue', 'Year', par

for(varz = 0; z < addedRowIndex.length; z++) {$(caller).appendGrid('setCtrlValue', 'Year', addedRowIndex[z]


15/49

11

12

1314

15

16

}}

});});

afterRowInserted(caller, parentRowIndex, addedRowIndex)

Type:Function

The callback function to be triggered after new row inserted.


parentRowIndex: The index of row that above new added rows. This value will be nullwhen 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.


oldRowIndex: The old row index of swapped row.


16/49

newRowIndex: The new row index of swapped row.

afterRowDragged(caller, rowIndex, uniqueIndex)

Type:Function

The callback function to be triggered after grid row dragged.


rowIndex: The row 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.


rowIndex: The row index to be removed.

Example:

?


17/49

1

2

34

5

678

9

1011

12


columns: [{ name: 'Album', display: 'Album'},{ name: 'Artist', display: 'Artist'},

{ name: 'Year', display: 'Year'}],beforeRowRemove: function(caller, rowIndex) {

returnconfirm('Are you sure to remove this row?');}

});});

afterRowRemoved(caller, rowIndex)

Type:Function

The callback function to be triggered after grid row removed.


rowIndex: The row index of removed row. This value will be null when removed the last

row in grid.

Example:

?

1

234

5

6

78

9

$(function() {

$('#tblAppendGrid').appendGrid({ columns: [

{ name: 'Album', display: 'Album'},{ name: 'Artist', display: 'Artist'},{ name: 'Year', display: 'Year'}

],afterRowRemoved: function(caller, rowIndex) {

// Do something}

});


18/49

10

11

12

});

Column Parameters

type

Type:StringDefault:'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 inctrlOptions.

checkbox: Generate a checkbox control.

color: Generate a HTML5 color control. A normal text control will be generatedwhen browser not supported.

date: Generate a HTML5 date control. A normal text control will be generatedwhen 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 begenerated when browser not supported.

email: Generate a HTML5 email control. A normal text control will begenerated when browser not supported.
http://appendgrid.apphb.com/Documentation#link-ctrlOptionshttp://appendgrid.apphb.com/Documentation#link-ctrlOptionshttp://appendgrid.apphb.com/Documentation#link-ctrlOptionshttp://appendgrid.apphb.com/Documentation#link-ctrlOptions


19/49

number: Generate a HTML5 number control. A normal text control will begenerated 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 begenerated 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 generatedwhen browser not supported.

eek: Generate a HTML5 week control. A normal text control will be generatedwhen 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 applicationlogic 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.

custom: Generate a custom input field.ThecustomBuilder,customGetterandcustomSettercallback functionmust be defined for custom control type.
http://appendgrid.apphb.com/Documentation#link-customBuilderhttp://appendgrid.apphb.com/Documentation#link-customBuilderhttp://appendgrid.apphb.com/Documentation#link-customBuilderhttp://appendgrid.apphb.com/Documentation#link-customGetterhttp://appendgrid.apphb.com/Documentation#link-customGetterhttp://appendgrid.apphb.com/Documentation#link-customGetterhttp://appendgrid.apphb.com/Documentation#link-customSetterhttp://appendgrid.apphb.com/Documentation#link-customSetterhttp://appendgrid.apphb.com/Documentation#link-customSetterhttp://appendgrid.apphb.com/Documentation#link-customSetterhttp://appendgrid.apphb.com/Documentation#link-customGetterhttp://appendgrid.apphb.com/Documentation#link-customBuilder


20/49

name


The name of control generated. This value must be unique acrossthecolumns array.

value

Type:String, Number, Boolean, Object or ArrayDefault:null

The default value of control. The data type is variance due to different typeof the control.

display


The display label shown at the top of each column.

displayCss

http://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-columns


21/49

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

Example:

?

1

23

4

5

67

89


columns: [{ name: 'Album', display: 'Album', displayCss: { 'font-weight': 'bo{ name: 'Artist', display: 'Artist'},{ name: 'Year', display: 'Year'}

]});

});

headerSpan

Type:Integer

Default:null

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

Example:

?

1

23

4

56

7

8

9

$(function() {

$('#tblAppendGrid').appendGrid({ columns: [{ name: 'Album', display: 'Album'},{ name: 'Artist', display: 'Artist'},// The header cells of `DurationMinute` and `DurationSecond` will

// as `headerSpan` value of `DurationHour` is assigned to 3.{ name: 'DurationHour', display: 'Duration', headerSpan: 3, ctrlA{ name: 'DurationMinute', ctrlAttr: { maxlength: 2 }, value: 0 },{ name: 'DurationSecond', ctrlAttr: { maxlength: 2 }, value: 0 },{ name: 'Year', display: 'Year'}
http://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation


22/49

10

11

1213

14

]});

});

cellCss


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

Example:

?

1

2

34

5

67

8

9


columns: [{ name: 'Album', display: 'Album', cellCss: { 'background-color':

{ name: 'Artist', display: 'Artist'},{ name: 'Year', display: 'Year'}

]});

});

ctrlAttr



23/49


24/49

9

10

});

ctrlCss


The extra CSS style settings to be applied on the generated control. Thissetting will not be applied on `custom` control type.

Example:

?

1

2

34

5

67

8

9


columns: [{ name: 'Album', display: 'Album', ctrlCss: { 'text-align': 'center

{ name: 'Artist', display: 'Artist'},

{ name: 'Year', display: 'Year'}]});

});

ctrlClass


The extra CSS class to be added on the generated control. This setting willnot be applied on `custom` control type.


25/49

Example:

?

12

3

4

56

7

8

9


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 StringDefault:null

The available options for `select` type control.

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

Example:

?

1$(function() {

$('#tblAppendGrid').appendGrid({


26/49

2

3

45

6

789

10

columns: [{ name: 'Album', display: 'Album'},{ name: 'Artist', display: 'Artist', type: 'select', ctrlOptions: { name: 'Year', display: 'Year', type: 'select', ctrlOptions: ['2{ name: 'Origin', display: 'Origin', type: 'select', ctrlOptions:

]});

});

invisible


Hide current column after initialization or not.

Example:

?

1

2

34

5

67

8

9


columns: [{ name: 'Album', display: 'Album'},{ name: 'Artist', display: 'Artist'},{ name: 'Year', display: 'Year', invisible: true}

]});

});

resizable



27/49

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

Example:

?

1

23

4

5

67

89


columns: [{ name: 'Album', display: 'Album'},{ name: 'Artist', display: 'Artist', resizable: true, ctrlCss: { wi

{ name: 'Year', display: 'Year'}]

});});

uiOption

Type:Object

Default:null

The initial parameters for jQuery UI widgets. Please check thejQuery UIAPI for more.

Example:

?

1

23

4

56

7

8


columns: [{ name: 'Album', display: 'Album'},{ name: 'Artist', display: 'Artist'},{ name: 'Year', display: 'Year', type: 'ui-spinner', uiOption: { min: { name: 'Origin', display: 'Origin', type: 'ui-autocomplete', uiOption

]});
http://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://api.jqueryui.com/http://api.jqueryui.com/http://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://api.jqueryui.com/http://api.jqueryui.com/http://appendgrid.apphb.com/Documentation


28/49

9

10

});

uiTooltip


The initial parameters for jQuery UI tooltip. Please check thejQuery UIAPI for more.

Example:

?

1

2

34

5

67

8

9


columns: [{ name: 'Album', display: 'Album'},{ name: 'Artist', display: 'Artist', ctrlAttr: { title: 'Please fil

{ name: 'Year', display: 'Year'}]});

});

customBuilder(parent, idPrefix, name, uniqueIndex)

Type:FunctionDefault:null

The callback function to build a custom control. It is mandatory for `type`defined as `custom`.
http://api.jqueryui.com/http://api.jqueryui.com/http://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://api.jqueryui.com/http://api.jqueryui.com/


29/49

parent: The parent control which is a table cell that holds this custom control.




Example:

?

1

23

4

56

7

8

910

111213

14

15

1617

18

1920

21

222324

25

2627

28

29


columns: [{ name: 'Album', display: 'Album'},{ name: 'Artist', display: 'Artist', ctrlAttr: { title: 'Please fill i{ name: 'Year', display: 'Year'},{ name: 'Duration', display: 'Total Duration', type: 'custom', value:

customBuilder: function(parent, idPrefix, name, uniqueIndex) {// Prepare the control ID/name by using idPrefix, column name

varctrlId = idPrefix + '_'+ name + '_'+ uniqueIndex;// Create a span as a containervarctrl = document.createElement('span');

// Set the ID and name to container and append it to parent co$(ctrl).attr({ id: ctrlId, name: ctrlId }).appendTo(parent);// Create extra controls and add to container$('', { type: 'text', maxLength: 1, id: ctrlId + '_Hou

$('', { type: 'text', maxLength: 2, id: ctrlId + '_Min $('', { type: 'text', maxLength: 2, id: ctrlId + '_Sec // Finally, return the container control

returnctrl;},customGetter: function(idPrefix, name, uniqueIndex) {

// Prepare the control ID/name by using idPrefix, column name varctrlId = idPrefix + '_'+ name + '_'+ uniqueIndex;

// Get the value of spinnersvarhour = $('#'+ ctrlId + '_Hour').spinner('value');varminute = $('#'+ ctrlId + '_Minute').spinner('value');varsecond = $('#'+ ctrlId + '_Second').spinner('value');// Return the formatted durationreturnhour + ':'+ (minute < 10 ? '0'+ minute : minute) + ':'

},customSetter: function(idPrefix, name, uniqueIndex, value) {

// Prepare the control ID/name by using idPrefix, column name varctrlId = idPrefix + '_'+ name + '_'+ uniqueIndex;

// Check the input value and split it to array if valid
http://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-idPrefix


30/49

30

31

3233

34

353637

38

3940

41

42

4344

45

4647

48

varsep = null;if(value != null&& -1 != value.search(/^[0-9]:[0-9]{1,2}:[0-9

sep = value.split(':');}// Set the value to different spinners$('#'+ ctrlId + '_Hour').spinner('value', sep == null? 0 : se

$('#'+ ctrlId + '_Minute').spinner('value', sep == null? 0 : $('#'+ ctrlId + '_Second').spinner('value', sep == null? 0 : }

}]

});});

customGetter(idPrefix, name, uniqueIndex)

Type:Function

Default:null

The callback function to get the value of this custom control. It ismandatory for `type` defined as `custom`. Check the exampleofcustomBuilder for more.



http://appendgrid.apphb.com/Documentation#link-customBuilderhttp://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-customBuilder


31/49

customSetter(idPrefix, name, uniqueIndex, value)


The callback function to get the value of this custom control. It ismandatory for `type` defined as `custom`. Check the exampleofcustomBuilder for more.




value: The value to be assigned to this custom control.

onClick(evt, rowIndex)


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:
http://appendgrid.apphb.com/Documentation#link-customBuilderhttp://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-idPrefixhttp://appendgrid.apphb.com/Documentation#link-customBuilder


32/49

?

1

23

4

5

67

8

910

11

12

13


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)


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:

?

12

3


columns: [{ name: 'Album', display: 'Album',


33/49

4

5

67

8

91011

12

13

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 isinitialized as appengGridor not.

Example:

?

12

3

45

$(function() {if($('#tblAppendGrid').appendGrid('isReady')) {

// Do something}

});

isDataLoaded()

Returns:Boolean


34/49

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

Example:

?

1

23

4

5

$(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:

?

12

345

6

7

89

10



]});$('#tblAppendGrid').appendGrid('load', [



35/49

11

12

1314

]);}

appendRow(numOfRow)

Returns:jQuery

Append specified number of row or row data to the end of first element inthe set of matched elements.

numOfRowOrRowArray: The number of rows or row data to be appended. Default is 1.

Example:

?

12

3

4

56

7

89

10

$(function() {// Appending 2 empty rows.$('#tblAppendGrid').appendGrid('appendRow', 2);// Appending 3 rows with data.$('#tblAppendGrid').appendGrid('appendRow', [


]);});

insertRow(numOfRowOrRowArray, rowIndex)

Returns:jQuery


36/49

Insert specified number of row or row data above the specified rowIndexof 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:

?

12

34

5

67

8

9

$(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 matchedelements.

rowIndex: The row index of the new row to be inserted.

Example:


37/49

?

1

23

4

$(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 matchedelements.

rowIndex: The row index of the row to be moved up.

Example:

?

1

2

3

4

$(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 matchedelements.


38/49


39/49

Get the unique index by row index. Clickhere for more information about`uniqueIndex`.

rowIndex: The row index of target row.

Example:

?

1

2

3

4

$(function() {varuniqueIndex = $('#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. Clickhere for more information about`uniqueIndex`.

uniqueIndex: The unique index of target row.

Example:

?

12

3

4

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

});
http://appendgrid.apphb.com/Documentation/UniqueIndexhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation/UniqueIndexhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation/UniqueIndexhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation/UniqueIndex


40/49

getRowValue(rowIndex)

Returns:Object

Get all control values of specified row index first element in the set ofmatched elements.

rowIndex: The row index of the data to be retrieved from.

Example:

?

1

23

4

56

7

8

910

11

1213

14

15

1617

18

192021

$(function() {// Initialize the grid with data$('#tblAppendGrid').appendGrid({


],initData: [


]});// Get data of row 2vardata = $('#tblAppendGrid').appendGrid('getRowValue', 1);// Get the Album from data objectalert('Album of second row is '+ data.Album);

// Get the Artist in another wayalert('Artist of second row is '+ data['Artist']);

}


41/49

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 returnas object.

Example:

?

1

2

34

5

67

8

9

1011

12

1314

15

1617

18

19

202122

23

2425

26

27



],initData: [


]});// Example 1: Get all data as arrayvardata = $('#tblAppendGrid').appendGrid('getAllValue');// Get the Album of row 1alert('Album of first row is '+ data[0].Album);// Get the Artist of row 2alert('Artist of second row is '+ data[1]['Artist']);// Example 2: Get all data as objectvardata = $('#tblAppendGrid').appendGrid('getAllValue', true);// Get the Album of row 1alert('Album of first row is '+ data.Album_0);// Get the Artist of row 2alert('Artist of second row is '+ data['Artist_1']);// Get the total row countvarcount = data['_RowCount'];alert('Total '+ count + ' row(s) in object');

}


42/49

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 inthe set of matched elements. The return type is based on the generatedcontrol type.

name: The column name assigned incolumnsofInitial Parameters.

rowIndex: The row index of the data to be retrieved from.

Example:

?

1

23

4

56

7

8

910

11

1213

14

1516



],initData: [


]});// Get the value of Album of second row (rowIndex=1)varvalue = $('#tblAppendGrid').appendGrid('getCtrlValue', 'Album', 1);alert('Album of second row is '+ value);

}
http://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-columns


43/49


44/49


45/49

19

getCellCtrlByUniqueIndex(name, uniqueIndex)

Returns:DOM Element

Get the control (DOM element) generated by specified column name andunique index. This function will return the same result asgetCellCtrl.


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 matchedelements. Clickhere for more information about `uniqueIndex`.

Example:

?

1

2

34

5

6

7



],initData: [
http://appendgrid.apphb.com/Documentation#link-getCellCtrlhttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation/UniqueIndexhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation/UniqueIndexhttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-getCellCtrl


46/49

8

9

1011

12

131415

16

1718

19

20


]});// Get the rowOrdervarrowOrder = $('#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 matchedelements. Please notice that changing the returned array items will notaffect initialized `appendGrid`.

showColumn(name)

Returns:jQuery

Show the whole column with specified name.


Example:
http://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-columns


47/49

?

1

23

4

5

67

8

910

11

12

1314

151617

$(function() {

// Initialize the grid with data$('#tblAppendGrid').appendGrid({ columns: [

{ name: 'Album', display: 'Album'},{ name: 'Artist', display: 'Artist'},{ name: 'Year', display: 'Year', invisible: true}

],initData: [


]});// Show the `Year` column which is invisible

$('#tblAppendGrid').appendGrid('showColumn', 'Year');}

hideColumn(name)

Returns:jQuery

Hide the whole column with specified name.


Example:

?

1

23

4

5


columns: [{ name: 'Album', display: 'Album'},{ name: 'Artist', display: 'Artist'},
http://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation


48/49

6

7

89

10

111213

14

1516

17

{ name: 'Year', display: 'Year'}],initData: [


]});// Hide the `Year` column$('#tblAppendGrid').appendGrid('hideColumn', 'Year');

}

isColumnInvisible(name)

Returns:Boolean

Check specified column is invisible or not.


Example:

?

12

3

4

56

7

89

10

1112


columns: [{ name: 'Album', display: 'Album'},

{ name: 'Artist', display: 'Artist'},{ name: 'Year', display: 'Year'}],initData: [


]});// Hide the `Year` column
http://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-columnshttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentationhttp://appendgrid.apphb.com/Documentation#link-tophttp://appendgrid.apphb.com/Documentation#link-columns


49/49

13

14

1516

17

181920

21

if($('#tblAppendGrid').appendGrid('isColumnInvisible', 'Year')) {alert('Year is invisible!');

} else{alert('Year is visible!');

}}

Documentation AppendGrid

Documents

Transcript of Documentation AppendGrid