TreeTag

Johannes Geppert edited this page Dec 6, 2016 · 2 revisions

Introduction

The tree tag is based on jsTree jQuery plugin.

To use this feature you need to copy the struts2-jquery-tree-plugin.jar into your WEB-INF/lib path or add it to your maven dependencies.

<dependencies>
    ...
    <dependency>
	<groupId>com.jgeppert.struts2.jquery</groupId>
	<artifactId>struts2-jquery-plugin</artifactId>
	<version>X.X.X</version>
    </dependency>
    <dependency>
	<groupId>com.jgeppert.struts2.jquery</groupId>
	<artifactId>struts2-jquery-tree-plugin</artifactId>
	<version>X.X.X</version>
    </dependency>
    ...
</dependencies>

Samples

A simple static tree component

<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjt" uri="/struts-jquery-tree-tags"%>
<sjt:tree id="treeStatic" jstreetheme="default" openAllOnLoad="true">
	<sjt:treeItem title="Struts2">
		<sjt:treeItem title="General">
			<sjt:treeItem title="Struts2" href="http://struts.apache.org"/>
			<sjt:treeItem title="Struts2 @ Facebook" href="https://www.facebook.com/apachestruts"/>
			<sjt:treeItem title="Struts2 @ Twitter" href="https://twitter.com/TheApacheStruts"/>
		</sjt:treeItem>
		<sjt:treeItem title="Plugins">
			<sjt:treeItem title="Struts2 Plugins" href="https://cwiki.apache.org/S2PLUGINS/home.html"/>
			<sjt:treeItem title="Struts2 jQuery Plugin" href="https://github.com/struts-community-plugins/struts2-jquery/"/>
			<sjt:treeItem title="Struts2 Bootstrap Plugin" href="https://github.com/struts-community-plugins/struts2-bootstrap/"/>
		</sjt:treeItem>
		<sjt:treeItem title="Blogs">
			<sjt:treeItem title="Struts2 jQuery News" href="http://www.jgeppert.com"/>
		</sjt:treeItem>
		<sjt:treeItem title="AJAX Links">
			<s:url var="ajax1" value="/ajax1.action"/>
			<sjt:treeItem title="Ajax 1" href="%{ajax1}" targets="result"/>
			<s:url var="ajax2" value="/ajax2.action"/>
			<sjt:treeItem title="Ajax 2" href="%{ajax2}" targets="result" effect="highlight" effectDuration="2500"/>
			<s:url var="ajax3" value="/ajax3.action"/>
			<sjt:treeItem title="Ajax 3" href="%{ajax3}" targets="result" onBeforeTopics="beforeLink"
			              onCompleteTopics="completeLink"/>
			<s:url var="ajax4" value="/ajax4.action"/>
			<sjt:treeItem title="Ajax 4" href="%{ajax4}" targets="result" effect="bounce" effectDuration="1000"/>
		</sjt:treeItem>
	</sjt:treeItem>
</sjt:tree>

<strong>Result div:</strong>

<div id="result" class="result ui-widget-content ui-corner-all">Click on the AJAX links above.</div>

Dynamic tree with AJAX links and contextmenu

<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjt" uri="/struts-jquery-tree-tags"%>
<s:url var="echo" value="/echo.action"/>
<sjt:tree
		id="treeDynamicAjax"
        jstreetheme="default-dark"
		rootNode="nodes"
		childCollectionProperty="childrens"
		nodeTitleProperty="text"
		nodeIdProperty="id"
		nodeHref="%{echo}"
		nodeHrefParamName="echo"
		nodeTargets="result2"
		contextmenu="{
    			items: { 
    				'create' : false,
    				'rename' : false,
    				'ccp' : false,
    				'remove' : { 
    					'label': 'Delete this Node', 
    					'action':  function (obj) {
    					    var ref = $('#treeDynamicAjax').jstree(true),
							    sel = ref.get_selected();
							if(!sel.length) { return false; }
							deleteTreeNode('%{echo}', sel);
							ref.delete_node(sel);
						}
    				} 
    			} 
    		}"
		/>

<strong>Result div:</strong>

<div id="result2" class="result ui-widget-content ui-corner-all">Click on the AJAX links above.</div>

Dynamic tree in form with checkboxes

<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjt" uri="/struts-jquery-tree-tags"%>
<s:form id="treeForm" action="echo" theme="simple">
	<sjt:tree
			name="echo"
			id="treeDynamicCheckboxes"
			rootNode="nodes"
			childCollectionProperty="childrens"
			nodeTitleProperty="text"
			nodeIdProperty="id"
			openAllOnLoad="true"
			checkbox="true"
			checkboxToogleAllTopics="toogleAllNodesTopic"
			checkboxShowTopics="showCheckboxesTopic"
			checkboxHideTopics="hideCheckboxesTopic"
            checkboxCheckAllTopics="checkAllCheckboxesTopic"
            checkboxUncheckAllTopics="uncheckAllCheckboxesTopic"
			onClickTopics="treeClicked"
            showThemeDots="false"
            showThemeIcons="false"
			/>
    <div>
        <sj:submit formIds="treeForm" targets="result3" button="true"/>
        <sj:submit onClickTopics="toogleAllNodesTopic" value="Toogle all Nodes" button="true"/>
        <sj:submit onClickTopics="showCheckboxesTopic" value="Show Checkboxes" button="true"/>
        <sj:submit onClickTopics="hideCheckboxesTopic" value="Hide Checkboxes" button="true"/>
        <sj:submit onClickTopics="checkAllCheckboxesTopic" value="Check all" button="true"/>
        <sj:submit onClickTopics="uncheckAllCheckboxesTopic" value="Uncheck all" button="true"/>
    </div>
</s:form>
<strong>Result Div :</strong>

<div id="result3" class="result ui-widget-content ui-corner-all">Click on the AJAX submit buttons above.</div>

Tree with types

<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjt" uri="/struts-jquery-tree-tags"%>
<s:set var="contextPath" value="#request.get('javax.servlet.forward.context_path')"/>
<sjt:tree
		id="treeTypes"
		jstreetheme="default"
		openAllOnLoad="true"
		types="{
            'root' : {
                'max_children' : 1,
                'max_depth' : 4,
                'icon' : '%{contextPath}/images/root.png',
                'valid_children' : [ 'folder', 'file' ]
            },
            'folder' : {
                'icon' : '%{contextPath}/images/folder.png',
                'valid_children' : [ 'folder', 'file' ]
            },
            'file' : {
                'icon' : '%{contextPath}/images/file.png',
                'valid_children' : [ ]
            }
		}">
	<sjt:treeItem title="Root" type="root">
		<sjt:treeItem title="Folder One" type="folder">
			<sjt:treeItem title="File One" type="file"/>
			<sjt:treeItem title="File Two" type="file"/>
		</sjt:treeItem>
		<sjt:treeItem title="Folder Two" type="folder">
			<sjt:treeItem title="Folder Three" type="folder">
				<sjt:treeItem title="File Four" type="file"/>
			</sjt:treeItem>
			<sjt:treeItem title="File Three" type="file"/>
		</sjt:treeItem>
	</sjt:treeItem>
</sjt:tree>

Tree with search plugin

<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjt" uri="/struts-jquery-tree-tags"%>
<s:set var="contextPath" value="#request.get('javax.servlet.forward.context_path')"/>
<sjt:tree
		id="treeTypes"
		jstreetheme="default"
		openAllOnLoad="true"
		types="{
            'root' : {
                'max_children' : 1,
                'max_depth' : 4,
                'icon' : '%{contextPath}/images/root.png',
                'valid_children' : [ 'folder', 'file' ]
            },
            'folder' : {
                'icon' : '%{contextPath}/images/folder.png',
                'valid_children' : [ 'folder', 'file' ]
            },
            'file' : {
                'icon' : '%{contextPath}/images/file.png',
                'valid_children' : [ ]
            }
		}">
	<sjt:treeItem title="Root" type="root">
		<sjt:treeItem title="Folder One" type="folder">
			<sjt:treeItem title="File One" type="file"/>
			<sjt:treeItem title="File Two" type="file"/>
		</sjt:treeItem>
		<sjt:treeItem title="Folder Two" type="folder">
			<sjt:treeItem title="Folder Three" type="folder">
				<sjt:treeItem title="File Four" type="file"/>
			</sjt:treeItem>
			<sjt:treeItem title="File Three" type="file"/>
		</sjt:treeItem>
	</sjt:treeItem>
</sjt:tree>

A tree component with a JSON data source

JSP Code

<%@ taglib prefix="sj" uri="/struts-jquery-tags"%>
<%@ taglib prefix="sjt" uri="/struts-jquery-tree-tags"%>
<s:url var="treeDataUrl" action="json-tree-data" namespace="/tree"/>
<s:url var="echo" value="/echo.action"/>
<sjt:tree
		id="jsonTree"
		href="%{treeDataUrl}"
		nodeHref="%{echo}"
		nodeHrefParamName="echo"
		nodeTargets="result"
		onClickTopics="treeClicked"
/>
<div id="result" class="result ui-widget-content ui-corner-all">Click on the AJAX links above.</div>

Struts2 Java Action Code

@Actions({@Action(value = "/json-tree-data", results = {@Result(name = "success", type = "json", params = {
        "root", "nodes"})})})
public class JsonTreeData extends ActionSupport implements ServletContextAware {

    private static final long serialVersionUID = -2886756982077980790L;
    private List<TreeNode> nodes = new ArrayList<TreeNode>();
    private String id = "";
    private ServletContext servletContext;

    public String execute() {

        TreeNode nodeA = new TreeNode();
        nodeA.setId("A" + id);
        nodeA.getState().setOpened(false);
        nodeA.setHasChildren(true);
        nodeA.setText("Node A" + id);
        nodeA.setIcon(servletContext.getContextPath() + "/images/root.png");

        TreeNode nodeB = new TreeNode();
        nodeB.setId("B" + id);
        nodeB.getState().setOpened(true);
        nodeB.setIcon(servletContext.getContextPath() + "/images/folder.png");
        nodeB.setText("Node B" + id);

        TreeNode nodeB1 = new TreeNode();
        nodeB1.setId("B1" + id);
        nodeB1.setIcon(servletContext.getContextPath() + "/images/file.png");
        nodeB1.setText("Node B1" + id);
        nodeB.getChildrens().add(nodeB1);

        TreeNode nodeB2 = new TreeNode();
        nodeB2.setId("B2" + id);
        nodeB2.getState().setDisabled(true);
        nodeB2.setIcon(servletContext.getContextPath() + "/images/file.png");
        nodeB2.setText("Node B2" + id);
        nodeB.getChildrens().add(nodeB2);

        TreeNode nodeC = new TreeNode();
        nodeC.setId("C" + id);
        nodeC.setText("Node C" + id);
        nodeC.setIcon(servletContext.getContextPath() + "/images/folder.png");
        nodeC.setHasChildren(true);

        nodes.add(nodeA);
        nodes.add(nodeB);
        nodes.add(nodeC);

        return SUCCESS;
    }

    public String getJSON() {
        return execute();
    }

    public List<TreeNode> getNodes() {
        return nodes;
    }

    public void setId(String id) {
        this.id = id;
    }

    public void setServletContext(ServletContext servletContext) {
        this.servletContext = servletContext;
    }
}

Attributes

Name

Required

Default

Evaluated

Type

Description

accesskey false false String Set the html accesskey attribute on rendered html element
animation false 500 false Number Defines the duration of open/close animations. 0 means no animation.
bindOn false false String Bind the start of load or effect on element. e.g. button or link
checkbox false false false Boolean Makes multiselection possible using three-state checkboxes.
checkboxCheckAllTopics false false String A comma delimited list of topics to check all nodes.
checkboxHideTopics false false String A comma delimited list of topics to hide checkboxes.
checkboxShowTopics false false String A comma delimited list of topics to show checkboxes.
checkboxTwoState false false false Boolean If set to true checkboxes will be two-state only, meaning that you will be able to select parent and children independently and there will be no undetermined state.
checkboxUncheckAllTopics false false String A comma delimited list of topics to uncheck all nodes.
childCollectionProperty false false String The childCollectionProperty property.
contextmenu false false String Expects an JavaScript object or a function, which should return an JavaScript object. e.g. {items: { 'delete' : { 'label': 'Delete Node', 'action': function (obj) { this.delete(obj); } } } }
cssClass false false String The css class to use for element
cssErrorClass false false String The css error class to use for element
cssErrorStyle false false String The css error style definitions for element to use
cssStyle false false String The css style definitions for element to use
dataType false false String Type of the result. e.g. html, xml, text, json, ...
deferredLoading false false false Boolean Defers the initial loading of this element. The element will not be loaded until one of the reloadTopics is published.
disabled false false String Set the html disabled attribute on rendered html element
draggable false false String Enable draggable functionality to the DIV element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.
draggableAddClasses false false Boolean If set to false, will prevent the ui-draggable class from being added. This may be desired as a performance optimization when calling draggable init on many hundreds of elements. Default: true
draggableAppendTo false false String The element passed to or selected by the appendTo option will be used as the draggable helper's container during dragging. By default, the helper is appended to the same container as the draggable. Default: parent
draggableAxis false false String Constrains dragging to either the horizontal (x) or vertical (y) axis. Possible values: x or y.
draggableCancel false false String Prevents dragging from starting on specified elements.
draggableContainment false false String Constrains dragging to within the bounds of the specified element or region. Possible string values: parent, document, window, [x1, y1, x2, y2].
draggableCursor false false String The css cursor during the drag operation.
draggableDelay false false String Time in milliseconds after mousedown until dragging should start. This option can be used to prevent unwanted drags when clicking on an element.
draggableDistance false false String Distance in pixels after mousedown the mouse must move before dragging should start. This option can be used to prevent unwanted drags when clicking on an element.
draggableHandle false false String If specified, restricts drag start click to the specified element(s). e.g. h2
draggableHelper false false String Allows for a helper element to be used for dragging display. Possible values: original, clone. Default is original
draggableIframeFix false false Boolean Prevent iframes from capturing the mousemove events during a drag. Useful in combination with cursorAt, or in any case, if the mouse cursor is not over the helper. If set to true, transparent overlays will be placed over all iframes on the page. If a selector is supplied, the matched iframes will have an overlay placed over them. Default: false
draggableOnDragTopics false false String This event javascript function is triggered when the mouse is moved during the dragging.
draggableOnStartTopics false false String This event javascript function is triggered when dragging starts.
draggableOnStopTopics false false String This event javascript function is triggered when dragging stops.
draggableOpacity false false String Opacity for the helper while being dragged. e.g. 0.75
draggableRefreshPositions false false Boolean If set to true, all droppable positions are calculated on every mousemove. Caution: This solves issues on highly dynamic pages, but dramatically decreases performance. Default: false
draggableRevert false false String If set to true, the element will return to its start position when dragging stops. e.g. true, valid, invalid Default: false
draggableRevertDuration false false String The duration of the revert animation, in milliseconds. Ignored if revert is false.
draggableScope false false String Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted by the droppable.
draggableScroll false false Boolean If set to true, container auto-scrolls while dragging.
draggableScrollSensitivity false false String Distance in pixels from the edge of the viewport after which the viewport should scroll. Distance is relative to pointer, not the draggable. Default: 20
draggableScrollSpeed false false String The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance. Default: 20
draggableSnap false false Boolean If set to true, the draggable will snap to the edges of the selected elements when near an edge of the element. Default: false
draggableSnapMode false false String Determines which edges of snap elements the draggable will snap to. Ignored if snap is false. Possible values: inner, outer, both. Default: both
draggableSnapTolerance false false String The distance in pixels from the snap element edges at which snapping should occur. Ignored if snap is false. Default: 20
draggableZindex false false String z-index for the helper while being dragged.
droppable false false String Enable any DIV element to be droppable, a target for draggable elements.
droppableAccept false false String All draggables that match the jQuery selector will be accepted. e.g. #myid or .myclass
droppableActiveClass false false String If specified, the class will be added to the droppable while an acceptable draggable is being dragged.
droppableAddClasses false true false String If set to false, will prevent the ui-droppable class from being added. This may be desired as a performance optimization when calling droppable init on many hundreds of elements. Default: true
droppableGreedy false false false String If true, will prevent event propagation on nested droppables. Default: false
droppableHoverClass false false String If specified, the class will be added to the droppable while an acceptable draggable is being hovered.
droppableOnActivateTopics false false String This event javascript function is triggered any time an accepted draggable starts dragging. This can be useful if you want to make the droppable 'light up' when it can be dropped on.
droppableOnDeactivateTopics false false String This event javascript function is triggered any time an accepted draggable stops dragging.
droppableOnDropTopics false false String This event javascript function is triggered when an accepted draggable is dropped 'over' this droppable.
droppableOnOutTopics false false String This event javascript function is triggered when an accepted draggable is dragged 'out' this droppable.
droppableOnOverTopics false false String This event javascript function is triggered as an accepted draggable is dragged 'over' this droppable.
droppableScope false false String Used to group sets of draggable and droppable items, in addition to droppable's accept option. A draggable with the same scope value as a droppable will be accepted.
droppableTolerance false false String Specifies which mode to use for testing whether a draggable is over a droppable. Possible values: fit, intersect, pointer, touch.
effect false none false String Perform a effect on the elements specified in the 'targets' attribute. e.g. bounce, highlight, pulsate, shake, size or transfer. See more details at http://docs.jquery.com/UI/Effects
effectDuration false 2000 false String Duration of effect in milliseconds. Only valid if 'effect' attribute is set
effectMode false none false String The Effect Mode. show, hide, toggle, none
effectOptions false false String jQuery options for effect, eg 'color : #aaaaaa' for the highlight effect or 'times : 3' for the bounce effect. Only valid if 'effect' attribute is set. See more details at http://docs.jquery.com/UI/Effects
errorElementId false false false String This should provide the id of the element into which the error text will be placed when an error ocurrs loading the container. If 'errorTest' is provided, that wil be used, otherwise the ajax error message text wil be used.
errorPosition false false String Define error position of form element (top|bottom)
errorText false false false String The text to be displayed on load error. If 'errorElement' is provided, this will display the error in the elemtn (if existing), if not, it will display the error as the contents of this container
events false click false String Start load or effect on specified event. Possible values are click, dblclick, mouseover, mouseenter, mouseleave. Default: click
formIds false false String Comma delimited list of form ids for which to serialize all fields during submission when this element is clicked (if multiple forms have overlapping element names, it is indeterminate which will be used)
href false false String Url used to load the list of children nodes for an specific node, whose id will be passed as a parameter named 'nodeId' (empty for root)
htmlTitles false false false Boolean Defines whether titles can contain HTML code.
id false false String HTML id attribute
indicator false false String If loading content into a target, Id of element that will be displayed during loading and hidden afterwards (will override settings for the target container)
initiallyOpen false [] false String Defines which nodes are to be automatically opened when the tree finishes loading - a list of IDs is expected. eg.: ['id1', 'id2']
javascriptTooltip false false false Boolean Use JavaScript to generate tooltips
jstreetheme false theme from jquery ui false String jstree theme. default, default-rtl, classic or apple
key false false String Set the key (name, value, label) for this particular component
label false false String Label expression used for rendering an element specific label
labelSeparator false : false String String that will be appended to the label
labelposition false false String Define label position of form element (top/left)
listenTopics false false String The comma separated list 'listenTopics' is the list of topic names that is used to trigger a request.
loadingText false false String If loading content into a target, The text to be displayed during load (will be shown if any provided, will override settings for the target container)
name false false String The name to set for element
nodeHref false false String The href property for node.
nodeHrefParamName false id false String The href parameter name for node link.
nodeIdProperty false false String The nodeIdProperty property.
nodeTargets false false String AJAX targets for node items.
nodeTitleProperty false false String The nodeTitleProperty property.
nodeTypeProperty false false String The type property for node. This needs a valid types definition.
onAfterValidationTopics false false String A comma delimited list of topics that published after the Ajax validation. event.originalEvent.formvalidate to see if validation passed/failed.
onAlwaysTopics false false String A comma delimited list of topics that published always
onBeforeTopics false false String Topics that are published before a load
onBlurTopics false false String A comma delimited list of topics that published when the element is blured
onChangeTopics false false String A comma delimited list of topics that published when the element changed
onClickTopics false false String A comma delimited list of topics that published when the tree item is clicked
onCompleteTopics false false String Topics that are published before after load is completed
onDisableTopics false false String A comma delimited list of topics that published when the element disabled
onEffectCompleteTopics false false String A comma delimited list of topics that published when an effect is completed
onEnableTopics false false String A comma delimited list of topics that published when the element is enabled
onErrorTopics false false String Topics that are published on a load error
onFocusTopics false false String A comma delimited list of topics that published when the element is focused
onSuccessTopics false false String Topics that are published after a succesful load
onblur false false String Set the html onblur attribute on rendered html element
onchange false false String Set the html onchange attribute on rendered html element
onclick false false String Set the html onclick attribute on rendered html element
ondblclick false false String Set the html ondblclick attribute on rendered html element
onfocus false false String Set the html onfocus attribute on rendered html element
onkeydown false false String Set the html onkeydown attribute on rendered html element
onkeypress false false String Set the html onkeypress attribute on rendered html element
onkeyup false false String Set the html onkeyup attribute on rendered html element
onmousedown false false String Set the html onmousedown attribute on rendered html element
onmousemove false false String Set the html onmousemove attribute on rendered html element
onmouseout false false String Set the html onmouseout attribute on rendered html element
onmouseover false false String Set the html onmouseover attribute on rendered html element
onmouseup false false String Set the html onmouseup attribute on rendered html element
onselect false false String Set the html onselect attribute on rendered html element
openAllOnLoad false false false Boolean Open all Nodes on load.
openAllOnRefresh false false false Boolean Open all Nodes on refresh.
openTemplate false false String Set template to use for opening the rendered html.
reloadTopics false false String A comma delimited list of topics that will cause this element to reload
requestType false POST false String Type of the AJAX Request. POST, GET, PUT
requiredLabel false false false Boolean If set to true, the rendered element will indicate that input is required
requiredPosition false false String Define required position of required form element (left|right)
resizable false false Boolean Enable this div element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.
resizableAnimate false false Boolean Animates to the final size after resizing. Default: false
resizableAnimateDuration false false String Duration time for animating, in milliseconds.
resizableAnimateEasing false false String Easing effect for animating. Default: swing
resizableAspectRatio false false Boolean If set to true, resizing is constrained by the original aspect ratio. Default: false
resizableAutoHide false false Boolean If set to true, automatically hides the handles except when the mouse hovers over the element. Default: false
resizableContainment false false String Constrains resizing to within the bounds of the specified element. Possible values: 'parent', 'document' or an id
resizableDelay false false String Tolerance, in milliseconds, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond duration. This can help prevent unintended resizing when clicking on an element.
resizableDistance false false String Tolerance, in pixels, for when resizing should start. If specified, resizing will not start until after mouse is moved beyond distance. This can help prevent unintended resizing when clicking on an element.
resizableGhost false false Boolean If set to true, a semi-transparent helper element is shown for resizing. Default: false
resizableHandles false false String If specified as a string, should be a comma-split list of any of the following: 'n, e, s, w, ne, se, sw, nw, all'. Default: e, s, se
resizableHelper false false String This is the css class that will be added to a proxy element to outline the resize during the drag of the resize handle. Once the resize is complete, the original element is sized. e.g. ui-state-highlight
resizableMaxHeight false false String This is the maximum height the resizable should be allowed to resize to.
resizableMaxWidth false false String This is the maximum width the resizable should be allowed to resize to.
resizableMinHeight false false String This is the minimum height the resizable should be allowed to resize to.
resizableMinWidth false false String This is the minimum width the resizable should be allowed to resize to.
resizableOnResizeTopics false false String This event javascript function is triggered during the resize, on the drag of the resize handler.
resizableOnStartTopics false false String This event javascript function is triggered at the start of a resize operation.
resizableOnStopTopics false false String This event javascript function is triggered at the end of a resize operation.
rootNode false false String The rootNode property.
rtl false false false Boolean Defines whether the tree is in right-to-left mode (also make sure you are using a RTL theme - for example the included default-rtl).
selectable false false Boolean Enable a element to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections.
selectableAutoRefresh false false String This determines whether to refresh (recalculate) the position and size of each selectee at the beginning of each select operation. If you have many many items, you may want to set this to false and call the refresh method manually. Default: true
selectableCancel false false String Prevents selecting if you start on elements matching the selector. Default: ':input,option'
selectableDelay false false String Time in milliseconds to define when the selecting should start. It helps preventing unwanted selections when clicking on an element.
selectableDistance false false String Tolerance, in pixels, for when selecting should start. If specified, selecting will not start until after mouse is dragged beyond distance.
selectableFilter false false String The matching child elements will be made selectees (able to be selected). Default: '*'
selectableOnSelectedTopics false false String This event is triggered at the end of the select operation, on each element added to the selection.
selectableOnSelectingTopics false false String This event is triggered during the select operation, on each element added to the selection.
selectableOnStartTopics false false String This event is triggered at the beginning of the select operation.
selectableOnStopTopics false false String This event is triggered at the end of the select operation.
selectableOnUnselectedTopics false false String This event is triggered at the end of the select operation, on each element removed from the selection.
selectableOnUnselectingTopics false false String This event is triggered during the select operation, on each element removed from the selection.
selectableTolerance false false String Possible values: 'touch', 'fit'. Default: 'touch'
showThemeDots false true false Boolean Whether to show the connecting dots or not.
showThemeIcons false true false Boolean Whether to show the node icons or not.
sortable false false Boolean Enable a elements to be sortable
sortableAppendTo false false String Defines where the helper that moves with the mouse is being appended to during the drag. Default: 'parent'
sortableAxis false false String If defined, the items can be dragged only horizontally or vertically. Possible values:'x', 'y'.
sortableCancel false false String Prevents sorting if you start on elements matching the selector. Default: ':input,button'
sortableConnectWith false false String Takes a jQuery selector with items that also have sortables applied. If used, the sortable is now connected to the other one-way, so you can drag from this sortable to the other. e.g. #myothersortable or .myothersortables
sortableContainment false false String Constrains dragging to within the bounds of the specified element - can be a DOM element, 'parent', 'document', 'window', or a jQuery selector.
sortableCursor false false String Defines the cursor that is being shown while sorting.
sortableCursorAt false false String Moves the sorting element or helper so the cursor always appears to drag from the same position. Coordinates can be given as a hash using a combination of one or two keys: top, left, right, bottom.
sortableDelay false false String Time in milliseconds to define when the sorting should start. It helps preventing unwanted drags when clicking on an element.
sortableDistance false false String Tolerance, in pixels, for when sorting should start. If specified, sorting will not start until after mouse is dragged beyond distance. Can be used to allow for clicks on elements within a handle.
sortableDropOnEmpty false false Boolean If empty allows for an item to be dropped from a linked selectable. Default: true
sortableForceHelperSize false false Boolean If true, forces the helper to have a size. Default: false
sortableForcePlaceholderSize false false Boolean If true, forces the placeholder to have a size. Default: false
sortableGrid false false String Snaps the sorting element or helper to a grid, every x and y pixels. Array values: [x, y]
sortableHandle false false String Restricts sort start click to the specified element.
sortableHelper false false String Allows for a helper element to be used for dragging display. The supplied function receives the event and the element being sorted, and should return a DOMElement to be used as a custom proxy helper. Possible values: 'original', 'clone'. Default: 'original'
sortableItems false false String Specifies which items inside the element should be sortable. Default: '> *'
sortableOnActivateTopics false false String This event is triggered when using connected lists, every connected list on drag start receives it.
sortableOnBeforeStopTopics false false String This event is triggered when sorting stops, but when the placeholder/helper is still available.
sortableOnChangeTopics false false String This event is triggered during sorting, but only when the DOM position has changed.
sortableOnDeactivateTopics false false String This event is triggered when sorting was stopped, is propagated to all possible connected lists.
sortableOnOutTopics false false String This event is triggered when a sortable item is moved away from a connected list.
sortableOnOverTopics false false String This event is triggered when a sortable item is moved into a connected list.
sortableOnReceiveTopics false false String This event is triggered when a connected sortable list has received an item from another list.
sortableOnRemoveTopics false false String This event is triggered when a sortable item has been dragged out from the list and into another.
sortableOnSortTopics false false String This event is triggered during sorting.
sortableOnStartTopics false false String This event is triggered when sorting starts.
sortableOnStopTopics false false String This event is triggered when sorting has stopped.
sortableOnUpdateTopics false false String This event is triggered when the user stopped sorting and the DOM position has changed.
sortableOpacity false false String Defines the opacity of the helper while sorting. From 0.01 to 1
sortablePlaceholder false false String Class that gets applied to the otherwise white space.
sortableRevert false false Boolean If set to true, the item will be reverted to its new DOM position with a smooth animation. Default: false
sortableScroll false false Boolean If set to true, the page scrolls when coming to an edge. Default: true
sortableScrollSensitivity false false String Defines how near the mouse must be to an edge to start scrolling. Default: 20
sortableScrollSpeed false false String The speed at which the window should scroll once the mouse pointer gets within the scrollSensitivity distance. Default: 20
sortableTolerance false false String This is the way the reordering behaves during drag. Possible values: 'intersect', 'pointer'. In some setups, 'pointer' is more natural. Default: 'intersect'
sortableZindex false false String Z-index for element/helper while being sorted. Default: 1000
tabindex false false String Set the html tabindex attribute on rendered html element
targets false false String A comma separated list of ids of container elements to load with the contents from the result of this request
template false false String The template (other than default) to use for rendering the element
templateDir false false String The template directory.
timeout false 3000 false Integer jQuery options for timeout. Default is 3000
title false false String Set the html title attribute on rendered html element
tooltip false false String Set the tooltip of this particular component
tooltipConfig false false String Deprecated. Use individual tooltip configuration attributes instead.
tooltipCssClass false StrutsTTClassic false String CSS class applied to JavaScrip tooltips
tooltipDelay false Classic false String Delay in milliseconds, before showing JavaScript tooltips
tooltipIconPath false false String Icon path used for image that will have the tooltip
types false false String The types enables node types - each node can have a type, and you can define rules on how that type should behave - maximum children count, maximum depth, valid children types, selectable or not, etc.
value false false String Preset the value of input element.
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.