FlexTree Documentation

Properties

string default:"Id"

The name of the Id field of each item in the tree.

string default:"Pid"

The name of the Pid field of each item in the tree. Hierarchical data feeded to FlexTree must have an Id/Pid relationship.

string default:"Label"

The name of the item property that holds the title of the item.

bool default:true

Whether to display hierarchy lines that helps lining out the hierarchy.

number default:30

This property is ONLY relevant if showHierarchyLines=false, in which case hierarchyIndentation is the horizontal space (in pixels) that each child level will be indented. Note that hierarchyIndentation is also used in Sortable for defining active zones for last siblings - if setting hierarchyIndentation to null, some edge cases of Sortable will not work properly.

bool default:true

Whether the user can hide & show sub hierarchies. If canToogle:false, then the hierarchy will not show any icons enabling the user to toggle sub hieararchies (you can still programmatically toggle sub hierarchies though).

var default:false

Possible values are: false | "localStorage" | "sessionStorage" | "cookie". If the browser does not support then localStorage & sessionStorage will automatically change to cookie. Note that this property will only work if the UL, that the FlexTree is based upon, have an ID.

string default:"SortOrder"

Items can be sortordered within their parent (2 items can have the same sortorder if they belong to different parents)

bool default:true

.

CssClass default:null

Then dragging an item, FlexTree will dynamically create a placeholder indicating from where the item was dragged - sortStartPlaceholderCssClass is a css class by which you can style that placeholder (then dragging is finished, this placeholder will be removed).

CssClass default:null

Then dragging an item, Flextree will create a hint indicating where the dragged item will be placed if you were to drop the item. If you set the sortHint="placeholder" (default), then the sortMovingPlaceholderCssClass will style that hint. Then sorting if you do NOT set the sortPlaceholder property, FlexTree will make a little space notifying there the item to move is about to be dropped. If you DO set this css class, then you can specify yourself how this notification drop-place should look like..

CssClass default:null

Will style the item that you are dragging. Typically you will only want to set the background-color style. Some styles, eg. width will be overwritten.

bool default:true

This property is relevant only if the canSort property is true.

The hasSortHandle property specifies whether to display a sorthandle image (image is base64 embedded into the FlexTree code). If showing the handle, then only the handle can drag the item. If not showing the handle (hasSortHandle:false), then all parts of the item (title, custom content & hierarchy lines) can drag.

number default:50

Then draggin an item over another item, the sortSiblingZone property specifies whether to make the dragged item a sibling OR a child of the hovered item beneath.

If setting the sortSiblingZone property to 50, it means that if your mouse is less than 50 pixels from the left border of the hovered item, the dragged item will become a sibling, while if the mouse is more than 50 pixels from the left border of the hovered item, the dragged item will become a child.

string default:true

If set to false, it is not possible to drop items in the root of the list (and also the root direct childs cannot be sorted relative to each other, though they can be (if canSort is true on these items) be dragged to somewhere else)

bool default:"placeholder" | "pointer"

Then draggin an item, FlexTree will show a hint where the item is about to be dropped. This hint can be either a "placeholder" (integrated into the tree) or a "pointer" (floating outside of the tree).

string default:null

Any item with this class will not allow item to be dragged onto as children (if you are used to work with jQuery Sortable, note that this is different as jQuery Sortable will disable allowing siblings, while FlexTree will disable allowing children). This property is NOT inherited by children, so if you have an item that does not allow items to be dragged onto as children, the item can still initially have children and these children would allow items to be dragged onto as children (if you want to disable dragging onto for a whole branch - ALL items i that branch must have this css class)

string default:null

If you set sortHint='pointer', you can use pointerHintCssClass to create your custom pointer. If you do not create a custom pointer, FlexTree will use an internal cssClass. Do NOT set the following styles in your cssClass: display, position, top, left (these styles are required to be set by FlexTree for internal workings)

API

showNode(item)

hideNode(item)