A context menu.
The component presents a pop-up menu that is displayed when the user clicks the right mouse button in the client area. You can configure any nesting level complexity. Check contextmenu documentation for more detailed description.
HTML .
<!--Right click the area-->
<div id="areaA" style=" background-color:#ffffbb; width:500px; height:300px;"></div>
JS .
var contextmenu = webix.ui({
view:"contextmenu",
data:[
{ value:"Translate...", submenu:[
"English",
"Slavic",
"German"
]},
{ value:"Info" }
],
master:"areaA"
});
| add | adds an item to the store |
| addCss | applied CSS class to a component item |
| adjust | adjusts the component to the size of the parent HTML container |
| attachEvent | attaches the handler to an inner event of the component |
| attachTo | attaches a context menu to a Webix component |
| bind | binds components |
| blockEvent | temporarily blocks triggering of ALL events of the calling object |
| callEvent | calls an inner event |
| clearAll | removes all items from the component |
| clearCss | removes CSS class from all items |
| clearValidation | removes all validation marks from the component |
| copy | copies an item to the same or another object |
| count | returns the number of currently visible items |
| customize | redefines the "type" property |
| 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) |
| disableItem | disables an item |
| enable | enables the calling view that was disabled by the 'disable' method |
| enableItem | enables an item |
| exists | checks whether an item with the specified ID exists |
| filter | filters the component |
| find | returns all rows that match the criterion, or only the first one |
| getBody | gets the UI view of the window body |
| getChildViews | returns child views of the calling component |
| getContext | gets the master area for contextmenu |
| getFirstId | returns the ID of the first item |
| getFormView | returns master form for the input |
| getHead | gets the ui view of the window header |
| getIdByIndex | returns the ID of the item with the specified index |
| getIndexById | returns the index of the item with the specified ID |
| getItem | gets the object of the data item with the specified ID |
| getItemNode | returns HTML element of the item |
| getLastId | returns the ID of the last item |
| getMenu | gets object of a menu/submenu where an item is located |
| getMenuItem | search for menu item in submenus |
| getNextId | returns the ID of an item that is after the specified item, either directly after or after a number of items (defined by the step) |
| getNode | returns the main HTML container for the calling object |
| getPage | returns the currently visible page in case of paged view |
| getPager | returns the pager object associated with the component |
| getParentView | returns the parent view of the component |
| getPrevId | returns the ID of an item that is before the specified item, either directly before or before a number of items (defined by the step) |
| getScrollState | returns the scroll position |
| getSelectedId | returns the id(s) of the selected item(s) |
| getSelectedItem | returns selected object |
| getSubMenu | gets the submenu object of a menu item (if any) |
| getTopMenu | returns top menu object |
| getTopParentView | returns the top parent view |
| getVisibleCount | counts the items that can be seen with the current view height |
| hasCss | checks if item has specific css class |
| hasEvent | checks whether the component has the specified event handler |
| hide | hides the view |
| hideItem | hides menu item |
| isEnabled | checks whether the view is enabled |
| isItemEnabled | checks whether the item is enabled |
| isSelected | checks whether the specified item is selected or not |
| isVisible | checks whether the view is visible |
| load | loads data from an external data source |
| loadNext | sends a request to load the specified number of records to the end of the client-side dataset or to the specified position |
| locate | gets the id of an item from the specified HTML event |
| mapEvent | routes events from one object to another |
| move | moves the specified item to a new position |
| moveBottom | moves the specified item to the last position |
| moveDown | increases the item index and moves the item to the new position |
| moveSelection | moves selection in the specified direction |
| moveTop | moves the specified item to the first position |
| moveUp | decreases the item index and moves the item to the new position |
| 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 |
| refresh | repaints the whole view or a certain item |
| remove | removes the specified item/items from datastore |
| removeCss | removes CSS class from a component item |
| render | renders the specified item or the whole component |
| resize | adjusts the view to a new size |
| resizeChildren | resizes all children of the calling component |
| scrollTo | scrolls the data container to a certain position |
| select | selects the specified item(s) |
| selectAll | selects all items or the specified range |
| serialize | serializes data to an array of JSON objects |
| setContext | allows settings master properties: view object and item id |
| setPage | makes the specified page visible (assuming that the pager was defined ) |
| setPosition | sets window's position |
| show | makes the component visible |
| showItem | scrolls the component to make the specified item visible |
| sizeToContent | adjusts the size of menu and its submenus to their content |
| sort | sorts datastore |
| sync | allows syncing two copies of data (all or just a part of it) from one DataCollection to another |
| unbind | breaks "bind" link |
| unblockEvent | cancels events blocking that was enabled by the 'blockEvent' command |
| unselect | removes selection from the specified item |
| unselectAll | removes selection from all items |
| updateItem | updates the data item with new properties |
| validate | validates one record or all dataset against the validation rules |
| waitSave | allows to catch the moment when a data operation was saved to the server |
| onAfterAdd | fires after adding an item to the datastore |
| onAfterContextMenu | fires after the context menu was called in the item area |
| onAfterDelete | fires after an item is removed |
| onAfterDrop | fires after drag-n-drop was finished |
| onAfterLoad | fires after data loading is complete |
| onAfterRender | occurs immediately after the component has been rendered |
| onAfterScroll | occurs when some webix view has been scrolled |
| onAfterSelect | fires after item was selected |
| onAfterSort | fires after sorting dataset |
| onBeforeAdd | fires before adding an item to the datastore |
| onBeforeContextMenu | fires before the context menu is called in the item area |
| onBeforeDelete | fires before an item is removed |
| onBeforeDrag | fires before the mouse button is pressed and the cursor is moved over a draggable item |
| onBeforeDragIn | fires before a dragged element is moved over the droppable area |
| onBeforeDrop | fires before a dragged element is released over the droppable area |
| onBeforeDropOut | fires before a dragged element is released over the droppable area outside the source widget |
| onBeforeLoad | fires immediately before data loading has started |
| onBeforeRender | occurs immediately before the component has been rendered |
| onBeforeSelect | fires before item selection is started |
| onBeforeShow | fires right after show() method is called for the window (popup) and before the window is shown |
| onBeforeSort | fires before sorting of the dataset |
| onBindRequest | fires when the component is ready to receive data from the master component |
| onBlur | fires when focus is moved out of the view |
| onDataRequest | fires when data from the server is requested for linear data structures (List, DataTable, DataView etc.) to implement dynamic data loading |
| onDataUpdate | fires when a data item is being updated |
| onDestruct | occurs when component destroyed |
| onDragOut | fires when a dragged element is moved outside of the droppable area |
| onEnter | fires when the Enter key has been pressed |
| onFocus | fires when a view gets focus |
| onHide | fires when window is hidden |
| onItemClick | fires when a component item was clicked |
| onItemDblClick | fires when a component item was double-clicked |
| onItemRender | for each item rendering, occurs only for items with custom templates |
| onKeyPress | occurs when keyboard key is pressed for the control in focus |
| onLoadError | fires when an error occurs during data loading (invalid server side response) |
| onLongTouch | fires on holding finger in some position for a certain period of time |
| onMenuItemClick | fires when menu item has been clicked |
| onMouseMove | fires when the mouse was moved over the specified component |
| onMouseMoving | fires when the mouse was moved over the component |
| onMouseOut | fires when the mouse was moved out from the specified item |
| onPaste | fires when the clipboard is enabled and the user presses CTRL+V keys combination |
| onSelectChange | fires after selection state was changed |
| onShow | fires when window is shown |
| onSwipeX | occurs on a horizontal swipe movement |
| onSwipeY | occurs on a vertical swipe movement |
| onTabFocus | fires after a tab focus has been changed |
| onTimedKeyPress | fires after typing has been finished in the field |
| onTouchEnd | occurs when the touch event is ended |
| onTouchMove | occurs during touch movement |
| onTouchStart | fires when some webix view has been touched |
| onValidationError | fires when newly loaded/added/edited data fail to pass validation |
| onValidationSuccess | fires after the newlyloaded/added/edited data has passes validation successfully |
| onViewMove | fires while view is moving |
| onViewMoveEnd | fires when view has stopped moving |
| onViewResize | fires on resizing a view |
| 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 |
| autofit | adjusts window size to the size of an html node it is initiated in |
| autofocus | sets focus on the window the moment it appears on the page |
| autoheight | enables automatic calculation of the height based on the number of records |
| autowidth | enables automatic calculation of the width |
| body | the content of window body: template or view |
| borderless | used to hide the component borders |
| click | sets an action happening on a button click |
| clipboard | enables/disables clipboard support on desktop devices |
| container | an HTML container (or its ID) where the component should be initialized |
| css | the name of the CSS class that will be applied to the view container or the object with styles |
| data | JavaScript array containing data for the component |
| datathrottle | sets the polling interval (the time period between the completion of a network request and the next request for data) |
| datatype | the type of loaded data |
| delimiter | sets CSV delimiters for clipboard operations |
| disabled | indicates whether an item is enabled |
| drag | enables or disables drag-and-drop |
| dragscroll | enables autoscroll of the component during drag-n-drop |
| escHide | toggles default 'hide on escape' behaviour |
| externalData | allows defining custom 'move' logic for the component. |
| gravity | sets the view gravity |
| head | sets the view header |
| headHeight | defines the header height |
| height | sets the height of the component |
| hidden | defines whether the view will be hidden initially |
| id | the ID of a widget |
| item | alias to the type property |
| keyPressTimeout | a delay between the key press and the action |
| layout | defines x or y orientation of layout |
| left | the left offset of the window |
| master | the master component id (a read-only property) |
| maxHeight | defines the maximum height of the view |
| maxWidth | defines the maximum width of the view |
| minHeight | sets the minimal height for the view |
| minWidth | sets the minimal width for the view |
| modal | switches window modality |
| mouseEventDelay | the delay between a real mouse action and invoking the related events |
| move | makes view movable |
| multiselect | enables multiselect mode |
| navigation | activates the selection keyboard navigation |
| on | allows attaching custom handlers to inner events of the component |
| onClick | attaches a click handler for component parts with the specified CSS class |
| onContext | a property used to define custom context-click (right click) handlers for elements in the DataTable cells |
| onDblClick | attaches a dblclick behavior for component items with the specified CSS class. |
| onItemSingleClick | allows distinguishing between single and double-click events |
| onMouseMove | attaches a mousemove behavior for component items with the specified CSS class. |
| openAction | alters the way of submenu opening to "click" |
| padding | sets padding for all four sides of the widget |
| pager | defines paging configuration (creates a "ui.pager" object) |
| point | adds an arrow to a popup window or removes it |
| position | sets the position of the window relative to the the screen |
| prerender | invokes the full rendering of data |
| ready | the event handler is called just after the component has been completely initialized |
| relative | positions a popup window relative to the component it's connected with |
| removeMissed | defines how to treat items in case of reloading |
| resize | enables resizing of a widget |
| rules | set of validation rules for the component |
| save | defines URLs for data saving |
| scheme | defines schemes for data processing |
| scroll | enables/disables the scroll bar |
| scrollSpeed | the time during which the component is scrolled to the specified position (in milliseconds) |
| select | enables/disables items selection or multiselection in widgets |
| subMenuPos | aligns submenu towards main menu |
| submenuConfig | defines submenu configuration |
| template | the component template |
| templateCopy | sets the template according to which data will be copied to the clipboard |
| toFront | places window above other windows on clicking it |
| tooltip | sets a popup message next to the item when the cursor points to it |
| top | the top offset of a window |
| type | an object that specifies items presentation |
| url | the URL which the component will use to load data after its initialization |
| width | sets the width of a widget |
| xCount | defines the width of the view in items |
| yCount | defines the height of the view in items |
| zIndex | the stack order of the component |
| $customPrint | generates custom HTML to print instead of the widget HTML and invokes printing |
| $drag | the method is called when a drag operation is initiated |
| $dragCreate | the method is called at the moment when drag-n-drop has started |
| $dragDestroy | the method is called at the moment when drag-n-drop has ended |
| $dragHTML | defines how a dragged item will look |
| $dragIn | the method is called when an item is moved into a possible drop landing during dnd |
| $dragMark | called during drag-n-drop, when some item of the component should be marked as an active drop target |
| $dragOut | the method is called when an item is moved out of a possible drop landing during dnd |
| $dragPos | defines the position of a dragged view |
| $drop | the method is called when an item is dragged and dropped on a valid target |
| $dropAllow | can be redefined, if you need custom drop rules |
| $dropHTML | defines how the drop area will look before drop |
| $getSize | returns the current size of the component |
| $height | the current height of the view |
| $scope | scope for resolving event and method names |
| $setNode | defines HTML element for the component |
| $setSize | sets the component size |
| $skin | the method which will be called when skin is defined |
| $tooltipIn | shows a tooltip |
| $tooltipMove | defines the tooltip while the cursor moves over a view or an HTML area |
| $tooltipOut | defines the behavior of a tooltip when the cursor is out of the target widget or HTML area |
| $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 |
| data | inner DataStore |
| name | indicates the name of the component (a read-only property) |
| on_click | redefines default click behavior for component items. |
| on_context | a property used to define custom context-click (right click) handlers for elements in widgets |
| on_dblclick | attaches a dblclick behavior for component items with the specified CSS class |
| on_mouse_move | attaches a mouse move behavior for component items with the specified CSS class |
| type | set of properties and helpers for item rendering |
| types | collection of possible types |
| waitData | eventual result of an asynchronous operation ('promise' object) for the loaded data |