Since 5.1
A gridlayout-based widget for arranging movable elements on a grid.
Webix Grid Dashboard is a layout component that allows you to create a highly symmetrical app structure. It locates views in grid cells that make columns and rows. You can move views around the page, save their current state and restore it, when necessary.
Check Dashboard documentation for a more detailed description.
var dashboard = webix.ui({
view:"dashboard",
gridColumns:4, gridRows:3,
cellHeight: 200, cellWidth: 200,
cells:[
{ view:"panel", body:{ template:"Single" }, x:0, y:0, dx:1, dy:1},
{ view:"panel", body:{ template:"Wide 1" }, x:1, y:0, dx:2, dy:1},
{ view:"panel", body:{ template:"Wide 2" }, x:0, y:1, dx:2, dy:1}
// more cells
]
});
| addView | adds a new view to a layout-like widget or moves an existing one |
| 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 |
| clearAll | removes all views from a gridlayout |
| 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 |
| 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 |
| hasEvent | checks whether the component has the specified event handler |
| hide | hides the view |
| index | returns the cell index in the layout collection |
| isEnabled | checks whether the view is enabled |
| isVisible | checks whether the view is visible |
| mapEvent | routes events from one object to another |
| moveView | moves a view to a new position and updates its sizes |
| queryView | returns inner element/elements of a widget that correspond(s) to the defined parameters |
| reconstruct | rebuilds the layout |
| removeView | removes the specified view of a layout-like component |
| resize | adjusts the view to a new size |
| resizeChildren | resizes all children of the called component |
| restore | restores the saved state of a layout |
| serialize | serializes the current layout state to a JSON object |
| show | makes the component visible |
| showBatch | makes visible those elements, the parameter 'batch' of which is set to the specified name |
| unbind | breaks "bind" link |
| unblockEvent | cancels events blocking that was enabled by the 'blockEvent' command |
| onAfterDrop | fires after drag-n-drop was finished |
| onBeforeDrag | fires before the mouse button is pressed and the cursor is moved over a panel |
| onBeforeDragIn | fires before a dragged panel is moved over the dashboard |
| onBeforeDrop | fires before a dragged panel is released over the droppable area |
| onBindRequest | fires when the component is ready to receive data from the master component |
| onChange | fires on changes in a gridlayout |
| onDestruct | occurs when component destroyed |
| onDragOut | fires when a dragged panel is moved outside of the dashboard |
| 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 |
| autoplace | when a new view added into the layout, moves all views vertically so that the 1st view gets y:0 position |
| borderless | used to hide the component borders |
| cellHeight | defines the height of a cell in pixels |
| cellWidth | defines the width of a cell in pixels |
| cells | defines the content of an abslayout |
| cols | array of views objects arranged horizontally |
| 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 |
| disabled | indicates whether an item is enabled |
| factory | creates inner views of a gridlayout according to the specified scheme |
| gravity | sets the view gravity |
| gridColumns | sets the number of columns for the grid |
| gridRows | sets the number of rows for the grid |
| height | sets the height of the component |
| hidden | defines whether the view will be hidden initially |
| id | the ID of a widget |
| margin | defines the space around elements (applies the specified value to all elements) |
| 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 layout 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) |
| responsive | enables responsive mode for horizontal layout |
| rows | array of views objects arranged vertically |
| visibleBatch | sets the batch that will be shown initially |
| width | sets the width of a widget |
| $dragCreate | the method is called at the moment when drag-n-drop has started |
| $dragDestroy | the method is called when drag-n-drop has finished |
| $dragIn | the method is called when an item is moved into a possible drop landing during dnd |
| $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 item |
| $drop | the method is called when an item is dragged and dropped on a valid target |
| $getSize | returns the current size of the component |
| $height | the current height of the view |
| $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) |