com.judah.controls
class dndDataGrid
mx.updatedcontrols.DataGrid
|
+--com.judah.controls.dndDataGrid
class dndDataGrid extends DataGrid
Drag and drop DataGrid class
Extended and enhanced DataGrid component based off the Macromedia DataGrid. It follows the same model as the Macromedia DataGrid and can follow the same examples. The dndDataGrid inherits all the public properties and methods of the classes it inherits including all the properties and methods of the MovieClip > UIObject class > UIComponent class > View > ScrollView > ScrollSelectList > SelectableRow > List component > List classes chain. To begin, study the List class documentation, DataGrid class documentation and the properties and methods it inherits. Note: Some of the see also links do not lead to anywhere because they are to properties or methods in inherited classes. You can find more information about them in the Flash Help Panel.
- Example:This example shows two different methods on how to fill the datagrid with data.
// load data into datagrid function loadData() { // method 1 var arr:Array = new Array(); arr.push({label:"File 1",data:"file"}); arr.push({label:"File 2",data:"file"}); arr.push({label:"File 3",data:"file"}); theDataGrid.dataProvider = arr; // method 2 theDataGrid.addItem({label:"Folder 1",data:"folder"}); theDataGrid.addItem({label:"Folder 2",data:"folder"}); theDataGrid.addItem({label:"File 1",data:"file"}); theDataGrid.addItem({label:"File 2",data:"file"}); theDataGrid.addItem({label:"File 3",data:"file"}); } loadData()
Field Summary
Add Branch constant
Add Item constant
public addBranchItem_Event
Event generated when a branch item is added
Position to add new branch items.
Event generated when an item is added from the context menu
Position to add new items
Enable drag and drop on empty rows
Enables drag and drop of onto the same row
Class name of the component class
time in milliseconds to separate doubleclick from a delayed click
Reference to the ContextMenu
Copy Item constant
Copy icon shown when dragging
public copyItem_Event
Event generated when a item is copied
Cut Item constant
public cutItem_Event
Event generated when a item is cut
Default branch item to use when adding a new datagrid item
Default item to use when adding a new datagrid item
public delayedClick_Event
Event generated when a row is delayed clicked
Enables or disables drag and drop
The height in pixels of the gutter space inbetween datagrid items
Enables all move operations to be copy operations
Do not insert a row on drop
public doubleClick_Event
Event generated when a row is double clicked
Reference to movieclip when dragging and dropping rows
Creates an exact duplicate of only the cell you pressed you are dragging
Creates an exact duplicate of the row you are dragging.
Transparency amount of the highlight rectangle when dragging
Start dragging when you mouse moves outside of the row
Contains current or last position of dragged item
The default row style of the rows in the drag mc
Drop Event constant
Enables or disables editable cells in the datagrid
Enable branch menu item
Enables or disables the datagrid
Draws a drag line over rows
Determines if keypresses in the datagrid find and select rows
Determines if an item can be renamed
Error message variable
public headerBorderColors
Defines the header border colors
public headerFillColors
Header colors for header background
public headerPressColor
Header press color
public headerRollOverColor
Header roll over color
Method to manually handle different key presses
Index of the last moved item
Indices of the last moved datagrid items
Reference to the last item moved
Reference to an array of the last moved datagrid items
Parent item of the last moved item
Parent datagrid items of the last moved datagrid items
Owner of the last moved item
Reference to array of the owners of the last moved datagrid items
Absolute index of the row the mouse was last over
Relative index of the row the mouse was last over
public menu
Reference to the ContextMenu.
Menu Event constant
Method Call constant
Number of pixels the mouse must move before we start dragging
Enables mutiple selection of rows
public onDrop_Event
Event generated after a drag and drop
public onRowDrag_Event
Event generated once when a row is first dragged
Paste After constant
Paste Before constant
Paste Into constant
public pasteItem_Event
Event generated after pasteItem method is called
public pressedCellIndex
Indicates the last pressed cell index
Remove Item constant
public removeItem_Event
Event generated when a item is removed
Rename Item constant
public renameColumnIndex
Specifies the index of the column to edit when renaming
Name of rename label to access when using a cellrenderer
public renameItem_Event
Event generated when a item is renamed
Determines if an item can be renamed on double click
Indicates set of characters user may enter into the rename text field.
Reference to the root movieclip
Scroll drag speed in milliseconds
Shows debug information
public singleClick_Event
Event generated when a row is single clicked
Context Menu Item Add Leaf string. Deprecated
Id of icon to show when copying an item
Context Menu Item Copy string. Deprecated
Context Menu Item Cut string. Deprecated
Id of icon when dragging is not permitted
Context Menu Item Paste After string. Deprecated
Context Menu Item Paste Before string. Deprecated
Context Menu Item Paste Into string. Deprecated
Context Menu Item Remove string. Deprecated
public strRenameItem
Context Menu Item Rename string. Deprecated
The name of the ActionScript class
The fully qualified class name
Reference to the target item after drag and drop
Reference to array of datagrid items created on cut or copy events
Reference to array of list items created from cut or copy events
Reference to array of items converted to tree nodes on cut or copy events
The item where datagrid items were pasted into
Relative index where the datagrid items were pasted
Track debug messages in errorMsg variable
Reference to a movieclip to use as a trashcan. Deprecated
Current version number for this component
Displays or hides the datagrid
Property Summary
Sets the X coordinate for the copy icon
Gets the X coordinate for the copy icon
Sets the Y coordinate for the copy icon
Gets the Y coordinate for the copy icon
getterEnables or disables the right-click context menu
Method Summary
public convertToItem (
theItem
)
Converts single datagrid item into a list item
public convertToNode (
theItem
)
Converts single datagrid item into a tree node
public copyItem (
theItems, eventSource
)
A function to copy datagrid items from the datagrid
public cutItem (
theItems, eventSource, eventType
)
A function to cut items from the datagrid
Draws the header background
public drawSeparator (
objPoint, row, dragOverPos, bCanDrop
)
Draws separator line when dragging
public dropItem (
theSourceItem, theTargetItem, pastePosition, moveItem, eventSource, eventConstant, cellIndex
)
Method used to insert or move items when dropped into the datagrid
public getIsBranch (
item
)
Method to determine if the item is a branch
public getIsOpen (
theItem
)
Method to check if item is open.
Gets the value of the cell by item and cell index
public getItemIcon (
theItem, subIcon
)
Gets the icon id of the item
public getItemIndex (
theItem
)
Method to get the index of the item in datagrid
public getItemLabel (
theItem, subLabel
)
Gets the label of the item
public getRoot (
mc
)
Finds root movieclip and returns a reference to it
Draws the header in the pressed state and moves the cell
Turns off the header overlay roll over color
Draws the header overlay with color
public iconFunction (
item, columnName
)
Method to dynamically set the icon of the row
public labelFunction (
item
)
Method to manually set the text of the column label
public modifyDragMC (
drag_mc
)
Modifies the drag movieclip before dragging
public onAddBranchItemMenu (
obj, menuItem
)
A function called when user selects "add branch item" from the context menu
public onAddLeafItemMenu (
obj, menuItem
)
A function called when user selects "add item" from the context menu
public onContextMenuSelect (
)
User customizable function for manipulating the context menu
public onCopyItemMenu (
obj, menuItem
)
A function called when user selects "copy item" from the context menu
public onCutItemMenu (
obj, menuItem
)
A function called when user selects "cut item" from the context menu
public onPasteAfterItemMenu (
obj, menuItem
)
A function called when user selects "paste after" from the context menu
public onPasteBeforeItemMenu (
obj, menuItem
)
A function called when user selects "paste before" from the context menu
public onPasteIntoItemMenu (
obj, menuItem
)
A function called when user selects "paste into" from the context menu
public onRemoveItemMenu (
obj, menuItem
)
A function called when user selects "remove item" from the context menu
public pasteItem (
theSourceItem, theTargetItem, pastePosition, moveItem, eventSource, eventConstant, cellIndex
)
Method to insert or move datagrid items
public permitContextMenu (
theItem, theAction, theMenuItem, theContextMenu, theCellIndex
)
A user defined function to display context menu items
public permitDropFunction (
theItem, theTargetItem, theAction, theCellIndex
)
A user defined function to allow or prevent drop
public permitRemove (
obj, menuItem, menuCaption, eventType, cellIndex
)
A user defined function to allow a user to cut or remove an item
public permitRename (
theItem, cellIndex, eventSource
)
A user defined function to allow rename on a item
public removeClipboardItems (
)
Removes items from copy and paste clipboard for this component
public renameFunction (
rowIndex, cellIndex, eventSource
)
Lets the user override the normal rename method
public setItemLabel (
theItem: Object, labelText: String, originalText: String, cellIndex: Number
): String
A method to call to set the item label
Shows renaming textfield over row cell
public validateItemLabel (
newText: String, renameTextField: TextField, cellIndex: Number
): Boolean
Validates renamed item labels
Field Documentation
ADD_BRANCH
public var ADD_BRANCH: Number
Add Branch constant
Add Branch constant. This is used in copy and paste type operations throughout the dndDataGrid methods. Value is 6.
- Usage:trace(myInstance.ADD_BRANCH);
- Example:The example pastes an item after the selectedItem and generates an onAddBranchItem event.
var newItem = {label:"New Added Item",data:"10"}; theDataGrid.pasteItem(newItem, theDataGrid.selectedItem, theDataGrid.PASTE_AFTER, false, theDataGrid.METHOD_CALL, theDataGrid.ADD_BRANCH);
ADD_ITEM
public var ADD_ITEM: Number
Add Item constant
Add Item constant. This is used in copy and paste type operations throughout the dndDataGrid methods. Value is 5. This is mostly for internal use.
- Usage:trace(myInstance.ADD_ITEM);
- Example:The example pastes an item after the selectedItem and generates an onAddItem event.
var newItem = {label:"New Added Item",data:"10"}; theDataGrid.pasteItem(newItem, theDataGrid.selectedItem, theDataGrid.PASTE_AFTER, false, theDataGrid.METHOD_CALL, theDataGrid.ADD_ITEM);
addBranchItem_Event
public var addBranchItem_Event
Event generated when a branch item is added
Event generated when a branch item is added from the context menu. This event is generated from the pasteItem method. See pasteItem event for more information.
- Example:The example below adds a listener to the addBranchItem event.
// include delegation class import mx.utils.Delegate; // Add Branch Item event function function addBranchItemEvent(evt) { // see pasteItem_Event for event property list } // we add a function that "listens" for the add event. When an addBranchItem event is generated this function is called. theDataGrid.addEventListener("addBranchItem", Delegate.create(this, addBranchItemEvent)); - See also:
addBranchPastePosition
public var addBranchPastePosition: Number
Position to add new branch items.
Number. Indicates position to add new branch items when calling "Add Branch Item" from the context menu. The choices are dndDataGrid.PASTE_INTO, dndDataGrid.PASTE_AFTER and dndDataGrid.PASTE_BEFORE. By default all added items are added after the selected item or at the end of the datagrid if no item is selected. The enableBranchMenuItem must be enabled to see the "Add Branch Item" menu item.
- Usage:myInstance.addBranchPastePosition = myInstance.PASTE_AFTER
- Example:This code causes added branch datagrid items to be inserted after the target item.
theDataGrid.addBranchPastePosition = theDataGrid.PASTE_AFTER;
- See also:
addItem_Event
var addItem_Event
Event generated when an item is added from the context menu
Event generated when an item is added from the context menu. This event is generated from the pasteItem method. See pasteItem event for more information.
- Example:The example below adds a listener to the addItem event.
// include delegation class import mx.utils.Delegate; // Add Item event function function addItemEvent(evt) { // see pasteItem_Event for event property list } // we add a function that "listens" for the add event. When an addItem event is generated this function is called. theDataGrid.addEventListener("addItem", Delegate.create(this, addItemEvent)); - See also:
addItemPastePosition
public var addItemPastePosition: Number
Position to add new items
Number. Indicates position to add new items when calling "Add Item" from the context menu. The choices are dndDataGrid.PASTE_INTO, dndDataGrid.PASTE_AFTER and dndDataGrid.PASTE_BEFORE. By default all added items are added after the selected item or at the end of the datagrid if no item is selected.
- Usage:myInstance.addItemPastePosition = myInstance.PASTE_AFTER;
- Example:This code causes added datagrid items to be inserted before the selected item.
theDataGrid.addItemPastePosition = theDataGrid.PASTE_BEFORE;
canDropOnEmptyRows
public var canDropOnEmptyRows: Boolean
Enable drag and drop on empty rows
Boolean. Enables drag and drop onto empty rows. Empty rows are the rows that appear beneath the last occupied item in the datagrid. The default value of canDropOnEmptyRows is true. This property can be set through the Component Panel by changing "Can Drop on Empty Rows" parameter value.
- Usage:myInstance.canDropOnEmptyRows = true;
- Example:The example below enables drag and drop on empty rows.
theDataGrid.canDropOnEmptyRows = true;
canDropOnSameRow
public var canDropOnSameRow: Boolean
Enables drag and drop of onto the same row
Boolean. Enables drag and drop onto the same row. Both the dragCell and dragDuplicateRow property must be set to true for this. This allows you to drag a cell to any other cell on the grid, regardless if it is on the same row or not. Nothing is inserted or moved when you drag and drop with this property enabled. Instead you listen to the onDrop event and use what you dragged and where you dropped and then you can handle what you want to do from there.
- Usage:myInstance.canDropOnSameRow = true;
- Example:The example below enables drag and drop of cells onto other cells including cells in the same row.
theDataGrid.dragCell = true; theDataGrid.dragDuplicateRow = true; theDataGrid.canDropOnSameRow = true;
className
public var className: String
Class name of the component class
The name of the component class. This does not include the package name and has no corresponding setting in the Flash development environment. You can use the value of this variable when setting style properties.
clickThreshold
public var clickThreshold: Number
time in milliseconds to separate doubleclick from a delayed click
cm
public var cm: ContextMenu
Reference to the ContextMenu
ContextMenu; Reference to ContextMenu. You can add or remove the default context menu items easily. You can also show or hide the context menu items dynamically by using the permitContextMenu function.
The contextMenu in the datagrid has an additional method called, "find(caption:String)" that returns the item by matching the item's caption. Each customItem in the customItems array have an additional "action" property that contains one of the dndDataGrid contants, PASTE_INTO, PASTER_AFTER, etc. useful for internal dndDataGrid methods and possibly for your own use. Each item also has a owner property which refers to the datagrid. You must add this property to your own custom menu items when your datagrid is nested in a movieclip.
Do not over write this context menu. It has been enabled to show up from within nested movieclips. If you need to change the menu choices then add or remove items from this existing menu. Examples adding, removing, showing and hiding menu items have been created for you in the examples folder. Please refer to the ContextMenu class documented in the Help Panel for more information on the context menu.
The contextMenu in the datagrid has an additional method called, "find(caption:String)" that returns the item by matching the item's caption. Each customItem in the customItems array have an additional "action" property that contains one of the dndDataGrid contants, PASTE_INTO, PASTER_AFTER, etc. useful for internal dndDataGrid methods and possibly for your own use. Each item also has a owner property which refers to the datagrid. You must add this property to your own custom menu items when your datagrid is nested in a movieclip.
Do not over write this context menu. It has been enabled to show up from within nested movieclips. If you need to change the menu choices then add or remove items from this existing menu. Examples adding, removing, showing and hiding menu items have been created for you in the examples folder. Please refer to the ContextMenu class documented in the Help Panel for more information on the context menu.
- Usage:myInstance.cm;
- Example:This example shows how to add and remove menu items. See example files.
// get reference to the context menu menu items array var menuItems = theDataGrid.cm.customItems; // create our new context menu items var newMenuItem = new ContextMenuItem("My Menu Item", doSomething, true); var newMenuItem2 = new ContextMenuItem("Inserted Item", doSomething, true); // set this when the datagrid is in a nested movieclip newMenuItem.owner = theDataGrid; newMenuItem2.owner = theDataGrid; // add an item to the end of the datagrid menuItems.push(newMenuItem); // remove two previous menu items menuItems.splice(5,2); // add a new item at the beginning of the menu stack menuItems.splice(0,0,newMenuItem2); // add a separator before item 1 menuItems[1].separatorBefore = true; // this function is called by our context menu items function doSomething(obj, menuItem) { // be aware of scope issues in this function trace("obj=" + obj) trace("you clicked " + menuItem.caption) } - See also:
COPY_ITEM
public var COPY_ITEM: Number
Copy Item constant
Copy Item constant. This is used in copy and paste type operations throughout the dndDataGrid methods. Value is 1. This is mostly for internal use.
- Usage:trace(myInstance.COPY_ITEM);
copyIcon
public var copyIcon: MovieClip
Copy icon shown when dragging
Copy icon shown when dragging. Use the strCopyIcon property to set this to icon different than the default icon.
- See also:
copyItem_Event
public var copyItem_Event
Event generated when a item is copied
Event generated when a item is copied from the datagrid. When the items are cut, copied or removed they are copied into the dndComponent.theCopyItems, dndComponent.theCopyNodes and the dndComponent.theCopyGridItems arrays. If enableCrossDrag property is true then the cut, copied or removed items will be available to any dndComponent that also has their cross drag property enabled. This event includes two properties. Target is a reference to the DataGrid, eventSource contains an internal constant for the MENU_EVENT or METHOD_CALL. You can listen for a copyItem or an onCopyItem event.
- Example:The example below adds a listener to the copyItem event.
// include delegation class import mx.utils.Delegate; // Copy event function function copyItemEvent(evt) { // reference to the datagrid var theDataGrid = evt.target; // references to the items copied trace("Copied items="+theDataGrid.theCopyGridItems); trace("Copied items="+theDataGrid.selectedItems); } // we add a function that "listens" for the copy event. When a copyItem event is generated this function is called. theDataGrid.addEventListener("copyItem", Delegate.create(this, copyItemEvent));
CUT_ITEM
public var CUT_ITEM: Number
Cut Item constant
Cut Item constant. This is used in copy and paste type operations throughout the dndDataGrid methods. Value is 0. This is mostly for internal use.
- Usage:trace(myInstance.CUT_ITEM);
cutItem_Event
public var cutItem_Event
Event generated when a item is cut
Event generated when a item is cut from the datagrid. When the items are cut, copied or removed they are copied into the dndComponent.theCopyItems, dndComponent.theCopyNodes and the dndComponent.theCopyGridItems arrays. If enableCrossDrag property is true then the cut, copied or removed items will be available to any dndComponent that also has their cross drag property enabled. This event includes two properties. Target is a reference to the DataGrid, eventSource contains an internal constant for the MENU_EVENT or METHOD_CALL. You can listen for a cutItem or an onCutItem event.
- Example:The example below adds a listener to the cutItem event.
// include delegation class import mx.utils.Delegate; // Cut event function function cutItemEvent(evt) { // reference to the datagrid var theDataGrid = evt.target; // references to the cut items trace("Cut items="+theDataGrid.theCopyGridItems); trace("The parent or sibling item="+theDataGrid.selectedItem); } // we add a function that "listens" for the cut event. When a cutItem event is generated this function is called. theDataGrid.addEventListener("cutItem", Delegate.create(this, cutItemEvent));
defaultBranchItem
public var defaultBranchItem: Object
Default branch item to use when adding a new datagrid item
Object. Indicates the default branch item to use when adding a datagrid item from the "Add Branch Item" context menu. You must enable enableBranchMenuItem to have "Add Branch Item" show up in the context menu.
- Usage:myInstance.defaultBranchItem = {label:"New Item", data:"100"};
- Example:This code sets the default branch item.
theDataGrid.defaultBranchItem = {label:"New Item", data:"100"};
defaultItem
public var defaultItem: Object
Default item to use when adding a new datagrid item
Object. Indicates the default item to use when adding a datagrid item from the "Add Item" context menu.
- Usage:myInstance.defaultItem = {label:"New Item", data:"100"};
- Example:This code sets the default item.
theDataGrid.defaultItem = {label:"New Item", data:"100"};
delayedClick_Event
public var delayedClick_Event
Event generated when a row is delayed clicked
Event generated when a row is delayed clicked. This occurs after a row has been clicked once and a specified period of time has past. This event includes four properties. Target contains a reference to the DataGrid, rowIndex contains the index of the row within the visible rows, absRowIndex contains the absolute index of the row within all row and cellIndex is the index of the column pressed. Alternatively, you can also use the cellPress event to get the cell pressed. See Macromedia docs for more details.
- Example:The example below adds a listener to the double click event.
// include delegation class import mx.utils.Delegate; // Delayed click event function function delayedClickEvent(evt) { // reference to the datagrid var theDataGrid = evt.target; // references to all the items and components involved trace("absRowIndex="+evt.absRowIndex); trace("rowIndex="+evt.rowIndex); trace("cellIndex="+evt.cellIndex); trace("delayedclicked item="+theDataGrid.selectedItem); } // we add a function that "listens" for the delayed click event. When a delayedClick event is generated this function gets called. theDataGrid.addEventListener("delayedClick", Delegate.create(this, delayedClickEvent));
dndEnabled
public var dndEnabled: Boolean
Enables or disables drag and drop
Enables drag and drop when set to true. When set to false drag and drop is disabled. Certain functions can still be performed with the context menu. This property is enabled by default. This property can be set through the Component Panel by changing "Enable Drag and Drop" parameter value. You cannot drag a cell that is also editable.
- Usage:myInstance.dndEnabled = true;
- Example:The example below enables drag and drop.
theDataGrid.dndEnabled = true;
dndGutter
public var dndGutter: Number
The height in pixels of the gutter space inbetween datagrid items
Integer. Amount of space in pixels from the edge of a datagrid item row that counts as the drop before or drop after zone. This is similar to the CSS padding attribute but is only used for drag and drop operations. The less this amount the more space there is to drop into a row. The default value of dndGutter is 5. So if a row height is 20 pixels then 5 pixels at the top and 5 pixels at the bottom of this row height is the gutter. By default this value makes no difference unless the row is determined to be a branch item (using the user defined getIsBranch method). If it is a branch item then this property comes into use. This property can be set through the Component Panel by changing the "Gutter Space" parameter value.
- Usage:myInstance.dndGutter = 5;
- Example:The example below sets the gutter to 5 pixels.
theDataGrid.dndGutter = 5;
- See also:
dndReadOnly
public var dndReadOnly: Boolean
Enables all move operations to be copy operations
Boolean. Enables all move operations to be copy operations when dealing with external movieclips or other drag and drop aware components. This makes it convienent for your users to copy items out of a datagrid without having to hold down the ctrl key (or open apple key in macintosh). The default value of dndReadOnly is false. This property can be set through the Component Panel by changing the "Read Only" parameter value. Even with this option enabled you can move items inside the original datagrid around. To prevent this use permitDropFunction and permitContextMenu function. See permissions example.
- Usage:myInstance.dndReadOnly = true;
- Example:The example below enables the property.
theDataGrid.dndReadOnly = true;
- See also:
doNotInsertOnDrop
public var doNotInsertOnDrop: Boolean
Do not insert a row on drop
Boolean. Do not insert a row on drop. This allows you to drop on a row and generate a drop or onDrop event without actually inserting a row.
- Usage:myInstance.doNotInsertOnDrop = true;
- Example:The example below creates this behavior.
theDataGrid.doNotInsertOnDrop = true;
doubleClick_Event
public var doubleClick_Event
Event generated when a row is double clicked
Event generated when a row is double clicked. This event includes four properties. Target contains a reference to the DataGrid, rowIndex contains the index of the row within the visible rows, absRowIndex contains the absolute index of the row within all rows and cellIndex is the index of the column pressed. Alternatively, you can also use the cellPress event to get the cell pressed. See Macromedia docs for more details.
- Example:The example below adds a listener to the double click event.
// include delegation class import mx.utils.Delegate; // Double click event function function doubleClickEvent(evt) { // reference to the datagrid var theDataGrid = evt.target; // references to all the items and components involved trace("absRowIndex="+evt.absRowIndex); trace("rowIndex="+evt.rowIndex); trace("cellIndex="+evt.cellIndex); trace("doubleclicked item="+theDataGrid.selectedItem); } // we add a function that "listens" for the double click event. When a doubleClick event is generated this function gets called. theDataGrid.addEventListener("doubleClick", Delegate.create(this, doubleClickEvent)); - See also:
drag_mc
public var drag_mc: MovieClip
Reference to movieclip when dragging and dropping rows
Reference to movieclip when dragging and dropping rows. This movieclip only exists when a user starts dragging. It is the visual representation of the dragged contents. It contains many properties including gridItem, gridItems, node, nodes, item, items, dndReadOnly, multipleSelection, selectedIndex, selectedIndices, isDragging, moveAfterDropMode, owner, copyIcon, noDropIcon, nodeIcon0, bg_mc0, label_mc0, pressedCellIndex and origName. In addition to that each item in each of the arrays (gridItems, items and nodes) have the following properties:
item.bIsNodeBranch; item.bIsBranch; item.bIsNodeOpen; item.bIsOpen; item.pressedCellIndex; item.owner; item.indices; item.itemIndex; item.readOnly; // self removing method item.removeMe()You can use the modifyDragMC function to modify the drag_mc before it is dragged.
- Usage:myInstance.drag_mc = function(drag_mc) {};
- Example:The example below adds a property to drag_mc.
theDataGrid.modifyDragMC = function (theDrag_mc) { theDrag_mc.myProp = "10"; trace(theDrag_mc.gridItems.length); } - See also:
dragCell
public var dragCell: Boolean
Creates an exact duplicate of only the cell you pressed you are dragging
Boolean. Creates an exact duplicate of only the cell you pressed you are dragging. You must have dragDuplicateRow set to true for this.
- Usage:myInstance.dragCell = true;
- Example:The example below enables the dragCell behavior.
theDataGrid.dragCell = true;
- See also:
dragDuplicateRow
public var dragDuplicateRow: Boolean
Creates an exact duplicate of the row you are dragging.
Boolean. Creates an exact duplicate of the row you are dragging. If you want to modify the look and feel of the dragged row use the modifyDragMC method. Or turn off this property and adjust the other drag properties.
- Usage:myInstance.dragDuplicateRow = true;
- Example:The example below disables the dragDuplicateRow property.
theDataGrid.dragDuplicateRow = false;
- See also:
dragHighlightAlpha
public var dragHighlightAlpha: Number
Transparency amount of the highlight rectangle when dragging
Number. Transparency amount of the highlight rectangle when dragging. The default value of dragHighlightAlpha is 50.
- Usage:myInstance.dragHighlightAlpha = 30;
- Example:The example below sets the transparency to 30 percent.
theDataGrid.dragHighlightAlpha = 30;
dragOnRollOut
public var dragOnRollOut: Boolean
Start dragging when you mouse moves outside of the row
Start dragging when you mouse moves outside of the row. The default behavior is to drag after moving four pixels from the row press location. When this option is enabled then you do not begin to drag until the mouse moves outside of the clicked row.
- Example:The example enables dragOnRollOut:
theDataGrid.dragOnRollOut = true;
- See also:
dragOverPos
public var dragOverPos: Number
Contains current or last position of dragged item
Contains current or last paste position of a dragged item. When dragging this property contains one of the constants dndDataGrid.PASTE_INTO, dndDataGrid.PASTE_AFTER or dndDataGrid.PASTE_BEFORE.
- Usage:myInstance.dragOverPos;
- Example:The example below returns the position where the mouse was dragged over.
trace(theDataGrid.dragOverPos);
dragRowStyle
public var dragRowStyle: String
The default row style of the rows in the drag mc
String. The default row style of the rows in the drag mc. This can be either "normal", "selected" or "highlight". The default style is "selected". You must have dragDuplicateRow set to true for this to work.
- Usage:myInstance.dragRowStyle = "normal";
- Example:The example below sets the dragRowStyle to "normal".
theDataGrid.dragRowStyle = "normal";
- See also:
DROP_EVENT
public var DROP_EVENT: Number
Drop Event constant
Drop Event constant. Used with drag and drop operations. Value is 20.
- Usage:trace(myInstance.DROP_EVENT);
- Example:Traces constant value.
trace(theDataGrid.DROP_EVENT);
editable
public var editable: Boolean
Enables or disables editable cells in the datagrid
Enables or disables editable cells in the datagrid. When this is turned on then all columns are editable by default. A single click causes the cell to be editable. You have to manually turn off each column you do not want to be editable in code. This property is inherited from the default DataGrid editing capabilities as opposed to the extended rename editing capabilities. With the editable property set to true cells are edited by single clicking on the cell. The extended rename capabilities are triggered on a double click or context menu. The extended rename editing capabilities are an alternative. Use whatever methods suit your needs. It is feasable to swap behaviors using the renameFunction or the showRename method. See cellPress event. See Macromedia docs for more information.
- Usage:myInstance.editable = true;
- Example:The example below makes the second column editable.
theDataGrid.editable = true; theDataGrid.columns[0].editable = false; theDataGrid.columns[1].editable = true;
- See also:
enableBranchMenuItem
public var enableBranchMenuItem: Boolean
Enable branch menu item
Boolean. Enable branch menu item. When the list is created it will add "Add Branch Item" to the menu items.
- Usage:myInstance.enableBranchMenuItem = true;
- Example:The code below enables the branch menu item.
theDataGrid.enableBranchMenuItem = true;
- See also:
enabled
public var enabled: Boolean
Enables or disables the datagrid
Enables the datagrid when set to true. When set to false the datagrid is disabled.
- Usage:myInstance.enabled = true;
- Example:The example below enables the datagrid.
theDataGrid.enabled = true;
enableDragLine
public var enableDragLine: Boolean
Draws a drag line over rows
Number. Draws a drag line over rows as a visual guideline. Works with the drawSeparator method.
- Usage:myInstance.drawDragLine = true;
- Example:The code below turns on the drag line.
theDataGrid.drawDragLine = true;
- See also:
enableKeySearch
public var enableKeySearch: Boolean
Determines if keypresses in the datagrid find and select rows
Boolean. Determines if keypresses in the datagrid find and select rows. This only works with a property called "label". If enabled then the user can type a key and the datagrid will search for the row by the current key pressed. For example, if you have row with a label named "John" and you click the letter "J" then the row is selected. If multiple rows start with the letter "J" then the rows are selected in order. You can use the built in keyPressFunction to handle additional key presses.
- Usage:myInstance.enableKeySearch = true;
- Example:The code below enables key searching.
theDataGrid.enableKeySearch = true;
- See also:
enableRenameItem
public var enableRenameItem: Boolean
Determines if an item can be renamed
Boolean. Determines if an item can be renamed from within the textfield that appears in the datagrid. If enabled then the user can double click on an item and a rename textfield appears. You can also choose "Rename Item" from the context menu. The user can then type in new text for the item label. Esc cancels the edit. Enter or tab commits the edit. You can use the renameTextRestrict property and validateItemLabel for more control. If you define the labelFunction you may need to redefine the setItemLabel function. You can also disable renaming on double click events but continue to rename through the context menu using the renameOnDoubleClick property. This rename feature is an alternative to the editable property. The editable property may be bettered suited depending on your needs. See examples.
- Usage:myInstance.enableRenameItem = true;
- Example:The example below enables the rename feature.
theDataGrid.enableRenameItem = false;
- See also:
errorMsg
public var errorMsg: String
Error message variable
String. Tracks debug messages variable when trackDebug is true. Trace this to see the event log. Deprecated. Use the support forums for help.
- Usage:myInstance.errorMsg;
- Example:The example below traces debug information in the errorMsg variable.
trace(theDataGrid.errorMsg);
headerBorderColors
public var headerBorderColors
Defines the header border colors
Defines the header border colors. An array of color values for use in the creation of the header borders. Only the second color is actually visible. The other two colors are there for convenience if you modify the drawHeaderBG method.
- Example:In this example we are setting the border colors black, gray and black:
theDataGrid.headerBorderColors = [0x000000,0xD5DDDD,0x000000]; theDataGrid.drawHeaderBG();
- See also:
headerFillColors
public var headerFillColors
Header colors for header background
Header colors for header background. An array of color values for use in the creation of the header background.
- Example:In this example we are setting the background all white:
theDataGrid.headerFillColors = [0xffffff,0xffffff,0xffffff]; theDataGrid.drawHeaderBG();
- See also:
headerPressColor
public var headerPressColor
Header press color
Header press color. The overlay color the header turns into when a user presses on it. To modify this behavior modify the headerPress method.
- Example:In this example we are setting the header press color to blue:
theDataGrid.headerPressColor = 0x0000ff; theDataGrid.drawHeaderBG();
- See also:
headerRollOverColor
public var headerRollOverColor
Header roll over color
Header roll over color. The overlay color the header turns into as the users mouse rolls over it. To modify this behavior modify the headerRollOver method.
- Example:In this example we are setting the header roll over color to blue:
theDataGrid.headerRollOverColor = 0x0000ff; theDataGrid.drawHeaderBG();
- See also:
keyPressFunction
public var keyPressFunction: Function
Method to manually handle different key presses
Method to manually handle different key presses. You can use this function to listen to key presses in the datagrid.
- Example:The example below removes a row when the delete key is pressed. You can see this in action in the permissions example.
// we are adding a key listener to the user defined keyPressFunction theDataGrid.keyPressFunction = function () { //trace("Key.DELETEKEY " +Key.DELETEKEY +"-> Code: " + Key.getCode() + "\tACSII: " + Key.getAscii() + "\tKey: " + chr(Key.getAscii())); var asciiCode = Key.getAscii(); var keyCode = Key.getCode(); if (keyCode == Key.DELETEKEY) { // here is how we would remove the items without showing a message //theDataGrid.cutItem(theDataGrid.selectedItems, theDataGrid.METHOD_CALL, theDataGrid.REMOVE_ITEM); // we want to ask the user if they are sure they want to delete the item // we are faking a menu item call so we can show an alert on both the delete key press and the "Remove Item" in the context menu // we could of course put the same alert code here - see permissions example for more code theDataGrid.onRemoveItemMenu(theDataGrid, theDataGrid.menu.find("Remove Item")); } // leave this code in. it is the code to do key item searching, ie, pressing "J" finds and selects "John", pressing "S" finds and selects "Sally" if (asciiCode>=33 && asciiCode<=126) { theDataGrid.findString(String.fromCharCode(asciiCode)); return true; } } - See also:
lastMovedIndex
public var lastMovedIndex: Number
Index of the last moved item
Boolean. Index of the last moved item in the datagrid. This property is set after a successful add, drop or paste event.
- Usage:movedItemIndex = myInstance.lastMovedIndex;
- Example:The example returns the index of the last moved item.
movedItemIndex = theDataGrid.lastMovedIndex;
lastMovedIndices
public var lastMovedIndices: Array
Indices of the last moved datagrid items
Array of indices of the last moved datagrid items in the datagrid. This property is set after a successful add, drop or paste event.
- Usage:movedItemIndex = myInstance.lastMovedIndices[0];
- Example:The example returns the index of the first item in the last moved datagrid items array.
movedItemIndex = theDataGrid.lastMovedIndices[0];
lastMovedItem
public var lastMovedItem: Object
Reference to the last item moved
Boolean. Reference to the last item moved in the datagrid. This property is set after a successful add, drop or paste event.
- Usage:movedItem = myInstance.lastMovedItem;
- Example:The example returns the last moved item.
movedItem = theDataGrid.lastMovedItem;
lastMovedItems
public var lastMovedItems: Array
Reference to an array of the last moved datagrid items
Reference to an array of the last moved datagrid items in the datagrid. This property is set after a successful add, drop or paste event.
- Usage:movedItem = myInstance.lastMovedItems[0];
- Example:The example gets the total number of moved datagrid items.
movedItemsLength = theDataGrid.lastMovedItems.length;
lastMovedParent
public var lastMovedParent: Object
Parent item of the last moved item
Boolean. Parent item of the last moved item. This property is set after a successful add, drop or paste event. This property is not supported in this version of the datagrid but may be used in future versions.
- Usage:parentItem = myInstance.lastMovedParent;
- Example:The example returns the parent item of the last moved item.
parentItem = theDataGrid.lastMovedParent;
lastMovedParents
public var lastMovedParents: Array
Parent datagrid items of the last moved datagrid items
Array of datagrid items. Parent datagrid items of each of the last moved datagrid items. This property is set after a successful add, drop or paste event. This property is not supported in this version of the datagrid but may be used in future versions.
- Usage:parentItem = myInstance.lastMovedParents[0];
- Example:The example returns the parent item of the first item in the last moved datagrid items array.
parentItem = theDataGrid.lastMovedParents[0];
lastMovedSource
public var lastMovedSource: Object
Owner of the last moved item
Object. Owner of the last moved item. This property is set after a successful add, drop or paste event.
- Usage:theItemSource = myInstance.lastMovedSource;
- Example:The example returns the owner of the last moved item.
theItemSource = theDataGrid.lastMovedSource;
lastMovedSources
public var lastMovedSources: Object
Reference to array of the owners of the last moved datagrid items
Reference to array of the owners of the last moved datagrid items. Typically this will be another dndDataGrid or a drag and drop component. This property is set after a successful add, drop or paste event.
- Usage:theItemSource = myInstance.lastMovedSources[0];
- Example:The example returns the owner of the first item in the last moved datagrid items array.
theItemSource = theDataGrid.lastMovedSources[0];
lastOver
public var lastOver: Number
Absolute index of the row the mouse was last over
Number. Absolute index of the row the mouse was last over.
- Usage:myInstance.lastOver;
- Example:The example below traces the property.
trace(theDataGrid.lastOver);
lastOverIndex
public var lastOverIndex: Number
Relative index of the row the mouse was last over
Number. Relative index of the row the mouse was last over.
- Usage:myInstance.lastOverIndex;
- Example:The example below traces the property.
trace(theDataGrid.lastOverIndex);
menu
public var menu
Reference to the ContextMenu.
ContextMenu; Reference to ContextMenu. For more information on the context menu see the contextMenu property.
- See also:
MENU_EVENT
public var MENU_EVENT: Number
Menu Event constant
Menu Event constant. Used with pasteItem method. Value is 21.
- Usage:trace(myInstance.MENU_EVENT);
- Example:Traces constant value.
trace(theDataGrid.MENU_EVENT);
METHOD_CALL
public var METHOD_CALL: Number
Method Call constant
Method Call constant. Used with pasteItem method. Value is 22.
- Usage:trace(myInstance.METHOD_CALL);
- Example:Traces constant value.
trace(theDataGrid.METHOD_CALL);
movementBeforeDrag
public var movementBeforeDrag: Number
Number of pixels the mouse must move before we start dragging
Number of pixels the mouse must move before we start dragging. The default behavior is to drag after moving four pixels from the row press location. The dragOnRollOut property must be false for this to work.
- Example:The example sets movementBeforeDrag to 8 pixels:
theDataGrid.movementBeforeDrag = 8;
multipleSelection
public var multipleSelection: Boolean
Enables mutiple selection of rows
Boolean. Enables mutiple rows to be selected and operated on. Use the CTRL and SHIFT keys to select multiple rows.
- Usage:myInstance.multipleSelection = true;
- Example:The example below enables multiple selection.
theDataGrid.multipleSelection = true;
onDrop_Event
public var onDrop_Event
Event generated after a drag and drop
Event generated after a drag and drop of items. This event includes the following properties. Target contains a reference to the DataGrid, eventSource contains an internal constant for the DROP_EVENT, pastePosition contains the location in the target item where the paste occured (PASTE_INTO, PASTE_BEFORE, PASTE_AFTER), targetItem contains the drop target, targetIndex contains the target index, items contains the source items, item contains the source item or first item in the items array and cellIndex contains the cell index that the items were dropped on. You can listen for a drop or an onDrop event.
- Example:The example below adds a listener to the onDrop event.
// include delegation class import mx.utils.Delegate; // Drop Event function itemDrop(evt) { // see pasteItem_Event for event property list } // we add a function that "listens" for the onDrop event. When a onDrop event is generated this function gets called. theDataGrid.addEventListener("onDrop", Delegate.create(this, itemDrop)); - See also:
onRowDrag_Event
public var onRowDrag_Event
Event generated once when a row is first dragged
Event generated once when a row is first dragged. Target is a reference to the DataGrid, drag_mc is a reference to the dragged movieclip. The drag_mc broadcasts an onDraggerMove event while it is being dragged. The drawSeparator method is called on every move as long as the mouse is over the component. You can listen for onDraggerMove but it has not been tested.
- See also:
PASTE_AFTER
public var PASTE_AFTER: Number
Paste After constant
Paste After constant. This is used in copy and paste type operations throughout the dndDataGrid methods. Value is 4.
- Usage:trace(myInstance.PASTE_AFTER);
- Example:The example inserts a new item after the selectedItem.
var newItem = {label:"New Added Item",data:"10"}; theDataGrid.pasteItem(newItem, theDataGrid.selectedItem, theDataGrid.PASTE_AFTER);
PASTE_BEFORE
public var PASTE_BEFORE: Number
Paste Before constant
Paste Before constant. This is used in copy and paste type operations throughout the dndDataGrid methods. Value is 3.
- Usage:trace(myInstance.PASTE_BEFORE);
- Example:The example inserts a new item before the selectedItem.
var newItem = {label:"New Added Item",data:"10"}; theDataGrid.pasteItem(newItem, theDataGrid.selectedItem, theDataGrid.PASTE_BEFORE);
PASTE_INTO
public var PASTE_INTO: Number
Paste Into constant
Paste Into constant. This is used in copy and paste type operations throughout the dndDataGrid methods. Value is 2.
- Usage:trace(myInstance.PASTE_INTO);
- Example:The example inserts a new item into the selectedItem.
var newItem = {label:"New Added Item",data:"10"}; theDataGrid.pasteItem(newItem, theDataGrid.selectedItem, theDataGrid.PASTE_INTO);
pasteItem_Event
public var pasteItem_Event
Event generated after pasteItem method is called
Event generated after pasteItem method is called. The source of the pasted items are from the dndComponent.theCopyItems, dndComponent.theCopyNodes and the dndComponent.theCopyGridItems arrays unless the method is manually called. When the items are cut, copied or removed throught the context menu they are copied into the dndComponent.theCopyItems, dndComponent.theCopyNodes and the dndComponent.theCopyGridItems arrays. If enableCrossDrag property is true then the cut, copied or removed items will be available to any dndComponent that also has their cross drag property enabled.
This event includes the following properties. Target contains a reference to the DataGrid, eventSource contains an internal constant where the call came from (MENU_EVENT, METHOD_CALL or DROP_EVENT), pastePosition contains the location in the target item where the paste occured (PASTE_INTO, PASTE_BEFORE, PASTE_AFTER), targetItem contains the drop target, targetIndex contains the target index, items contains the source items, item contains the source item and cellIndex contains the cell index that the mouse was over when the paste or drop occured. You can listen for a pasteItem or an onPasteItem event.
This event includes the following properties. Target contains a reference to the DataGrid, eventSource contains an internal constant where the call came from (MENU_EVENT, METHOD_CALL or DROP_EVENT), pastePosition contains the location in the target item where the paste occured (PASTE_INTO, PASTE_BEFORE, PASTE_AFTER), targetItem contains the drop target, targetIndex contains the target index, items contains the source items, item contains the source item and cellIndex contains the cell index that the mouse was over when the paste or drop occured. You can listen for a pasteItem or an onPasteItem event.
- Example:The example below adds a listener to the pasteItem event.
// include delegation class import mx.utils.Delegate; // Paste Item event function function pasteItemEvent(evt) { // reference to the datagrid var theDataGrid = evt.target; // references to all the items and components involved trace("pastePosition="+evt.pastePosition); trace("thePasteToPosition="+theDataGrid.thePasteToPosition); trace("lastMovedItem="+theDataGrid.lastMovedItem); trace("lastMovedIndex="+theDataGrid.lastMovedIndex); trace("lastMovedSource="+theDataGrid.lastMovedSource); trace("lastMovedItems="+theDataGrid.lastMovedItems); trace("lastMovedIndices="+theDataGrid.lastMovedIndices); trace("lastMovedSources="+theDataGrid.lastMovedSources); trace("selectedItem="+theDataGrid.selectedItem); trace("selectedItems="+theDataGrid.selectedItems); trace("item="+evt.item); trace("items="+evt.items); trace("items="+evt.cellIndex); trace("targetItem="+evt.targetItem); trace("targetIndex="+evt.targetIndex); } // we add a function that "listens" for the paste event. When a pasteItem event is generated this function gets called. theDataGrid.addEventListener("pasteItem", Delegate.create(this, pasteItemEvent));
pressedCellIndex
public var pressedCellIndex
Indicates the last pressed cell index
Number. Indicates the last pressed cell index. This is set every time the user presses on a row or right clicks on the row.
- Usage:trace(myInstance.pressedCellIndex);
- Example:The code below retrieves the last pressed cell index.
cellIndex = theDataGrid.pressedCellIndex;
REMOVE_ITEM
public var REMOVE_ITEM: Number
Remove Item constant
Remove Item constant. This is used in copy and paste type operations throughout the dndDataGrid methods. Value is 7. This is mostly for internal use.
- Usage:trace(myInstance.REMOVE_ITEM);
- Example:The example cuts the selectedItem and we use REMOVE_ITEM to generate a onRemoveItem event.
theDataGrid.cutItem(theDataGrid.selectedItem, theDataGrid.REMOVE_ITEM);
removeItem_Event
public var removeItem_Event
Event generated when a item is removed
Event generated when a item is removed or deleted from the datagrid. When the items are cut, copied or removed they are copied into the dndComponent.theCopyItems, dndComponent.theCopyNodes and the dndComponent.theCopyGridItems arrays. If enableCrossDrag property is true then the cut, copied or removed items will be available to any dndComponent that also has their cross drag property enabled. This event includes two properties. Target is a reference to the DataGrid, eventSource is a internal constant for the MENU_EVENT. You can listen for a removeItem or a onRemoveItem event.
- Example:The example below adds a listener to the removeItem event.
// include delegation class import mx.utils.Delegate; // Remove Event function removeItem(evt) { // reference to the datagrid var theDataGrid = evt.target; // references to the items trace("Removed items="+theDataGrid.theCopyGridItems); trace("The parent or sibling item="+theDataGrid.selectedItem); } // we add a function that "listens" for the remove event. When a removeItem event is generated this function gets called. theDataGrid.addEventListener("removeItem", Delegate.create(this, removeItem));
RENAME_ITEM
public var RENAME_ITEM: Number
Rename Item constant
Rename Item constant. This is used in the rename operations throughout the dndDataGrid methods. Value is 8.
- Usage:trace(myInstance.RENAME_ITEM);
- Example:Traces constant value.
trace(theDataGrid.RENAME_ITEM);
renameColumnIndex
public var renameColumnIndex
Specifies the index of the column to edit when renaming
Number. Specifies the index of the column to edit when renaming when you only have one column to edit. If the user selects the rename context menu item or doubleclicks on a column then the column will be editable if the column index is the same as the renameColumnIndex. If you have more than one cell to edit then use the permitRename function and set the renameColumnIndex to the cellIndex. See the permissions example. The rename feature is an alternative to the datagrid editable property. This is a zero based index.
- Usage:myInstance.renameColumnIndex = 0;
- Example:The code below shows you how to make any column editable except rows where the label equals ".. " or where the user clicked on the first cell.
// prevent rename on folder ".. " or where the user clicked on the first cell theDataGrid.permitRename = function (theItem, cellIndex) { // check if the item is a "go up" branch item or first cell if (theItem.label==".. " || cellIndex==0) { // if it is then do not show the rename text field return false; } // allow rename on any other column theDataGrid.renameColumnIndex = cellIndex; //trace("cell pressed = "+ cellIndex); return true; } - See also:
renameField
public var renameField: String
Name of rename label to access when using a cellrenderer
String. Name of rename label to access when using a cellrenderer. If you create a label in your cellrenderer you should set this property to the name of the label.
- Usage:myInstance.renameField = "mylabel";
- Example:
theDataGrid.renameField = "theLabel";
renameItem_Event
public var renameItem_Event
Event generated when a item is renamed
Event generated when a item is renamed. This event includes five properties. Target is a reference to the DataGrid, rowIndex is reference to the row index, row is a reference to the row, item is a reference to the item and originalText is a reference to the original text. Alternatively, you can listen for the cellEdit event generated from an editable column. This is an alternative to the rename feature and not to be used simultaneously on the same column. See Macromedia docs for more information.
- Example:The example below adds a listener to the renameItem event.
// include delegation class import mx.utils.Delegate; // Rename Item event function function renameItemEvent(evt) { // reference to the datagrid var theDataGrid = evt.target; // references to all the items involved trace("The renamed item="+theDataGrid.selectedItem); trace("pastePosition="+evt.pastePosition); trace("thePasteToPosition="+theDataGrid.thePasteToPosition); trace("thePasteToParentItem="+theDataGrid.thePasteToParentItem); } // we add a function that "listens" for the rename event. When a renameItem event is generated this function is called. theDataGrid.addEventListener("renameItem", Delegate.create(this, renameItemEvent)); - See also:
renameOnDoubleClick
public var renameOnDoubleClick: Boolean
Determines if an item can be renamed on double click
Boolean. Determines if an item can be renamed on the double click event. If enabled then a user can double click on an item and a rename textfield appears. If the enableRenameItem is true then a user can still rename the row through the context menu. Esc cancels the edit. Enter or tab commits the edit. You can use the renameTextRestrict property and validateItemLabel for more control. If you define the labelFunction you may need to redefine the setItemLabel function. You can also disable renaming on double click events and only rename through the context menu. See examples.
- Usage:myInstance.renameOnDoubleClick = true;
- Example:The code below shows you how to make any column editable on double click except rows where the label equals ".. " or where the user double-clicked on the first cell.
theDataGrid.renameOnDoubleClick = true; // prevent rename on folder ".. " or where the user double-clicked on the first cell theDataGrid.permitRename = function (theItem, cellIndex) { // check if the item is a "go up" branch item or first cell if (theItem.label==".. " || cellIndex==0) { // if it is then do not show the rename text field return false; } // allow rename on any other column theDataGrid.renameColumnIndex = cellIndex; //trace("cell pressed = "+ cellIndex); return true; } - See also:
renameTextRestrict
public var renameTextRestrict: String
Indicates set of characters user may enter into the rename text field.
String. Indicates a set of characters user may enter into rename text field. See the Textfield.restrict property for more information. See also validateItemLabel
- Usage:myInstance.renameTextRestrict = "A-Za-z0-9 ";
- Example:The example limits the text to only allows letters, numbers and spaces.
theDataGrid.renameTextRestrict = "A-Za-z0-9 ";
- See also:
root_mc
public var root_mc: MovieClip
Reference to the root movieclip
Movieclip. Reference to the root movieclip. If you load in the datagrid in a swf you may need to set this property to the root movieclip.
- Usage:myInstance.root_mc = _root;
- Example:The example sets a reference to the the root movieclip.
// after the datagrid has loaded myMovieclip_mc.theDataGrid.root_mc = _root;
scrollDragSpeed
public var scrollDragSpeed: Number
Scroll drag speed in milliseconds
Scroll drag speed in milliseconds. This is the setting you change to speed up or slow down scroll speed when you drag up or drag down in the datagrid.
- Usage:myInstance.scrollDragSpeed = 100;
- Example:Sets the scroll speed to 100 milliseconds.
theDataGrid.scrollDragSpeed = 100;
showDebug
public var showDebug: Boolean
Shows debug information
Shows debug information when available in the trace console. Deprecated. Use the support forums for help.
- Usage:myInstance.showDebug = true;
- Example:The example below shows debug information.
theDataGrid.showDebug = true;
singleClick_Event
public var singleClick_Event
Event generated when a row is single clicked
Event generated when a row is single clicked. This event includes four properties. Target contains a reference to the DataGrid, rowIndex contains the index of the row within the visible rows, absRowIndex contains the absolute index of the row within all rows and cellIndex is the index of the column pressed. Alternatively, you can also use the cellPress event to get the cell pressed. See Macromedia docs for more details.
- Example:The example below adds a listener to the single click event.
// include delegation class import mx.utils.Delegate; // Double click event function function singleClickEvent(evt) { // reference to the datagrid var theDataGrid = evt.target; // references to all the items and components involved trace("absRowIndex="+evt.absRowIndex); trace("rowIndex="+evt.rowIndex); trace("cellIndex="+evt.cellIndex); trace("this item has been clicked="+theDataGrid.selectedItem); } // we add a function that "listens" for the single click event. When a singleClick event is generated this function gets called. theDataGrid.addEventListener("singleClick", Delegate.create(this, singleClickEvent));
strAddItem
public var strAddItem: String
Context Menu Item Add Leaf string. Deprecated
The string of the add item menu item. Deprecated. To change the text of any of the existing menu items use the contextMenu.customItems.caption property. Note: The Flash Player will not show the menu item if the caption is set to any of the reserved words, "cut, copy, paste".
- Usage:myInstance.cm.customItems[0].caption = "new text"
- Example:The example below changes the text of the first menu item.
theDataGrid.menu.customItems[0].caption = "new text";
strCopyIcon
public var strCopyIcon: String
Id of icon to show when copying an item
Id of icon to show when copying an item. The default value of strCopyIcon is "dndCopyIcon". Any other movieclip you use must exist in the library and have it's linkage identifier set. This property can be set through the Component Panel by changing "Copy Icon" parameter value.
- Usage:myInstance.strCopyIcon = "myIconId";
- Example:The example below sets the copy icon to "myIcon".
theDataGrid.dndCopyIcon = "myIcon";
strCopyItem
public var strCopyItem: String
Context Menu Item Copy string. Deprecated
The string of the copy menu item. Deprecated. To change the text of any of the existing menu items use the contextMenu.customItems.caption property. Note: The Flash Player will not show the menu item if the caption is set to any of the reserved words, "cut, copy, paste".
- Usage:myInstance.cm.customItems[0].caption = "new text"
- Example:The example below changes the text of the first menu item.
theDataGrid.menu.customItems[0].caption = "new text";
strCutItem
public var strCutItem: String
Context Menu Item Cut string. Deprecated
The string of the cut menu item. Deprecated. To change the text of any of the existing menu items use the contextMenu.customItems.caption property. Note: The Flash Player will not show the menu item if the caption is set to any of the reserved words, "cut, copy, paste".
- Usage:myInstance.cm.customItems[0].caption = "new text";
- Example:The example below changes the text of the first menu item.
theDataGrid.menu.customItems[0].caption = "new text";
strNoDropIcon
public var strNoDropIcon: String
Id of icon when dragging is not permitted
Id of icon when dragging is not permitted. The default value of strNoDropIcon is "dndNoDropIcon". Any other movieclip you would use must exist in the library with it's linkage identify set. This property can be set through the Component Panel by changing "No Drop Icon" parameter value. The dndDataGrid includes an additional built-in no drop allowed icon called "dndNoDropIcon2".
- Usage:myInstance.strNoDropIcon = "dndNoDropIcon2";
- Example:The example below sets the no drop icon to the alternative no drop icon.
theDataGrid.strNoDropIcon = "dndNoDropIcon2";
strPasteAfter
public var strPasteAfter: String
Context Menu Item Paste After string. Deprecated
The string of the paste after menu item. Deprecated. To change the text of any of the existing menu items use the contextMenu.customItems.caption property. Note: The Flash Player will not show the menu item if the caption is set to any of the reserved words, "cut, copy, paste".
- Usage:myInstance.cm.customItems[0].caption = "new text"
- Example:The example below changes the text of the first menu item.
theDataGrid.menu.customItems[0].caption = "new text";
strPasteBefore
public var strPasteBefore: String
Context Menu Item Paste Before string. Deprecated
The string of the paste before menu item. Deprecated. To change the text of any of the existing menu items use the contextMenu.customItems.caption property. Note: The Flash Player will not show the menu item if the caption is set to any of the reserved words, "cut, copy, paste".
- Usage:myInstance.cm.customItems[0].caption = "new text"
- Example:The example below changes the text of the first menu item.
theDataGrid.menu.customItems[0].caption = "new text";
strPasteInto
public var strPasteInto: String
Context Menu Item Paste Into string. Deprecated
The string of the paste into menu item. Deprecated. To change the text of any of the existing menu items use the contextMenu.customItems.caption property. Note: The Flash Player will not show the menu item if the caption is set to any of the reserved words, "cut, copy, paste".
- Usage:myInstance.cm.customItems[0].caption = "new text"
- Example:The example below changes the text of the first menu item.
theDataGrid.menu.customItems[0].caption = "new text";
strRemoveItem
public var strRemoveItem: String
Context Menu Item Remove string. Deprecated
The string of the remove menu item. Deprecated. To change the text of any of the existing menu items use the contextMenu.customItems.caption property. Note: The Flash Player will not show the menu item if the caption is set to any of the reserved words, "cut, copy, paste".
- Usage:myInstance.cm.customItems[0].caption = "new text"
- Example:The example below changes the text of the first menu item.
theDataGrid.menu.customItems[0].caption = "new text";
strRenameItem
public var strRenameItem
Context Menu Item Rename string. Deprecated
The string of the rename menu item. Deprecated. To change the text of any of the existing menu items use the contextMenu.customItems.caption property. Note: The Flash Player will not show the menu item if the caption is set to any of the reserved words, "cut, copy, paste".
- Usage:myInstance.cm.customItems[0].caption = "new text"
- Example:The example below changes the text of the first menu item.
theDataGrid.menu.customItems[0].caption = "new text";
symbolName
static var symbolName: String
The name of the ActionScript class
String: The name of the ActionScript class. Contains "dndDataGrid".
symbolOwner
static var symbolOwner: Object
The fully qualified class name
Static: The fully qualified class name (for example, mypackage.MyComponent). This variable is used in the internal call to the createClassObject() method.
targetItem
public var targetItem: Object
Reference to the target item after drag and drop
Item. Reference to the target item during drag and drop operation. The targetItem is the item that the mouse was over when a drop event occured. This item is set each time after a successful drag and drop or paste operation.
- Usage:myInstance.targetItem;
- Example:The example below traces the targetItem label.
trace("Last item dropped on " + theDataGrid.targetItem.label);
theCopyGridItems
public var theCopyGridItems: Array
Reference to array of datagrid items created on cut or copy events
Reference to array of datagrid items created on cut or copy events. This array is created when a user selects "Cut Item" or "Copy Item" from the context menu.
- Usage:myInstance.theCopyGridItems;
- Example:The example below returns the length of the array.
trace(theDataGrid.theCopyGridItems.length);
theCopyItems
public var theCopyItems: Array
Reference to array of list items created from cut or copy events
Reference to array of list items created from cut or copy events. This array is created when a user selects "Cut Item" or "Copy Item" from the context menu. This array is created by converting the datagrid items into list items with the convertToItem method. The method convertToItem can be redefined for your own use.
- Usage:myInstance.theCopyItems;
- Example:The example below traces the length of the array.
trace(theDataGrid.theCopyItems.length);
- See also:
theCopyNodes
public var theCopyNodes: Array
Reference to array of items converted to tree nodes on cut or copy events
Reference to array of items converted to tree nodes on cut or copy events. This array is created when a user selects "Cut Item" or "Copy Item" from the context menu. This array is also created when the user calls the methods cutItem or copyItem. This array is created by converting the datagrid items into tree nodes with the convertToNode method. This method can be redefined for your own use.
- Usage:myInstance.theCopyNodes;
- Example:The example below traces the length of the copy nodes.
trace(theDataGrid.theCopyNodes.length);
- See also:
thePasteIntoItem
public var thePasteIntoItem: Object
The item where datagrid items were pasted into
Object. The item where datagrid items were pasted into. This property is set after a successful add, drop or paste event.
- Usage:myInstance.thePasteIntoItem;
- Example:The example returns the item that items were most recently pasted into.
trace(theDataGrid.thePasteIntoItem);
- See also:
thePasteToPosition
public var thePasteToPosition: Number
Relative index where the datagrid items were pasted
Number. Relative index in the datagrid where the datagrid items were pasted or dropped into. This property is set after a successful add, drop or paste event.
- Usage:pasteToPosition = myInstance.thePasteToPosition;
- Example:The example returns the paste to position.
index = theDataGrid.thePasteToPosition;
- See also:
trackDebug
public var trackDebug: Boolean
Track debug messages in errorMsg variable
Track debug messages in the errorMsg variable. Trace this to see the event log. Deprecated. Use the support forums for help.
- Usage:myInstance.trackDebug = true;
- Example:The example below tracks debug information in the errorMsg variable.
theDataGrid.trackDebug = true;
trashCan
public var trashCan: MovieClip
Reference to a movieclip to use as a trashcan. Deprecated
Movieclip. Reference to a movieclip to use as a trashcan. Deprecated. Use the dndListener class instead. See the Drag to movieclip example.
- Usage:myInstance.trashCan = trashCan_mc;
- Example:The example sets a reference to a movieclip called trashcan_mc.
theDataGrid.trashCan = trashCan_mc;
versionNumber
public var versionNumber: String
Current version number for this component
Current version number for this component.
visible
public var visible: Boolean
Displays or hides the datagrid
Displays the datagrid when set to true. When set to false hides the datagrid.
- Usage:myInstance.visible = true;
- Example:The example below displays the datagrid.
theDataGrid.visible = true;
Property Documentation
copyIconX
public copyIconX: Number (write)
Sets the X coordinate for the copy icon
Number; Sets the X coordinate for the copy icon.
copyIconX
public copyIconX (read)
Gets the X coordinate for the copy icon
Number; Gets the X coordinate for the copy icon.
copyIconY
public copyIconY: Number (write)
Sets the Y coordinate for the copy icon
Number; Sets the Y coordinate for the copy icon.
copyIconY
public copyIconY (read)
Gets the Y coordinate for the copy icon
Number; Gets the Y coordinate for the copy icon.
enableContextMenu
public enableContextMenu: Boolean (read, write)
getterEnables or disables the right-click context menu
Enables context menu operations when set to true. When set to false no menu items appears when right-clicking on a item. The context menu is enabled by default. Certain functions can still be performed if drag and drop is enabled. This property can be set through the Component Panel by changing "Enable Context Menu" parameter value.
- Usage:myInstance.enableContextMenu = newValue;
- Example:The example below enables the context menu.
// Example 1 - enable the context menu theDataGrid.enableContextMenu = true;
// Example 2 - Remove the rename menu item theDataGrid.cm.customItems.splice(7,1);
- See also:
Constructor Documentation
dndDataGrid
public function dndDataGrid (
)
Constructor used when creating a new datagrid
Internal constructor used when creating a new dndDataGrid instance. To create a dndDataGrid dynamically use the createClassObject method. The dndDataGrid must be in the library for this to work. See the dynamic example.
- Example:The example below creates a dndDataGrid at runtime.
// import the class import com.judah.controls.dndDataGrid; // create the datagrid createClassObject(dndDataGrid,"theDataGrid",100); // set the size and position theDataGrid.setSize(240,250); theDataGrid._x = 10; theDataGrid._y = 70; // fill the datagrid with data var arr:Array = new Array(); arr.push({label:"File 1",data:"file"}); arr.push({label:"File 2",data:"file"}); theDataGrid.dataProvider = arr; // style the datagrid theDataGrid.setStyle("fontFamily", "_sans"); theDataGrid.setStyle("fontSize", 12);
Method Documentation
convertToItem
public function convertToItem (
theItem)
Converts single datagrid item into a list item
Converts a single datagrid item into a list item. Used when you drag and drop from a dndDataGrid to a dndList. It also copies any properties the list item may have. Redefine this method for your own use. The method is shown below.
- Example:
function convertToItem(theItem) { // create new item var newItem = new Object(); // NOTE: This may copy references from the node. // add any other properties for (var prop in theItem) { if (prop != "__ID__") { newItem[prop] = theItem[prop]; } } return newItem; }
convertToNode
public function convertToNode (
theItem)
Converts single datagrid item into a tree node
Converts a single datagrid item into a tree node. Used when you drag from a dndDataGrid to a dndTree. It also copies any properties the datagrid item may have. Redefine this method for your own use. The method is shown below.
- Example:
// default code used in this function. Cater to your needs function convertToNode(theItem) { //trace("convertToNode") // create new tree node from the list item properties var newXML = new XML('<node >'); var newXMLNode = newXML.firstChild; // get label from item if (theItem.label!=undefined) { newXMLNode.attributes.label = label; } // get data from item if (theItem.data!=undefined) { newXMLNode.attributes.data = theItem.data; } // get icon if it exists if (getItemIcon(theItem)!=undefined) { newXMLNode.attributes.icon = getItemIcon(theItem); } // loop through and add any other properties // NOTE: This may copy references for (var prop in theItem) { if (prop != "__ID__") { newXMLNode[prop] = theItem[prop]; } } return newXMLNode; }
copyItem
public function copyItem (
theItems,
eventSource)
eventSource)
A function to copy datagrid items from the datagrid
Method to copy datagrid items from the datagrid. A copyItem event is generated when this method is called. The event contains the target which is a reference to the datagrid and the eventSource, which indicates if the method was called from the context menu. When the items are cut, copied or removed they are copied into the dndComponent.theCopyItems, dndComponent.theCopyNodes and the dndComponent.theCopyGridItems arrays. If enableCrossDrag property is true then the cut, copied or removed items will be available to any dndComponent that also has their cross drag property enabled. Note: At this time you must select the items in the datagrid first.
- Parameters:
theItems - The selected item or items eventSource - Optional. Constant that refers to the source of the call. Typically DataGrid.MENU_EVENT - Returns:Reference to the copied datagrid items
- Usage:myInstance.copyItem(theItems,eventSource);
- Example:The example below copies the selected item.
var copyItems = theDataGrid.copyItem(theDataGrid.selectedItem);
cutItem
public function cutItem (
theItems,
eventSource,
eventType)
eventSource,
eventType)
A function to cut items from the datagrid
Method to cut items from the datagrid. A cutItem event is generated when this method is called. The event contains the target which is a reference to the datagrid and the eventSource, which indicates if the method was called from the context menu. When the items are cut, copied or removed they are copied into the dndComponent.theCopyItems, dndComponent.theCopyNodes and the dndComponent.theCopyGridItems arrays. If enableCrossDrag property is true then the cut, copied or removed items will be available to any dndComponent that also has their cross drag property enabled. Note: At this time you must select the items in the datagrid first for them to be cut.
- Parameters:
theItems - The selected item or items eventSource - Optional. Constant that refers to the source of the call. Typically datagrid.MENU_EVENT eventType - Optional. Constant that refers to the event of the call. If REMOVE_ITEM is passed in then a removeItem event is generated. - Returns:Reference to the cut datagrid items
- Usage:myInstance.cutItem(theItems, eventSource, eventType);
- Example:The example below cuts the selected items from the datagrid.
theDataGrid.selectedIndices = [0,1,2] var cutItems = theDataGrid.cutItem(theDataGrid.selectedItems);
drawHeaderBG
public function drawHeaderBG (
Void): Void
Draws the header background
Draws the header background. This method is provided for you to customize how the background looks to the user. Example code is shown below.
- Overrides:
- Example:Here is the original function you can over write:
function drawHeaderBG() { var mc : MovieClip = header_mc; mc.clear(); var clr : Number = getStyle("headerColor"); var o : Object = __viewMetrics; var tot : Number = Math.max(totalWidth, displayWidth+3); mc.moveTo(o.left,o.top); var matrix : Object = { matrixType : "box", x:0, y:0, w:tot, h:__headerHeight+1, r:Math.PI/2 }; var colors : Array = [clr, clr, 0xffffff]; var ratios : Array = [0, 60, 255]; var alphas : Array = [100, 100, 100]; mc.beginGradientFill("linear", colors, alphas, ratios, matrix); mc.lineStyle(0, 0x000000, 0); mc.lineTo(tot, o.top); mc.lineTo(tot, __headerHeight+1); mc.lineStyle(0, 0x000000, 100); mc.lineTo(o.left, __headerHeight+1); mc.lineStyle(0, 0x000000, 0); mc.endFill(); } - See also:
drawSeparator
public function drawSeparator (
objPoint,
row,
dragOverPos,
bCanDrop)
row,
dragOverPos,
bCanDrop)
Draws separator line when dragging
Draws separator line when dragging. This method is provided for you to customize how the drag and drop looks to the user. Be careful not to do to many things in this function as it is run on every move and can tax the cpu. An interesting method is the row.setState method. This method highlights the row. Example code is shown below.
- Example:Here is the original function you can over write:
// a lot of options are in the comments - you can uncomment to see what they do function drawSeparator(objPoint, row, dragOverPos, bCanDrop) { //var maxWidth = 24; var maxWidth = _width/2; //var maxWidth = objPoint.x - 5; //trace("maxWidth="+maxWidth) if (dragOverPos == PASTE_BEFORE) { separator._visible = true; if (row.state!="normal") { //row.setState("normal", false); } separator._y = row._y; } else if (dragOverPos == PASTE_AFTER) { separator._visible = true; //row.icon_mc._alpha = 100; //row.setState("normal", false); //row.icon_mc.gotoAndStop(1); // this unhighlights the row if (row.state!="normal") { //row.setState("normal", false); } separator._y = row._y + rowHeight; //trace("_rowHeight="+rowHeight) //trace("rowHeight="+rowHeight) } else if(dragOverPos == PASTE_INTO) { //separator._visible = false; // row.icon_mc._alpha = 100; // this highlights the row if (row.state!="highlighted") { //row.setState("highlighted", false); } separator._y = row._y + (rowHeight/2); //separator._y = objPoint.y; //row.icon_mc.gotoAndStop(2); // hide separator if we cannot drop //if (bCanDrop) { // trace("bCanDrop = true") // separator._visible = false; //} //else { // separator._visible = true; //} // } separator._alpha = 100; separator._width = maxWidth; separator._height = 1; separator.clear(); separator.lineStyle(1, 0x666666, 50); separator.moveTo(0, 0); separator.lineTo(width,0); //separator._y = objPoint.y; // we can track the depth that we are at but it doesn't look that good. //separator._x = row.nodeIcon._x; separator._x = 5; } - See also:
dropItem
public function dropItem (
theSourceItem,
theTargetItem,
pastePosition,
moveItem,
eventSource,
eventConstant,
cellIndex)
theTargetItem,
pastePosition,
moveItem,
eventSource,
eventConstant,
cellIndex)
Method used to insert or move items when dropped into the datagrid
Method used to insert or move items when dropped into the datagrid at specific places. An onDrop event is generated when a user drops an item onto the datagrid. This is a function wrapper around the pasteItem function with the same parameters. The only parameter different is the eventSource parameter is set to the DROP_EVENT constant. See pasteItem for more info. Note: If you want to pop up an alert it may be better to over write the pasteItem method. That way you catch menu events such as add item, paste into, paste after and paste before.
- Example:The dropItem function defined.
function dropItem(theSourceItem, theTargetItem, pastePosition, moveNode, eventSource, eventConstant) { return pasteItem(theSourceItem, theTargetItem, pastePosition, moveNode, eventSource, eventConstant) } - See also:
getIsBranch
public function getIsBranch (
item)
Method to determine if the item is a branch
Method to determine if the item is a branch. By default all items in the datagrid are items or "leaf items" if you put it in the context of a tree structure. You can use this function to tell the datagrid that the item is a branch. Once that happens the datagrid will allow you to drag and drop INTO "branch" rows. When a row has been determined to be a branch then the top and bottom section of the row becomes the PASTE_BEFORE and PASTE_AFTER zones. The space inbetween the top and bottom zones is called the PASTE_INTO zone. You can set the height of the PASTE_BEFORE and PASTE_AFTER zone by setting the dndGutter property. So, for example, if the row height is 20 pixels and you set the dndGutter to 5 pixels then the top 5 pixels of a row is the PASTE_BEFORE zone, the next 10 pixels is the PASTE_INTO zone and the bottom 5 pixels is the PASTER_AFTER zone.
- Parameters:
item Object Item in the datagrid. - Example:The example below checks if the item contains the isBranch property and returns true if it does.
// define the getIsBranch function theDataGrid.getIsBranch = function(item) { // if the item has a property called isBranch and it is true // then we use that to tell the datagrid that this is a branch if (item.isBranch) { // this is branch return true; } return false; }
getIsOpen
public function getIsOpen (
theItem)
Method to check if item is open.
Method to check if item is open. Can be used to set bIsOpen and bIsNodeOpen property on cross dragged items. This is useful when dragging to a dndTree. This method returns false by default. Redefine for your own use.
- Returns:Boolean - True indicates item is open. False indicates item is closed.
- Example:The example defines when an item is determined to be open.
// define the getIsOpen function theDataGrid.getIsOpen = function(item) { // if the item has a property called isOpen // we check it to tell the datagrid that this item is open if (item.isOpen) { // this is open return true; } return false; }
getItemCellValue
public function getItemCellValue (
theItem: Object,
cellIndex: Number)
cellIndex: Number)
Gets the value of the cell by item and cell index
Gets the value of the cell by item and cell index
- Parameters:
theItem Object - The item cellIndex Number - The cell index of the cell - Usage:myInstance.setItemLabel(theItem,0);
- Example:The code below gets the value of the first cell of the selected item.
var selItem = theDataGrid.selectedItem; var cellValue = theDataGrid.getItemCellValue(selItem,1);
getItemIcon
public function getItemIcon (
theItem,
subIcon)
subIcon)
Gets the icon id of the item
Gets the icon id of the item. If the icon of the item is undefined and a substitute icon id is passed in then the substitute icon id is returned. There are built-in icons for your use. These are dndLeafIcon, dndIcon, dndIcon2, dndBranchIcon, dndBranchIconOpened, dndNoDropIcon, dndNoDropIcon2, dndCopyIcon and dndGenericIcon. This method only works if a cellrenderer or the defaultIcon property is set. Actually this method is mostly useless since dragDuplicateRow came around and knocked it out of the water. You could sort of say its deprecated and only kept around for backwards compatibility.
- Parameters:
theItem Object: The datagrid item subIcon String: Identifier of a substitute icon. Substitute icon is a movieclip. - Returns:String. Name of icon. Returns the default icon if setStyle("defaultIcon",iconId) is set
- Usage:myInstance.getItemIcon(myInstance.selectedItem);
- Example:
trace(theDataGrid.getItemIcon(theDataGrid.selectedItem));
- See also:
getItemIndex
public function getItemIndex (
theItem)
Method to get the index of the item in datagrid
Method to get the index of the item in datagrid. Use selectedIndex or selectedIndices before using this method.
- Parameters:
theItem Item in the datagrid - Returns:Number If found then returns the index of the item. If not found then returns -1
- Usage:myInstance.getItemIndex(item);
- Example:The example below gets the selected item index.
theDataGrid.getItemIndex(theDataGrid.selectedItem);
- See also:
getItemLabel
public function getItemLabel (
theItem,
subLabel)
subLabel)
Gets the label of the item
Gets the label of the item. If the label of the item is undefined and a substitute label is passed in then the substitute label text is returned.
- Parameters:
theItem Object The datagrid item subLabel String The text to return if no label in the item is defined - Returns:String. Text of the label.
- Usage:myInstance.getItemLabel(item);
- Example:
trace(theDataGrid.getItemLabel(theDataGrid.selectedItem));
getRoot
public function getRoot (
mc)
Finds root movieclip and returns a reference to it
Finds root movieclip and returns a reference to it
- Parameters:
mc A reference to the component or path you are in. - See also:
headerPress
public function headerPress (
Void): Void
Draws the header in the pressed state and moves the cell
Draws the header in the pressed state and moves the cell. This method is provided for you to customize how the header press looks to the user. See also headerPressColor. Example code is shown below.
- Overrides:
- Example:Here is the original function you can over write:
function headerPress(Void) : Void { var o = this.owner; // the grid if (!this.column.sortable || !o.sortableColumns || !o.enabled) return; this.cell._x+=1; this.cell._y+=1; var c = new Color(this); c.setRGB(o.getStyle("headerPressColor")); _alpha = 100; } - See also:
headerRollOut
public function headerRollOut (
Void): Void
Turns off the header overlay roll over color
Turns off the header overlay roll over color. This method is provided for you to customize how the header rollout looks to the user. Example code is shown below.
- Overrides:
- Example:Here is the original function you can over write:
function headerRollOut(Void) : Void { _alpha = 0; } - See also:
headerRollOver
public function headerRollOver (
Void): Void
Draws the header overlay with color
Draws the header overlay with color. This method is provided for you to customize how the header rollover looks to the user. See also headerRollOverColor. Example code is shown below.
- Overrides:
- Example:Here is the original function you can over write:
function headerRollOver(Void) : Void { var o = this.owner; // the grid if (!o.enabled || o.cellEditor!=undefined || !o.sortableColumns || !this.column.sortable) return; var c = new Color(this); c.setRGB(o.getStyle("headerRollOverColor")); _alpha = 50; } - See also:
iconFunction
public function iconFunction (
item,
columnName)
columnName)
Method to dynamically set the icon of the row
Method to dynamically set the icon of the row. Normally it is set by reading the value of the item's "icon" property. This method will over write any default value. You can return undefined to return the default value. I also recommend you use this function rather than the iconField property or setIcon method for better control and compatibility and cross drag compatibility. You must assign the IconCellRenderer to the column you wish to display the icon in.
- Overrides:mx.updatedcontrols.listclasses.ScrollSelectList.iconFunction in class mx.updatedcontrols.listclasses.ScrollSelectList
- Parameters:
item Object item in the datagrid columnName Object columnName in the datagrid - Example:The example below sets an icon based on the icon property in the item.
// add items to the datagrid theDataGrid.addItem({icon:"", label:".. ",data:"folder"}); theDataGrid.addItem({icon:"", label:"Folder 1",data:"folder"}); theDataGrid.addItem({icon:"", label:"Folder 2",data:"folder"}); theDataGrid.addItem({icon:"", label:"File 1",data:"file"}); theDataGrid.addItem({icon:"", label:"File 2",data:"file"}); theDataGrid.addItem({icon:"", label:"File 3",data:"file"}); theDataGrid.columnNames = ["icon","label", "type"]; theDataGrid.getColumnAt(0).cellRenderer = "IconCellRenderer"; // set the icon to use // we define the icons with this function. if we do not set it then no icons are created theDataGrid.iconFunction = function(item, columnName){ // get information from the selected item and use it to return a linkage id // to movieclips in the library or built-in icons // both dndBranchIcon & dndIcon are built in icons // we could use the columnName parameter to get data from the item // or use it to see which column we are rendering if we use this cell renderer more than once var type = item.data; if (type=="folder") { return "dndBranchIcon"; } return "dndIcon"; } - See also:
labelFunction
public function labelFunction (
item)
Method to manually set the text of the column label
Method to manually set the text of the column label. You can use this function to customize the label text of the column. Normally the label text is the value of the item's property. This method will allow you to display whatever text you want based on what you return. You can return undefined to show the default label value. I recommend you use this function rather than the labelField property for better control and compatibility. In some cases you must redefine the setItemLabel function if you use the rename feature if the labelFunction is concatenating the label from multiple properties. Each column has its own labelFunction and must be set in the column. Alternatively, see Macromedia documentation on the the bindFormatString method for formatting column values.
- Overrides:mx.updatedcontrols.listclasses.ScrollSelectList.labelFunction in class mx.updatedcontrols.listclasses.ScrollSelectList
- Parameters:
item Object item in the datagrid - Example:The example below adds a dollar sign to the value.
//set the label to use theDataGrid.columns[0].labelFunction = function(item) { // if item is undefined if (item != undefined) { var label = item.label; // add dollar sign to the label if (label != undefined && label!="") { return "$"+ label; } } } - See also:
modifyDragMC
public function modifyDragMC (
drag_mc)
Modifies the drag movieclip before dragging
Lets the user modify the drag movieclip before dragging and dropping rows. This movieclip only exists when a user starts dragging. It is the visual representation of the dragged contents. It contains many properties including gridItem, gridItems, node, nodes, item, items, dndReadOnly, multipleSelection, selectedIndex, selectedIndices, isDragging, moveAfterDropMode, owner, xOffset, yOffset, copyIcon, noDropIcon, nodeIcon0, bg_mc0, label_mc0, pressedCellIndex and origName. In addition to that each item in each of the arrays have the following properties:
gridItem.bIsNodeBranch; gridItem.bIsBranch; gridItem.bIsNodeOpen; gridItem.bIsOpen; gridItem.owner; gridItem.pressedCellIndex; gridItem.indices; gridItem.itemIndex; gridItem.readOnly; // self removing method gridItem.removeMe()You can use the modifyDragMC function to modify the drag_mc before it is dragged.
- Parameters:
drag_mc Movieclip that is being dragged around - Example:The example below sets the alpha of the copy icon to 0:
theDataGrid.modifyDragMC = function (theDrag_mc) { //enumerate the drag mc to see all it's properties theDragMC.copyIcon._alpha = 0; } - See also:
onAddBranchItemMenu
public function onAddBranchItemMenu (
obj,
menuItem)
menuItem)
A function called when user selects "add branch item" from the context menu
A function called when user selects "add branch item" from the context menu
- Parameters:
obj A reference to the datagrid. If this is undefined check menuItem.owner menuItem A reference to the menu item
onAddLeafItemMenu
public function onAddLeafItemMenu (
obj,
menuItem)
menuItem)
A function called when user selects "add item" from the context menu
A function called when user selects "add item" from the context menu
- Parameters:
obj A reference to the datagrid. If this is undefined check menuItem.owner menuItem A reference to the menu item
onContextMenuSelect
public function onContextMenuSelect (
)
User customizable function for manipulating the context menu
User customizable function for manipulating the context menu before it is shown. Use this or the permitContextMenu function to dynamically show or hide or enable or disable the menu items based on the item the user has selected at the time. The recommended method is to use the permitContextMenu function and this as an alternative.
- Example:This example hides the first menu item
theDataGrid.onContextMenuSelect = function () { var customItems = theDataGrid.cm.customItems; customItems[0].visible = false; } - See also:
onCopyItemMenu
public function onCopyItemMenu (
obj,
menuItem)
menuItem)
A function called when user selects "copy item" from the context menu
A function called when user selects "copy item" from the context menu
- Parameters:
obj A reference to the datagrid. If this is undefined check menuItem.owner menuItem A reference to the menu item
onCutItemMenu
public function onCutItemMenu (
obj,
menuItem)
menuItem)
A function called when user selects "cut item" from the context menu
A function called when user selects "cut item" from the context menu
- Parameters:
obj A reference to the datagrid. If this is undefined check menuItem.owner menuItem A reference to the menu item
onPasteAfterItemMenu
public function onPasteAfterItemMenu (
obj,
menuItem)
menuItem)
A function called when user selects "paste after" from the context menu
A function called when user selects "paste after" from the context menu
- Parameters:
obj A reference to the datagrid. If this is undefined check menuItem.owner menuItem A reference to the menu item
onPasteBeforeItemMenu
public function onPasteBeforeItemMenu (
obj,
menuItem)
menuItem)
A function called when user selects "paste before" from the context menu
A function called when user selects "paste before" from the context menu
- Parameters:
obj A reference to the datagrid. If this is undefined check menuItem.owner menuItem A reference to the menu item
onPasteIntoItemMenu
public function onPasteIntoItemMenu (
obj,
menuItem)
menuItem)
A function called when user selects "paste into" from the context menu
A function called when user selects "paste into" from the context menu
- Parameters:
obj A reference to the datagrid. If this is undefined check menuItem.owner menuItem A reference to the menu item
onRemoveItemMenu
public function onRemoveItemMenu (
obj,
menuItem)
menuItem)
A function called when user selects "remove item" from the context menu
A function called when user selects "remove item" from the context menu
- Parameters:
obj A reference to the datagrid. If this is undefined check menuItem.owner menuItem A reference to the menu item
pasteItem
public function pasteItem (
theSourceItem,
theTargetItem,
pastePosition,
moveItem,
eventSource,
eventConstant,
cellIndex)
theTargetItem,
pastePosition,
moveItem,
eventSource,
eventConstant,
cellIndex)
Method to insert or move datagrid items
Method to insert or move datagrid items in the datagrid at specific places. Please use addItem or addItemAt before using this method as this is mostly an internal method. A pasteItem event is generated when this method is called. The event contains the target, which is a reference to the datagrid, the eventSource, which indicates if the method was called from the context menu, the target item and the pastePosition, which indicates the position above, below or in the target item. When items are cut, copied or removed they are copied into the dndComponent.theCopyItems, dndComponent.theCopyNodes and the dndComponent.theCopyGridItems arrays. If enableCrossDrag property is true then the cut, copied or removed items will be available to any dndComponent that also has their cross drag property enabled. When you then paste from the context menu this is where those items come from.
- Parameters:
theSourceItem The item or items that will be inserted into the datagrid. This can be an object or object array. theTargetItem Object - The location or reference item of where the item(s) should be inserted. pastePosition Number Constant - Refers to the paste position (PASTE_INTO, PASTE_BEFORE, PASTE_AFTER). moveItem Boolean - Indicates to move or copy the datagrid items from their original location. eventSource Number Constant - A constant used to indicate the source of the method. Also used to generate the appropriate events (pasteItem, drop, addItem). Value can be DROP_EVENT, MENU_EVENT or METHOD_CALL. If not specified a pasteItem event is generated. Optional. eventConstant Number Constant - A constant used to indicate and generate an ADD_ITEM or ADD_BRANCH event. Optional. cellIndex Number - The cellIndex that was pressed. Optional - Returns:Returns a reference to the item or an array of items. Same reference as selectedItem or selectedItems.
- Example:The example below prompts the user before any of the "pasting" events occur.
// overload pasteItem method to pop up an alert when dragging and dropping theDataGrid.pasteItemBackup = theDataGrid.pasteItem; theDataGrid.pasteItem = function (theSourceItem, theTargetItem, pastePosition, moveItem, eventSource, eventConstant, cellIndex) { // not sure why i can't get the label from the SourceItem // using selectedItem for now //trace("theSourceItem "+ theSourceItem["label"]) //var newObject = new Object(); //newObject.label = theSourceItem["label"]; // Note: this code and the code in this file are a rough example of what you can setup var theItemLabel:String = theDataGrid.selectedItem.label; var destLabel:String = theTargetItem.label var pasteAt:String = " after "; if (pastePosition == theDataGrid.PASTE_INTO) { pasteAt = " into "; } else if (pastePosition == theDataGrid.PASTE_AFTER) { pasteAt = " after "; } else if (pastePosition == theDataGrid.PASTE_BEFORE) { pasteAt = " before "; } myClickHandler = function (evt) { if (evt.detail == Alert.OK) { //trace("user clicked ok") theDataGrid.pasteItemBackup(theSourceItem, theTargetItem, pastePosition, moveItem, eventSource, eventConstant, cellIndex); } } // you can get more information to customize this text by using the eventSource and eventConstant function // for example, paste from context menu or drag and drop, copy or move, etc output = "Are you sure you want to move " + theItemLabel + pasteAt + destLabel+ "?"; var myAlert = Alert.show(output, "Confirm Move", Alert.OK | Alert.CANCEL, _root, myClickHandler, "stockIcon", Alert.OK); }; - See also:
permitContextMenu
public function permitContextMenu (
theItem,
theAction,
theMenuItem,
theContextMenu,
theCellIndex)
theAction,
theMenuItem,
theContextMenu,
theCellIndex)
A user defined function to display context menu items
A user defined function to show or hide context menu items on an item by item basis. This function is called when the menu is created and allows you to show or hide menu items based on the datagrid item and menu item being passed in. Be aware that the scope changes in this function. The default value returned by this function is true meaning all menu items are shown.
- Parameters:
theItem Object - The selected item theAction Number Constant - Reference to a static event variable if one is assigned such as (PASTE_INTO, PASTE_BEFORE, PASTE_AFTER, ADD_ITEM, etc). theMenuItem ContextMenu - Reference to the context menu theContextMenu Object - Reference to custom item object theCellIndex Number - The cell index - Returns:Boolean
- Example:The code below is the default code in the permitContextMenu function. The code hides the "Paste Into" menu item unless the item is a branch, preventing a user from pasting the copied item into another item.
theDataGrid.permitContextMenu = function (theItem, theAction, theMenuItem, theContextMenu, theCellIndex) { // "this" keyword does **NOT** reference the datagrid here because we are in a different scope // use the datagrid instance name directly // theDataGrid.PASTE_INTO is a static variable for paste into // if the action is to paste into then we allow it on branch items if (theAction==theDataGrid.PASTE_INTO) { // we are checking if the item we selected is a branch item // if true then we show the "paste into" menu item if (theDataGrid.getIsBranch(theItem)) { return true; } else { return false; } } return true; } // if we define this function we can use it to let the theDataGrid drop INTO another row // when a user is dragging over a row that is defined as a branch theDataGrid.getIsBranch = function(item){ var type = item.data; if (type=="folder") { return true; } return false; }
permitDropFunction
public function permitDropFunction (
theItem,
theTargetItem,
theAction,
theCellIndex)
theTargetItem,
theAction,
theCellIndex)
A user defined function to allow or prevent drop
A user defined function used to prevent or allow drop. This function is also used for visual feedback when the user is dragging over rows. This default value returned by this function is true. See permissions example.
- Parameters:
theItem Object - The selected item. theTargetItem Object - The target item. The item the mouse is over. theAction Number Constant - The current drag operation. This can be PASTE_INTO, PASTE_AFTER or PASTE_BEFORE. theCellIndex Number - A number indicating the cell index - Returns:Boolean
- Example:The example below prevents a user from dropping into anything but a branch item.
// add items to the datagrid // we set the arbitrary fileType property for use in icon function theDataGrid.addItem({label:".. ",data:"green",icon:"folder",fileType:"parentFolder"}); theDataGrid.addItem({label:"Folder 1",data:"red",icon:"folder",fileType:"folder"}); theDataGrid.addItem({label:"Folder 2",data:"red",icon:"folder",fileType:"folder"}); theDataGrid.addItem({label:"File 1",data:"blue",icon:"file",fileType:"file"}); theDataGrid.addItem({label:"File 2",data:"blue",icon:"file",fileType:"file"}); theDataGrid.addItem({label:"File 3",data:"blue",icon:"file",fileType:"file"}); // the permit drop function is used when dragging and dropping theDataGrid.permitDropFunction = function (theSourceItem, theTargetItem, theAction, theCellIndex) { // we are in a different scope. the keyword "this" references the dndDataGrid //trace("theSourceItem ="+theSourceItem.label); //trace("theTargetItem ="+theTargetItem.label); // we are checking if the item we are dragging over is a branch item // we have to define the getIsBranch method to enable dropping into an item. // if true then we can paste into it. if not then no pasty // we return false to prevent a drop from occuring // returning false also shows the "no drop" allowed icon if (this.getIsBranch(theTargetItem)) { // this.PASTE_INTO is a static variable for paste into // if the action is to paste into then we allow it if (theAction==this.PASTE_INTO) { return true; } } // if we are not dragging into the branch we do not allow it return false; } // define the getIsBranch function theDataGrid.getIsBranch = function(item) { // if the item has a property called isBranch and it is true if (item.fileType=="folder") { // this is branch return true; } return false; }
permitRemove
public function permitRemove (
obj,
menuItem,
menuCaption,
eventType,
cellIndex)
menuItem,
menuCaption,
eventType,
cellIndex)
A user defined function to allow a user to cut or remove an item
A user defined function to allow a user to cut or remove an item. You can define this function to pop up an alert prompt similar to windows explorer asking the user if they want to remove or cut the item or you can manually check the item and return false to cancel the operation. See permissions example.
- Parameters:
obj Object - The datagrid. menuItem Object - The menuItem. menuCaption String - The caption of the menu item. eventType String - The current event operation. This can be REMOVE_ITEM or CUT_ITEM. cellIndex Number - The cell index - Returns:Boolean Returns false to prevent cut or remove. Return true to continue cut or remove.
- Example:The example prompts the user before removing the selected item.
// import the alert contol - add to the library import mx.controls.Alert; // prompt user on remove event theDataGrid.permitRemove = function (theDataGrid, menuItem, menuCaption, eventType, cellIndex) { // BE CAREFUL of SCOPE ISSUES HERE var itemLabel = theDataGrid.selectedItem.label; var eventName = "cut"; var output = ""; // check if this is a remove event if (eventType == theDataGrid.REMOVE_ITEM) { eventName = "remove"; } myClickHandler = function (evt) { if (evt.detail == Alert.OK) { theDataGrid.cutItem(theDataGrid.selectedItems, theDataGrid.MENU_EVENT, eventType); } } output = "Are you sure you want to " + eventName + " " + itemLabel + "?"; var myAlert = Alert.show(output, "Confirm File Delete", Alert.OK | Alert.CANCEL, _root, myClickHandler, "stockIcon", Alert.OK); return false; }
permitRename
public function permitRename (
theItem,
cellIndex,
eventSource)
cellIndex,
eventSource)
A user defined function to allow rename on a item
A user defined function to show the rename/edit textfield on an item. This is different than the datagrid editable property. It is an alternative that might better suit your needs. If this function returns false then no rename textfield will be shown for the selected item. This is useful if you do not want to show a rename textfield on specific items such as the branch items. You can also show rename fields on specific cells. You would check the cell index to find the cell they pressed. You can change the "Rename Item" text in the context menu to "Edit Item" or something similar using the strRenameItem property. If you want to prevent the "Rename Item" in the context menu use permitContextMenu function.
- Parameters:
theItem Object - The selected item cellIndex Number - The cell index eventSource Number - Optional. Constant that refers to the source of the call. Typically datagrid.MENU_EVENT - Example:The example below prevents the rename label from showing unless the user clicked on the cell we defined as the rename cell.
theDataGrid.permitRename = function (theItem, cellIndex) { // we are in a different scope. the keyword "this" references the datagrid // check if user clicked on the first cell // the renameColumnIndex is the built in column index when you only have one column that can be renamed if (cellIndex==theDataGrid.renameColumnIndex)) { // show the rename text field for that cell only return true; } // uncomment the next two lines to enable the rename textfield on every cell //theDataGrid.renameColumnIndex = cellIndex; //return true; return false; } - See also:
removeClipboardItems
public function removeClipboardItems (
)
Removes items from copy and paste clipboard for this component
Removes items from copy and paste clipboard for this component.
renameFunction
public function renameFunction (
rowIndex,
cellIndex,
eventSource)
cellIndex,
eventSource)
Lets the user override the normal rename method
Lets the user override the normal rename method. You can use this function to override the default behavior.
- Parameters:
rowIndex Number - The row index cellIndex Number - The cell index eventSource Number - The event source. Either a MENU_EVENT or METHOD_CALL. Optional - Example:The code below is the default code
// The code below is the default code function renameFunction (rowIndex, cellIndex, eventSource) { // show the rename textfield showRenameItem(rowIndex, cellIndex, eventSource); }
setItemLabel
public function setItemLabel (
theItem: Object,
labelText: String,
originalText: String,
cellIndex: Number): String
labelText: String,
originalText: String,
cellIndex: Number): String
A method to call to set the item label
A method to call to set the item label on rename. If the labelFunction function is defined then when the user renames the item the new text is passed on to this method and the label can be set manually. If the labelField property is defined then the labelText string is applied to that. If neither of these two properties are defined then the new text is assigned to the item.label property. If you define the labelFunction and you want the rename feature to work you may need to redefine this function.
- Parameters:
theItem Object - The item that is being renamed. labelText String - The new text for the label. originalText String - The original text of the label. cellIndex Number - The cell index of the cell the user clicked. - Returns:String. A string of the new label text.
- Usage:myInstance.setItemLabel(theItem);
- Example:The default code for the setItemLabel is below.
function setItemLabel (theItem:Object, labelText:String, originalText:String, cellIndex:Number):String { var retVal; var cellName = this.columnNames[cellIndex]; // NOTE: User may need to redefine this function if they define the labelFunction theItem[cellName] = labelText; retVal = labelText; return retVal; }
showRenameItem
public function showRenameItem (
rowIndex: Number,
cellIndex: Number,
eventSource: Number)
cellIndex: Number,
eventSource: Number)
Shows renaming textfield over row cell
Shows a textfield over row cell that the user can type into to rename the item label. The enableRenameItem must be true for the textfield to show. The user can select to rename from the context menu or on double click or both. To prevent renaming on double click disable the renameOnDoubleClick property. To disable renaming on certain cells use the permitRename function. Set the renameColumnIndex to specify the cell to rename. To rename on any cell use the permitRename function. This is mostly an internal method. You can also use the datagrid.editable property to achieve the same effect. See Macromedia docs for more info.
- Parameters:
rowIndex Number The row index cellIndex Number The cell index eventSource Number The event source. Either a MENU_EVENT or a METHOD_CALL - Example:
// select the row theDataGrid.selectedIndex = 0; // show the rename text field on the first row first cell theDataGrid.showRenameItem(0,0);
- See also:
validateItemLabel
public function validateItemLabel (
newText: String,
renameTextField: TextField,
cellIndex: Number): Boolean
renameTextField: TextField,
cellIndex: Number): Boolean
Validates renamed item labels
Allows the developer to validate values entered when a user renames an item. By default this method lets the user enter anything except blank text. Return true to allow the item to be renamed. Return false to cancel the changes. This function is also used to resets the original value and highlight the text when the entered text is not valid.
- Parameters:
newText String - The item renameTextField TextField - The current rename textfield. cellIndex Number - The cell index - Example:The default code is shown below.
// this lets the user enter anything besides blank text theDataGrid.validateItemLabel = function(newText, renameTextField) { // check if new text user entered is blank if (newText=="") { // restore original text renameTextField.text = renameTextField.orgText; // reselect text and cancel commit Selection.setSelection(0, renameTextField.length); return false; } else { // new text is not blank. allow rename return true; } }
- dndDataGrid.as, Last Modified: 6/7/2006 10:46:56 PM