DataView API overview
Methods
| Name | Description |
|---|---|
| destructor() | removes DataView instance and releases occupied resources |
| editItem() | enables editing of an item |
| getFocus() | returns the id of an item in focus |
| getFocusItem() | returns the object of an item in focus |
| paint() | repaints a dataview on a page |
| setFocus() | sets focus to an item by its id |
important
- Use the methods of DataCollection to work with data.
- Apply the methods of Selection to manage the selection of DataView items.
Events
| Name | Description |
|---|---|
| afterDrag | fires after dragging of an item is finished |
| afterDrop | fires before the user has finished dragging an item but after the mouse button is released |
| afterEditEnd | fires after editing of an item is ended |
| afterEditStart | fires after editing of an item has started |
| beforeDrag | fires before dragging of an item has started |
| beforeDrop | fires before the user has finished dragging an item and released the mouse button |
| beforeEditEnd | fires before editing of an item is completed |
| beforeEditStart | fires before editing of an item has started |
| cancelDrop | fires on moving a mouse pointer out of item's borders while dragging the item |
| canDrop | fires when a dragged item is over a target item |
| click | fires on clicking an item |
| doubleClick | fires on double clicking an item |
| dragIn | fires when an item is dragged to another potential target |
| dragOut | fires when an item is dragged out of a potential target |
| dragStart | fires when dragging of an item has started |
| focusChange | fires on moving focus to a new item |
| itemMouseOver | fires on moving the mouse pointer over an item |
| itemRightClick | fires on right clicking an item |
important
- Use the events of DataCollection to work with data of DataView.
- Apply the events of Selection to control the selection of DataView items.
Properties
| Name | Description |
|---|---|
| css | adds a CSS class(es) to the component |
| data | specifies an array of data objects to set into the dataview |
| dragCopy | defines that an item is copied to a target during drag-n-drop |
| dragMode | enables drag-n-drop in DataView |
| editable | enables editing in DataView |
| eventHandlers | adds event handlers to the HTML elements of a custom template of DataView items |
| gap | sets margins for DataView items |
| height | sets the height of DataView |
| itemHeight | sets the height of an item |
| itemsInRow | specifies the number of data items in a row |
| keyNavigation | enables/disables navigation in DataView by arrow keys |
| multiselection | enables selection of multiple DataView items, sets the mode of multiselection |
| selection | enables selection of DataView items |
| template | specifies a template for DataView items |