KNOWLEDGE BASE
Log In    |    Knowledge Base    |    4D Home
Tech Tip: Image Matrix Data Extraction
PRODUCT: 4D Web 2.0 Pack | VERSION: 11.1 | PLATFORM: Mac & Win
Published On: April 23, 2008
Your current browser may not allow you to download the asset. We recommend Mozilla Firefox or Google Chrome.
Log In

PLEASE NOTE: This Tech Tip applies to 4D Web 2.0 Pack v11 Release 1 (11.1)

The Image Matrix object within the 4D Ajax Framework was designed for the purposes of displaying images alongside live data, but was not necessarily designed for drag-and-drop. This however can be easily resolved by using HTML to create the content of our Image Matrix and then using the innerHTML property when a cell is dropped.

So for example, lets assume we have a Data Grid whose cells have been set to droppable and an Image Matrix whose cells have been set as draggable. We would need to use the following custom code to enable the drag-and-drop between these 2 objects.

1) During creation of the Image Matrix, create custom HTML and specify a class name for the element(s) that will contain the data:

var myContent = '<span class="fieldClassName">[table1]field1</span>';

myDataMatrix = new dataMatrix(targetNode, selectionName, header, imageField, myContent, zoomContents, layout, margin, zoomLevel, scrollMode, forceRows, forceColumns, allowCellMouseInteraction, maxCharNumber, skipQueryOnStart);



2) Use the following code to extract data from the dropped cell, when a cell from the Image Matrix is dropped onto a cell in the Data Grid:

var orginCell = dax_bridge.hover.Draggin.dragObjectSource;
var sourceValue = getElementByClassName(originCell, 'fieldClassName').innerHtml;



For the latest information on the Image Matrix object please see the Daxipedia:

http://daxipedia.4d.com