# inputEx - DDList Widget Usage

## Basic DDList Widget creation

Use the following code to create a basic inputEx DDList Widget

new inputEx.widget.DDList({ parentEl: 'container1', value: ["I was in first position !", "I'm second.", "Third element"] });

## Returned value

The returned value is an array

var list = new inputEx.widget.DDList({ parentEl: 'container2', value: ["I was in first position !", "I'm second.", "Third element"] }); var onUpdate = function() { YAHOO.util.Dom.get('container2').appendChild( inputEx.cn("div", null, null, "Value: ["+list.getValue()+"]") ); }; list.itemRemovedEvt.subscribe(onUpdate); list.listReorderedEvt.subscribe(onUpdate);

## Change returned value

By providing an object containing label and value attributes

var items= [ {label: "I was in first position !", value: 1}, {label: "I'm second.", value: 2}, {label: "Third element", value: 3} ]; var list = new inputEx.widget.DDList({parentEl: 'container3', value: items}); var onUpdate = function() { YAHOO.util.Dom.get('container3').appendChild( inputEx.cn("div", null, null, "Value: ["+list.getValue()+"]") ); }; list.itemRemovedEvt.subscribe(onUpdate); list.listReorderedEvt.subscribe(onUpdate);

## Numbered list

Display the item # by changing CSS style only :

new inputEx.widget.DDList({ id:'numberedList', parentEl: 'container4', value: ['I was in first position !', 'I\'m second.', 'Third element'] });

## itemRemoved Event

Use the following code to listen for the itemRemoved Event:

var list = new inputEx.widget.DDList({ parentEl: 'container5', value: ['I was in first position !', 'I\'m second.', 'Third element'] }); list.itemRemovedEvt.subscribe(function() { alert("removed !"); });

## listReordered Event

Use the following code to listen for the listReordered Event:

var list = new inputEx.widget.DDList({ parentEl: 'container6', value: ['I was in first position !', 'I\'m second.', 'Third element'] }); list.listReorderedEvt.subscribe(function() { alert("reordered !"); });

## Styling

Let's style the list !

var list = new inputEx.widget.DDList({ parentEl: 'container7', id: 'myList', value: ['I was in first position !', 'I\'m second.', 'Third element'] });

## Options

Same list without "remove" link

var list = new inputEx.widget.DDList({ parentEl: 'container8', id: 'myList', allowDelete: false, value: ['I was in first position !', 'I\'m second.', 'Third element'] });