EnterpriseSheet Customization

Binding custom extra data to the cell

Document -> EnterpriseSheet Customization -> Binding custom extra data

EnterpriseSheet provides a way for customer to bind extra custom data to the sheet. Customer data object can be binded to the cell through custom defined function.

To achieve this, a custom function need to be defined which will be called during binding custom data.


/**
 * This is custom defined function for loading extra data for the custom cell.
 * The returned result is a html page which will be displayed in the popup window
 * during mouse move over.
 * @param {Object} jsonData: the json data in the cell
 * @param {Integer} row: the row index for the cell
 * @param {Integer} column: the column index for the cell
 * @return {String}: the html string to be displayed during mouse move over
 */
function CUSTOM_BINDING_DATA_FN(jsonData, row, column) {
	var html = "Not result found", id = jsonData.id;
	if (jsonData.data.lastIndexOf("Apple") === 0) html = " Apple Inc.
1 Infinite Loop
Cupertino, CA 95014
Id: ' + id + '";
	if (jsonData.data.lastIndexOf("Google") === 0) html = ' Google Inc.
1600 Amphitheatre Parkway
Mountain View, CA 94043
Id: ' + id + '';		
	if (jsonData.data.lastIndexOf("Taylor") === 0) html = ' Tayor Swift
December 13, 1989
West Reading, Pennsylvania, USA
Id: ' + id + '';

    return html;
}

And then include the above defined custom function in the json data which will be consumed by the sheet. Such as: onCustomBindingFn: "CUSTOM_BINDING_DATA_FN"


callbackCellDataBindingJson : {
	fileName: 'Cell data binding',
	sheets: [ {name: 'First', id: 1, color: 'red' } ],
	floatings: [
	   { sheet:1, name:"merge1", ftype:"meg", json:"[2,2,2,6]" },
	],
	cells: [
		{ sheet: 1, row: 9, col: 2, json: {data: "Move mouse over the following name to see more detail information in popup window (binding data from your source)" } }, 
		{ sheet: 1, row: 11, col: 2, json: {data: "Apple Inc.", onCustomBindingFn: "CUSTOM_BINDING_DATA_FN", id:"1000", color: "blue" } }, 
		{ sheet: 1, row: 12, col: 2, json: {data: "Google Inc.", onCustomBindingFn: "CUSTOM_BINDING_DATA_FN", id:"2000", color: "blue" } }, 
		{ sheet: 1, row: 13, col: 2, json: {data: "Taylor Swift", onCustomBindingFn: "CUSTOM_BINDING_DATA_FN", id:"3000", color: "red" } }, 
	]
}

End-user moves over the cell and custom function "CUSTOM_BINDING_DATA_FN" is called with 3 parameters: JsonData object, row index, column index.

CUSTOM_BINDING_DATA_FN return html which will be displayed in the popup window.