Since 3.0
A tool for displaying the content of Excel files on the screen.
Webix Excel Viewer is a handy tool for viewing Excel files. It consists of a toolbar that contains tabs with the sheets names and the viewer itself.
Check Excel Viewer documentation for a more detailed information.
var excelviewer = webix.ui({
view:"excelviewer",
toolbar:"toolbar",
excelHeader:true,
url:"binary->files/data.xlsx"
}).
| add | adds an item to the store |
| addCellCss | adds a css class to the cell |
| addCss | applied CSS class to a component item |
| addRowCss | adds a css class to the row |
| addSelectArea | adds a select area |
| addSpan | adds a colspan or a rowspan to the datatable |
| adjust | adjusts the component to the size of the parent HTML container |
| adjustColumn | adjusts a column to the width of the content |
| adjustRowHeight | adjusts row height to cell content |
| 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 items from the component |
| clearCss | removes CSS class from all items |
| clearValidation | removes all validation marks from the component |
| closeSub | closes a subrow or a subview for an item with the given id |
| collectValues | returns an array of unique values of the specified column |
| columnId | returns the id of the column at the specified index |
| copy | copies an item to the same or another object |
| count | returns the number of currently visible items |
| 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) |
| eachColumn | iterates over all visible columns in the table |
| eachRow | iterates over all rows in the table |
| edit | enables the edit mode for the specified item |
| editCancel | cancels the edit mode and closes all opened editors. The component remains editable. |
| editCell | enables the edit mode for the specified cell |
| editColumn | enables the edit mode for the specified column |
| editNext | closes the current editor and opens one in the next cell of the row |
| editRow | enables the edit mode for the specified row |
| editStop | stops the edit mode and closes all opened editors. The component remains editable. |
| enable | enables the calling view that was disabled by the 'disable' method |
| exists | checks whether an item with the specified ID exists |
| filter | filters the component |
| filterByAll | refilters DataTable by all specified filters |
| find | returns all rows that match the criterion, or only the first one |
| focusEditor | moves focus to the active editor |
| freezeRow | fixes a row at the top of the datatable at runtime |
| getAllSelectAreas | returns an object that contains configuration objects of all select areas in the datatable |
| getChildViews | returns child views of the calling component |
| getColumnConfig | returns the configuration object of the specified column |
| getColumnIndex | returns the index of the column with the specified id |
| getColumns | returns an array of columns |
| getCss | returns the className of a cell |
| getEditState | returns info about active editor object |
| getEditor | returns an editor object |
| getEditorValue | returns the value of the active (currently open) editor |
| getFilter | returns the filter object that is used to filter the values of the specified column |
| getFirstId | returns the ID of the first item |
| getFooterNode | returns an HTML element of the column footer |
| getFormView | returns master form for the input |
| getHeaderContent | returns a set of helpers for header content manipulation |
| getHeaderNode | returns an HTML element of the column 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 |
| 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 current position of scrolls |
| getSelectArea | returns the object of the select area |
| getSelectedId | returns the selected elements ids |
| getSelectedItem | gets an object of the selected data item |
| getSheets | gets the names of all sheets shown in the viewer |
| getSpan | returns the config array for a span or null, if there are no spans |
| getSpanNode | returns the HTML element of a spanned cell |
| getState | returns the current state of the view |
| getSubView | returns the subview of the item with the given id |
| getText | returns the text value of a cell |
| getTopParentView | returns the top parent view |
| getVisibleCount | counts visible rows |
| group | groups data by the specified data property |
| hasCss | checks if item has specific css class |
| hasEvent | checks whether the component has the specified event handler |
| hide | hides the view |
| hideColumn | hides the specified column |
| hideOverlay | hides the previously defined overlay |
| isColumnVisible | returns false if the column is hidden |
| isEnabled | checks whether the view is enabled |
| 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 | converts an HTML node or event object to in-table position |
| mapCells | applies the callback to a range of cells |
| mapEvent | routes events from one object to another |
| markSorting | marks the sorted column with arrow (asc/desc) in the header |
| move | moves the specified item to a new position |
| moveBottom | moves the specified item to the last position |
| moveColumn | moves a column to different 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 |
| openSub | opens a subrow or subview for an item with the given id |
| 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 |
| refreshColumns | refreshes the structure of DataTable |
| refreshFilter | rebuilds the list of options in the select filter |
| refreshSelectArea | refreshes the selected area in the DataTable |
| registerFilter | adds an external filter for a particular column or data field |
| remove | removes the specified item/items from datastore |
| removeCellCss | removes a css class from the cell of datatable |
| removeCss | removes CSS class from a component item |
| removeRowCss | removes a css class from the row |
| removeSelectArea | removes a select area |
| removeSpan | removes a rowspan/colspan from the datatable |
| render | renders the specified item or the whole component |
| resize | adjusts the view to a new size |
| resizeSubView | adjusts the row size to the size of a subview |
| scrollTo | scrolls the view to the defined position |
| serialize | serializes data to an array of JSON objects |
| setColumnWidth | sets the width of the specified column |
| setPage | makes the specified page visible (assuming that the pager was defined ) |
| setRowHeight | sets the height of the specified row |
| setState | restores the specified state |
| show | makes the component visible |
| showCell | scrolls the table (if needed) to make the specified cell visible |
| showColumn | shows the column that was previously hidden by method 'hideColumn' |
| showColumnBatch | shows or hides a group of columns |
| showItem | scrolls the table to make the specified row visible |
| showItemByIndex | scrolls the table to make the specified row visible |
| showOverlay | shows the overlay message over the body of DataTable |
| showSheet | switches to the specified sheet |
| 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 |
| ungroup | ungroups data |
| updateItem | updates the data item with new properties |
| validate | validates one record or all dataset against the validation rules |
| validateEditor | validates data in currently active editor |
| waitSave | allows to catch the moment when a data operation was saved to the server |
| onAfterAdd | fires after adding an item to the datastore |
| onAfterAreaAdd | fires after a select area was added |
| onAfterAreaRemove | fires after a select area was removed |
| onAfterBlockSelect | occurs after block selection |
| onAfterColumnDrop | fires after the column has been dragged and dropped to the target position |
| onAfterColumnDropOrder | fires after the column order was changed with drag-and-drop |
| onAfterColumnHide | fires after a column was hidden in a datatable |
| onAfterColumnShow | fires when a column is shown in datatable |
| 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 |
| onAfterEditStart | fires after edit operation was initiated, editor opened and ready for input |
| onAfterEditStop | fires after the edit operation is finished |
| onAfterFilter | occurs after a datatable was filtered via built-in filters |
| onAfterLoad | fires after data loading is complete |
| onAfterRender | occurs each time after the view is rendered |
| onAfterScroll | occurs when some webix view has been scrolled |
| onAfterSelect | fires after a cell is selected |
| onAfterSort | fires after sorting dataset |
| onAfterUnSelect | fires after a cell is unselected |
| onAreaDrag | fires when area selection is started |
| onBeforeAdd | fires before adding an item to the datastore |
| onBeforeAreaAdd | fires before a select area is added |
| onBeforeAreaRemove | fires before a select area is removed |
| onBeforeBlockSelect | event occurs before block selection |
| onBeforeColumnDrag | fires the moment you start dragging the column from its source position |
| onBeforeColumnDrop | fires the moment you drop the column to its target position |
| onBeforeColumnDropOrder | fires the moment you drop the column over the target area |
| onBeforeColumnHide | fires before a column is hidden in a datatable |
| onBeforeColumnShow | fires before a column is shown in a datatable |
| 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 |
| onBeforeEditStart | fires before edit operation is initiated |
| onBeforeEditStop | fires before the edit stop command is received |
| onBeforeFilter | called before data are filtered |
| onBeforeLoad | fires immediately before data loading has started |
| onBeforeRender | occurs each time before a view is rendered |
| onBeforeSelect | fires before a cell is selected |
| onBeforeSort | fires before sorting of the dataset |
| onBeforeUnSelect | fires before a cell is unselected |
| onBindRequest | fires when the component is ready to receive data from the master component |
| onBlur | fires when focus is moved out of the view |
| onCheck | fires when a checkbox is checked or unchecked in the datatable item |
| onCollectValues | fires after a datatable has collected options |
| onColumnResize | fires when the width of a column was changed |
| 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 |
| onEditorChange | fires when the native oninput event occurs for an HTML input (select, text) |
| onEnter | fires when the Enter key has been pressed |
| onFocus | fires when a view gets focus |
| onHeaderClick | fires on clicking the column header |
| onItemClick | fires when a component item was clicked |
| onItemDblClick | fires when a component item was double-clicked |
| onItemSingleClick | allows distinguishing between single and double-click events |
| onKeyPress | occurs when keyboard key is pressed for the control in focus |
| onLiveEdit | fires when data was changed in the editor |
| 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 |
| 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 |
| onMoveSelection | fires when selection is moved in some direction |
| onPaste | fires when the clipboard is enabled and the user presses CTRL+V keys combination |
| onResize | fires when the width or height of DataTable was changed |
| onRowResize | fires when the height of a row was changed |
| onScrollX | fires when the user scrolls the table left or right |
| onScrollY | fires when the user scrolls the table up or down |
| onSelectChange | fires when selection is changed in a DataTable |
| onStructureLoad | fires when the structure of DataTable (columns configuration) is initialized |
| onStructureUpdate | fires when the structure of a datatable was changed (a column was added, hidden or reconfigured) |
| onSubViewClose | fires after a subview or a subrow is closed |
| onSubViewCreate | fires after a subview was created |
| onSubViewOpen | fires after a subview or a subrow is opened |
| onSubViewRender | fires each time a subview is rendered |
| onSwipeX | occurs on a horizontal swipe movement |
| onSwipeY | occurs on a vertical swipe movement |
| onSyncScroll | fires during scrolling on touch devices |
| 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 |
| onViewResize | fires when the size of a view has been changed by resizer |
| 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 |
| areaselect | enables/disables area selection |
| autoConfig | datatable adjust configuration to the data |
| autoheight | adjusts the height of Datatable to the its content |
| autowidth | adjusts the width of Datatable to its content |
| blockselect | enables/disables block selection |
| borderless | used to hide the component borders |
| checkboxRefresh | controls behavior of checkbox editors in grid |
| clipboard | enables/disables clipboard support on desktop devices |
| columnWidth | defines the default width for columns (in pixels) |
| columns | configures columns of the table |
| 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 |
| datafetch | defines the number of records that will be loaded into datatable during the next dynamic loading call |
| 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 |
| dragColumn | enables drag-and-drop support for columns |
| dragscroll | enables autoscroll of the component during drag-n-drop |
| editMath | enables formula editing |
| editValue | defines which data item is editable (in case of several data items in the cell/line) |
| editable | allows/denies editing in the view |
| editaction | defines the action on which editors will be opened |
| excelHeader | sets the first row of the Excel table as a column header |
| externalData | allows defining custom 'move' logic for the component. |
| filterMode | defines filtering rules in tree-like components |
| fixedRowHeight | defines whether the height should be fixed for all rows or can vary |
| footer | enables/disables the footer in DataTable (disabled, by default) |
| form | linked form |
| gravity | sets the view gravity |
| header | enables/disables the header in DataTable (enabled, by default) |
| headerRowHeight | sets the height of the header and footer rows |
| headermenu | adds a header menu that helps to control the column visibility |
| height | sets the height of the component |
| hidden | defines whether the view will be hidden initially |
| hover | defines a css class for a row-hover in the datatable |
| id | the ID of a widget |
| keyPressTimeout | a delay between the key press and the action |
| leftSplit | the number of the columns fixed to left side of the table (works for the Split Mode) |
| liveValidation | enables validation during cell editing |
| loadahead | sets the number of items that will be loaded on each scroll movement |
| map | defines data mapping |
| math | enables math formulas in DataTable |
| maxColumnWidth | sets the maximum width for a column |
| maxHeight | sets the maximum height for the view |
| maxRowHeight | sets the maximum height for a row |
| maxWidth | sets the maximum width for the view |
| minColumnWidth | sets the minimum width for a column |
| minHeight | sets the minimal height for the view |
| minRowHeight | sets the minimum height for a row |
| minWidth | sets the minimal width for the view |
| mouseEventDelay | the delay between a real mouse action and invoking the related events |
| multiselect | enables the multi selection 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. |
| onMouseMove | attaches a mousemove behavior for component items with the specified CSS class. |
| pager | defines paging configuration (creates a "ui.pager" object) |
| prerender | invokes the full rendering of data |
| ready | the event handler is called just after the component has been completely initialized |
| removeMissed | defines how to treat items in case of reloading |
| resizeColumn | enables/disables horizontal resizing of columns |
| resizeRow | enables/disables vertical resizing of rows |
| rightSplit | sets the number of the columns fixed to the right side of the table (works for the Split Mode) |
| rowHeight | sets the default height for rows |
| rowLineHeight | defines the default line height for a grid row |
| rules | set of validation rules for the component |
| save | defines URLs for data saving |
| scheme | defines schemes for data processing |
| scroll | enables or disables scroll for the datatable |
| scrollAlignY | enables/disables scrolling the table just by whole rows (i.e. you won't be allowed to scroll along the full length of rows) |
| scrollX | enables/disables horizontal scrolling |
| scrollY | enables/disables vertical scrolling |
| select | sets the selection mode in DataTable |
| sort | enables sorting by header click |
| spans | sets span configurations for the datatable |
| subRowHeight | automatically adjusts the subrow height to the size of the text |
| subrow | sets a subrow template |
| subview | adds a subview configuration into datatable |
| templateCopy | sets the template according to which data will be copied to clipboard from each currently selected cell |
| toolbar | sets the id of the related excel toolbar, if it is used |
| tooltip | sets a popup message next to the item when the cursor points to it |
| topSplit | defines the number of rows that will be "frozen" at the top of datatable |
| type | used for configuring presentation of items |
| undo | enables reverting changes in datatable |
| url | the URL which the component will use to load data after its initialization |
| width | sets the width of a widget |
| yCount | defines the height of the datatable in rows |
| $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 |
| $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 |
| $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 |
| $hasYScroll | checks whether there is space available for vertical scroll |
| $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 |
| $touch | adjusts datatable for correct behavior on touch devices |
| $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 |
| headerContent | a collection of active elements that can be placed in the header |
| 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 |
| waitData | eventual result of an asynchronous operation ('promise' object) for the loaded data |