cms_dual_tree

cms_table

Samples
API Reference
Styling & Controls
Dependences

Edit user assigned group list sample

jQuery code snippet:


// create cms_dual_tree
var uid = 'hesm'; // sample user id of Smith Helmut 
var sample_dual_tree = $("#sample-dual-tree").cms_dual_tree({
	api: ['http://' + window.location.host + '/cms/files/guide/jquery/api/grp/usr/' + uid,'http://' + window.location.host + '/cms/files/guide/jquery/api/grp/all']
});

// click button "Cancel"
$("#sample-grp-cancel").click(function(){
	alert("Cancel");
});
// click button "Save"
$("#sample-grp-save").click(function(){
	var data="[]"; // group code array
	var rootNode = $('.cms-selectbox-tree-1', sample_dual_tree).fancytree("getTree").getRootNode(); // get tree root node
	var els = rootNode.getChildren()[0].getChildren(); // get assigned groups tree nodes
	if (els!=null){ // in not empty list
		var grp = new Array();
		for (var i=1; i<=els.length; i++) grp.push(els[i-1].key); // push to group code array
		data = JSON.stringify(grp); // convert group code array into JSON
	}
	alert("Save JSON data: " + data); // show result
});

// create jQuery UI Tabs
$("#sample-tabs").tabs({
	collapsible: false,
	active: 0	
});

HTML code snippet:


<fieldset class="cms-form-fieldset">
	<legend class="cms-form-legend">Edit user assigned group list sample</legend>
	<table class="cms-selectbox" id="sample-dual-tree">
		<tr>
			<td><div class="cms-selectbox-tree-1" style="width: 300px; height: 350px"></div></td>
			<td style="width:100px" align="center">
				<table>
					<tr><td><div class="cms-selectbox-button-add"><a href="" title='Add selected groups. Same can be done with drag and drop'></a></div></td></tr>
					<tr><td><div class="cms-selectbox-button-rem"><a href="" title='Remove selected groups. Same can be done with drag and drop'></a></div></td></tr>
					<tr><td><div class="cms-selectbox-button-add-all"><a href="" title='Add all groups. Same can be done with drag and drop'></a></div></td></tr>
					<tr><td><div class="cms-selectbox-button-rem-all"><a href="" title='Remove all groups. Same can be done with drag and drop'></a></div></td></tr>
				</table>
			</td>
			<td><div class="cms-selectbox-tree-2" style="width: 300px; height: 350px"></div></td>
		</tr>
		<tr><td colspan="3"><img src="/skin/images/dot.gif" height="14px"></td></tr>
		<tr>
			<td colspan="3">
				<input type="submit" class="cms-form-submit" id="sample-grp-save" value="Save" title='Sample save'>
				<input type="submit" class="cms-form-submit" id="sample-grp-cancel" value="Cancel" title='Sample cancel'>
			</td>
		</tr>
	</table>
	<br>
</fieldset>

API URL: "/cms/files/guide/jquery/api/grp/usr/hesm" returns JSON data:


[{"key":"###TARGET###","title":"Assigned Groups","isFolder":true,"children":[{"key":"sample","title":"Sample role","icon":"user-group-icon.png"}]}]

API URL: "/cms/files/guide/jquery/api/grp/all" returns JSON data:


[{"key":"###SOURCE###","title":"All Groups","isFolder":true,"children":[{"key":"admin","title":"Administrator","icon":"user-group-icon.png"},{"key":"demo","title":"Demo","icon":"user-group-icon.png"},{"key":"sample","title":"Sample role","icon":"user-group-icon.png"}]}]

API URL page XML definitions in pages.xml file:


<doc><url>/grp/usr/:uid</url><method>GET</method><fnc>sample_class::usrGrp</fnc></doc>
<doc><url>/grp/all</url><method>GET</method><fnc>sample_class::grpAll</fnc></doc>

Full subsite (based on KUSoftas CMS) configuration and PHP code of sample RESTful API can be found in folder: /cms/files/guide/jquery/api (see using CMS tool "Files": http://www.kusoftas.com/cms/srv/admin/doc)

.cms_dual_tree()

Option	Method	Callback
images
icon
title
api
cms_path

.cms_dual_tree( [settings] )

Returns: cms_dual_tree()

Description: Plugin will create 2 trees: left side - target tree (dynatree object with 'cms-selectbox-tree-1' class); right side - source tree (dynatree object with 'cms-selectbox-tree-2' class). You can add/remove target tree items using source tree items. Items can be added/removed using:

Drag & drop
Buttons
Dblclick

Data can be loaded at the plugin intialization using API URL for left and right tree.
Data can be read using dynatree() object on left and right tree.

.cms_dual_tree( [settings] )

- settings
- Type: PlainObject
- A set of key/value pairs that configure cms_dual_tree() plugin. All settings are optional.
  - - images (default: '/cms/srv/admin/skin/images/')
    - Type: String
    - Folder path where is located dynatree node icon
  - - icon (default: 'user-group-icon.png')
    - Type: String
    - Default dynatree node icon file name
  - - title (default: 'Assigned Groups')
    - Type: String
    - Default left tree title (suitable when left tree represents new object)
  - - cms_path (default: '/cms/srv')
    - Type: String
    - Relative path to CMS software
  - - api (default: [])
    - Type: Array
    - Left and right tree data loading API URL

In general for styling you can use jQuery UI Theming

More detailed information about dynatree() styling you can find at site http://wwwendt.de/tech/dynatree/doc/dynatree-doc.html#h9

cms_dual_tree plugin has its own additional elements for styling and control:

class 'cms-selectbox-tree-1' - left side tree dynatree object
class 'cms-selectbox-tree-2' - right side tree dynatree object
class 'cms-selectbox-button-rem' - remove selected item/items from left tree button class
class 'cms-selectbox-button-add' - add selected item/items to left tree button class
class 'cms-selectbox-button-rem-all' - remove all items from left tree button class
class 'cms-selectbox-button-add-all' - add all items to left tree button class

Plugin cms_dual_tree depends on following jQuery packages:

User ID:
User Password: