Since 4.3
A widget with rich selection possibilities for moving items between two lists.
The Double List widget is based on Webix Layout. It includes two lists that contain sets of data items. Customizable buttons placed between the lists allow the user to select items in one list and drag-n-drop them to the other one.
Check DoubleList documentation for more details.
var double_list = webix.ui({
view:"dbllist",
value:"1,2",
data:[
{id:"1", value:"Guest"},
{id:"2", value:"Member"},
{id:"3", value:"Moderator"}
]
});
| adjust | adjusts the component to the size of the parent HTML container |
| attachEvent | attaches the handler to an inner event of the component |
| bind | binds components |
| blockEvent | temporarily blocks triggering of ALL events of the calling object |
| callEvent | calls an inner event |
| define | redefines a single configuration property (or a object with properties) |
| destructor | destructs the calling object |
| detachEvent | detaches a handler from an event (which was attached before by the attachEvent method) |
| disable | disables the calling view (makes it dimmed and unclickable) |
| enable | enables the calling view that was disabled by the 'disable' method |
| focus | sets focus to the widget |
| getChildViews | returns child views of the calling component |
| getFormView | returns master form for the input |
| getNode | returns the main HTML container for the calling object |
| getParentView | returns the parent view of the component |
| getTopParentView | returns the top parent view |
| getValue | returns the ids of the selected items (items of the right list) |
| hasEvent | checks whether the component has the specified event handler |
| hide | hides the view |
| innerId | returns the inner ID of an item by its public (real) ID |
| isEnabled | checks whether the view is enabled |
| isVisible | checks whether the view is visible |
| load | loads data from an external data source |
| mapEvent | routes events from one object to another |
| parse | loads data to the component from an inline data source |
| queryView | returns inner element/elements of a widget that correspond(s) to the defined parameters |
| resize | adjusts the view to a new size |
| select | selects the specified items (moves them to the right list) or unselects them |
| setValue | specifies the item(s) that should be selected |
| show | makes the component visible |
| ui | allows creating a new UI, the ID of which will be locked in the parent ID space |
| unbind | breaks "bind" link |
| unblockEvent | cancels events blocking that was enabled by the 'blockEvent' command |
| onAfterLoad | fires after data loading is complete |
| onBeforeLoad | fires immediately before data loading has started |
| onBindRequest | fires when the component is ready to receive data from the master component |
| onChange | fires on changes in the DoubleList |
| onDestruct | occurs when component destroyed |
| onLoadError | fires when an error occurs during data loading (invalid server side response) |
| onViewShow | fires when any hidden view is shown |
| animate | defines the type of animation, with which the view is shown, if it is a Multiview cell |
| borderless | used to hide the component borders |
| buttons | sets a custom template for buttons or hides them |
| container | an HTML container (or its ID) where the component should be initialized |
| css | the name of the CSS class or the object with styles that will be applied to the view container |
| data | JavaScript array containing data for the component |
| datatype | the type of loaded data |
| disabled | indicates whether an item is enabled |
| gravity | sets the view gravity |
| height | sets the height of the component |
| hidden | defines whether the view will be hidden initially |
| id | the ID of a widget |
| labelBottomLeft | sets a label for the left list at the bottom |
| labelBottomRight | sets a label for the right list at the bottom |
| labelLeft | sets a label for the left list |
| labelRight | sets a label for the right list |
| list | sets the configuration of lists in the Double List widget |
| maxHeight | sets the maximum height for the view |
| maxWidth | sets the maximum width for the view |
| minHeight | sets the minimal height for the view |
| minWidth | sets the minimal width for the view |
| on | allows attaching custom handlers to inner events of the component |
| padding | defines the space between the element borders and content (applies the specified value to all sides). |
| paddingX | sets the right and left padding (applies the specified value to both sides) |
| paddingY | sets the top and bottom padding (applies the specified value to both sides) |
| type | defines the layout borders |
| url | the URL which the component will use to load data after its initialization |
| value | sets the ids of items that should be initially selected (moved to the right list) |
| width | sets the width of a widget |
| $$ | locates sub-item by id |
| $getSize | returns the current size of the component |
| $height | the current height of the view |
| $onLoad | default action on data loading |
| $setNode | defines HTML element for the component |
| $setSize | sets the component size |
| $skin | the method which will be called when skin is defined |
| $view | reference to the top HTML element of the view |
| $width | the current width of the view |
| config | all options from the initial component configuration |
| name | indicates the name of the component (a read-only property) |