Skip to content

Webix Grid API

An editable grid that can easily display huge data sets.

The component is full of various possibilities: filtering, sorting, pagination, editing, navigation, drag-and-drop, internationalization, export to PDF, Excel etc. It also provides the dynamic mode for handling thousands of records in a fast way. Check datagrid documentation for more detailed description.

Constructor

Section titled “Constructor”
var datagrid = webix.grid({
    columns:[
      { id:"rank",  header:"",         width:50},
      { id:"title",  header:"Film title",  width:200},
      { id:"year",  header:"Released",     width:80},
      { id:"votes",  header:"Votes",     width:100}
    ],
    data: [
      { id:1, title:"The Shawshank Redemption", year:1994, votes:678790, rank:1},
      { id:2, title:"The Godfather", year:1972, votes:511495, rank:2}
    ]
});

Where to start

Section titled “Where to start”
Methods
  • 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 datagrid
  • 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
  • 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
  • clearSelection - clears selection
  • 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 DataGrid 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 datagrid at runtime
  • getAllSelectAreas - returns an object that contains configuration objects of all select areas in the datagrid
  • 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
  • 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
  • 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
  • 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
  • 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
  • ignoreUndo - calls a function that will be ignored in the undo history track
  • isColumnVisible - returns false if the column is hidden
  • isEnabled - checks whether the view is enabled
  • isSelected - returns true if the related record is selected
  • 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
  • mapSelection - executes a method for all cells in the currently selected block
  • 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
  • refresh - repaints the whole view or a certain item
  • refreshColumns - refreshes the structure of DataGrid
  • refreshFilter - rebuilds the list of options in the select filter
  • refreshSelectArea - refreshes the selected area in the DataGrid
  • 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 datagrid
  • 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 datagrid
  • removeUndo - removes history about all the operations made to an item
  • 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
  • select - selects the specified element
  • selectAll - selects all cells in the DataGrid
  • selectRange - selects the specified range of elements
  • 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 DataGrid
  • sort - sorts datastore
  • unblockEvent - cancels events blocking that was enabled by the ‘blockEvent’ command
  • undo - reverts the previously made change in the component
  • ungroup - ungroups data
  • unselect - cancels selection of the specified element
  • unselectAll - unselects all selected cells in a datagrid
  • 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
Events
Properties
  • areaselect - enables/disables area selection
  • autoConfig - datagrid adjust configuration to the data
  • autoheight - adjusts the height of DataGrid to the its content
  • autowidth - adjusts the width of DataGrid 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
  • dataFeed - alternative data source for filtered and bound data
  • datafetch - defines the number of records that will be loaded into datagrid 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
  • editable - allows/denies editing in the view
  • editaction - defines the action on which editors will be opened
  • externalData - allows defining custom ‘move’ logic for the component.
  • fixedRowHeight - defines whether the height should be fixed for all rows or can vary
  • footer - enables/disables the footer in DataGrid (disabled, by default)
  • header - enables/disables the header in DataGrid (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 datagrid
  • 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 DataGrid
  • 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 DataGrid 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 datagrid
  • 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 DataGrid
  • sort - enables sorting by header click
  • spans - sets span configurations for the datagrid
  • subRowHeight - automatically adjusts the subrow height to the size of the text
  • subrow - sets a subrow template
  • subview - adds a subview configuration into datagrid
  • templateCopy - sets the template according to which data will be copied to clipboard from each currently selected cell
  • 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 datagrid
  • type - used for configuring presentation of items
  • undo - enables reverting changes in datagrid
  • undoLimit - limit of the number of operations to revert
  • 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 datagrid in rows
Other
  • $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
  • $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
  • $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 datagrid 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