DataGrid

Description

The DataGrid component is a data table.

Comments

The DataGrid component is implemented by the DataGrid class.

The component is used for visual presentation of data as a table. Data can be loaded to table both synchronously and asynchronously. The DGDataSource class is used to work with tem. The DGRow and DGColumn classes are functions used to work with table rows and columns, respectively. The DGFormater class is used to format table data.

Example

The DataGrid component may look as follows:

Example of Creating an Asynchronous Data Table

Example of Creating the DataGrid Component

Constructor

  Constructor name Brief description
DataGrid The DataGrid constructor creates an instance of the DataGrid class.

Properties

  Property name Brief description
AdditionalData The AdditionalData property determines additional data for asynchronous table.
AutoSizeType The AutoSizeType property determines the mode of automatic determining of table cell size.
BackgroundCSS The BackgroundCSS property determines table container fill color.
BodyContainer The BodyContainer property determines table cell container.
BodyTable The BodyTable property determines the DOM element that presents table cells.
CalcPercentType The CalcPercentType property determines the type of calculation of table column width in percents.
ChangedCells The ChangedCells property determines table cells with changed values.
DataSource The DataSource property determines a table data source.
DefaultDateFormat The DefaultDateFormat property determines default date format in table.
EnableAutoSize The EnableAutoSize property determines whether table elements size is automatically calculated.
EnableBacklight The EnableBacklight property determines whether a row is highlighted on hovering the cursor.
EnableColumnMove The EnableColumnMove property determines whether table column headers can be moved.
EnableCopyPaste The EnableCopyPaste property determines whether table rows can be copied and pasted.
EnableEdit The EnableEdit property determines whether table cells can be edited.
EnableHTMLInCells The EnableHTMLInCells property determines whether HTML markup can be used in table cells.
EnableHyphenationAutoSize The EnableHyphenationAutoSize property determines the method of calculation of maximum table cell width in the autosize mode.
EnableRowResize The EnableRowResize property determines whether table row height can be changed.
EnableSelection The EnableSelection property determines whether table rows can be selected.
FireProcessingNodeEvent The FireProcessingNodeEvent property determines whether the DataGrid.ProcessingNode event is generated on table DOM elements processing.
FirstVisibleRow The FirstVisibleRow property determines index of the first visible table row.
Formater The Formater property determines an object for table data formatting.
GridBorderWidth The GridBorderWidth property determines table grid width.
HeaderContainer The HeaderContainer property determines the DOM element that is a table header container.
HeaderTable The HeaderTable property determines the DOM element that is a table with header cells.
IsFixedHeader The IsFixedHeader property determines whether a table header is fixed.
IsNeedToDrawBorders The IsNeedToDrawBorders property determines whether table cell borders are displayed.
LastHScrollBarPos The LastHScrollBarPos property determines position of horizontal scrollbar slider.
LastVisibleRow The LastVisibleRow property determines index of the last visible table row.
LastVScrollBarPos The LastVScrollBarPos property determines position of vertical scrollbar slider.
Measures The Measures property determines table dimensions.
MinColumnWidth The MinColumnWidth property determines minimum width of table columns.
MinRowHeight The MinRowHeight property determines minimum height of table rows.
MinWidth The MinWidth property determines minimum table width.
MinWidthByContent The MinWidthByContent property determines the method of calculation of minimum table width.
MouseWheelScrollStep The MouseWheelScrollStep property determines mouse wheel scroll step for table in pixels.
NearLimit The NearLimit property determines the number of scrolled rows of asynchronous table, at which the next data portion is loaded to the source.
PasteMode The PasteMode property determines the table data paste mode.
RealAdditionalRows The RealAdditionalRows property compares real indexes with additional data series for asynchronous table.
RealToGlobalIndexes The RealToGlobalIndexes property compares real and global indexes of table data series.
RemoveHtmlWhenSort The RemoveHtmlWhenSort property determines whether HTML tags are removed from cell values on sorting.
Rows The Rows property determines a table rows array.
RowSelectType The RowSelectType property determines table selection mode.
RowsToBuffer The RowsToBuffer property determines the number of loaded data rows on scrolling of asynchronous table.
ScrollingSlowMotionInterval The ScrollingSlowMotionInterval property determines table scroll delay in milliseconds.
SortByValue The SortByValue property determines the cell value, by which a table is sorted.
SortIconAsc The SortIconAsc property determines the path to the icon for descending sorting.
SortIconDesc The SortIconDesc property determines the path to the icon for ascending sorting.
SortIconHeight The SortIconHeight property table sorting icon height.
SortIconWidth The SortIconWidth property determines table sorting icon width.
SortInfo The SortInfo property contains sorting information.
StartRowIndex The StartRowIndex property determines the first index of loaded data series.
TableContainer The TableContainer property contains a table container.
VisibleRowsHeight The VisibleRowsHeight property determines the sum of heights of all visible table rows.

Methods

  Method name Brief description
addRow The AddRow method adds a row into a table.
calcCoordUnderMouse The calcCoordUnderMouse method returns the object with information about the current cursor position.
clearAllDgRows The clearAllDgRows method deletes all rows in the table rows array.
clearSelection The clearSelection method deletes table cell selection.
closeCellEditor The closeCellEditor method closes the currently active cell editor.
compare The compare method compares two values.
copy The copy method copies the contents of table data series ranges to clipboard.
createDgRow The createDgRow method creates a data series for the table.
createDgRowAndRender The createDgRowAndRender method creates and adds a data series to the table.
deleteRows The deleteRows method deletes rows from the table.
eachRowInSource The eachRowInSource method executes the specified function for each table data series.
edit The edit method starts table cell edit mode.
findDgRowByRealIndex The findDgRowByRealIndex method returns a table data series by its index.
findRowByIndex The findRowByIndex method returns a table row by its index.
getActiveSelectedRange The getActiveSelectedRange method returns active (the last selected) table range.
getAdjustmentMgr The getAdjustmentMgr method returns manager for changing of table row height and column width.
getCellInSource The getCellInSource method returns table cell value.
getCellValueInSource The getCellValueInSource method returns cell value from table data source.
getChangedMeasures The getChangedMeasures method returns changed table dimension elements.
getClipboardContainsData The getClipboardContainsData method returns clipboard contents.
getColumnMoveMgr The getColumnMoveMgr method returns manager for controlling of table column movement.
getColumnVisibility The getColumnVisibility method returns whether the specified column is shown.
getCoordInfo The getCoordInfo method returns an object with information about the table cell, on which the cursor is put.
getCoordUnderMouse The getCoordUnderMouse method returns an object with cursor coordinates.
getCurrentCellEditor The getCurrentCellEditor method returns the current cell editor.
getCurrentHorizontalScrollValue The getCurrentHorizontalScrollValue method returns the current position of horizontal scrollbar.
getEnableAutoSizeAtColumn The getEnableAutoSizeAtColumn method returns whether autowidth is set for the specified table column.
getFirstVisibleTr The getFirstVisibleTr method returns the DOM element that is the first visible table row.
getHeaderHeight The getHeaderHeight method returns table header height.
getHeaderWidth The getHeaderWidth method returns table header width.
getHorizontalScrollContainer The getHorizontalScrollContainer method returns the table container, which is controlled by horizontal scrollbar.
getHScrollBar The getHScrollBar method returns horizontal scrollbar.
getHScrollBarContainer The getHScrollBarContainer method returns DOM element of horizontal scrollbar container.
getHScrollbarHeight The getScrollHeight method returns horizontal scrollbar height.
getHScrollBarId The getHScrollBarId method returns horizontal scrollbar identifier.
getPrevColumnOnYCoord The getPrevColumnOnYCoord method returns the DOM element that is the previous row cell.
getPrevCoordUnderMouse The getPrevCoordUnderMouse method returns the saved object with information about the cursor position.
getPrevTrOnXCoord The getPrevTrOnXCoord method returns the DOM element that is the previous column cell.
getRenderedRowIndexes The getRenderedRowIndexes method returns indexes of all table data series rendered at the moment.
getScrollContainer The getScrollContainer method returns the table container, which is controlled by scrollbars.
getScrollContainerIndent The getScrollContainerIndent method returns the upper indent of container for table scrolling.
getScrollObject The getScrollObject method returns the DOM node used for smooth scrolling of table.
getSelectedCoord The getSelectedCoord method returns an object with initial coordinates of table rows selection.
getSelectedRanges The getSelectedRanges method returns selected table ranges.
getSelection The getSelection method returns selection object in the table.
getStylesContainer The getStylesContainer method returns table styles.
getTableContainerId The getTableContainerId method returns identifier of table container.
getVisibleHeight The getVisibleHeight method returns visible table height.
getVisibleWidth ThegetVisibleWidth method returns visible table width.
getVScrollBar The getVScrollBar method returns vertical scrollbar.
getVScrollBarContainer The getVScrollBarContainer method returns vertical scrollbar container.
getVScrollBarId The getVScrollBarId method returns vertical scrollbar identifier.
getVScrollbarWidth The getVScrollbarWidth method returns width of vertical scrollbar.
insertRows The insertRows method adds rows to table data object.
loadMeasuresFromDataSource The loadMeasuresFromDataSource method loads dimensions from table data source.
loadRangesFromDataSource The loadRangesFromDataSource method loads table data series ranges from the source.
loadVisibleRanges The loadVisibleRanges method loads unloaded visible table data series ranges from the source.
mask The mask method prevents table from editing.
refresh The refresh method refreshes the table.
renderVisibleRows The renderVisibleRows method renders visible table rows starting from the specified index.
reset The reset method reloads table data from the source.
selectAll The selectAll method selects all table rows.
setCellStyleIndex The setCellStyleIndex method sets the style with the specified index for a table cell.
setCellValueInSource The setCellValueInSource method sets new cell value from table data source.
setColumnVisibility The setColumnVisibility method determines whether the specified column is shown.
setEmptyColumnStyleIndex The setEmptyColumnStyleIndex method sets field index of the column for vertical scrollbar.
sort The sort method sorts table rows.
sortAsc The sortAsc method compares two values in the ascending order.
sortDesc The SortIconDesc property determines the path to the icon for ascending sorting.
unmask The unmask method allows for table to be edited.

Events

   Event name Brief description
AdditionalRangesLoaded The AdditionalRangesLoaded event occurs on loading additional ranges of table data series.
BeforeProcessResize The BeforeProcessResize event occurs before changing table column width.
Buffering The Buffering event occurs on loading table data series ranges from the source.
ColumnResized The ColumnResized event occurs after changing table column width.
ContainerRendered The ContainerRendered event occurs on reloading table data from the source.
ControlRendered The ControlRendered event occurs on rendering the value editor for a cell.
CoordUnderMouseChanged The CoordUnderMouseChanged event occurs on moving the cursor from one cell rendering area to another.
Copied The Copied event occurs on completing of table rows copying.
Copying The Copying event occurs on starting of table rows copying.
DataLoaded The DataLoaded event occurs after loading data to table.
DeletingRows The DeletingRows event occurs before deleting table rows.
HeaderDblClick The HeaderDblClick event occurs on the double-click on the table header.
HorizontalScrollChanged The HorizontalScrollChanged event occurs after changing the position of horizontal scrollbar.
InsertingRows The InsertingRows event occurs on starting of inserting rows to table in asynchronous mode.
MeasuresParsed The MeasuresParsed event occurs on getting dimensions of table data source.
MouseMove The MouseMove event occurs on moving the cursor along the table.
Pasted The Pasted event occurs on completing of pasting table rows.
Pasting The Pasting event occurs on starting of pasting table rows.
ProcessingNode The ProcessingNode event occurs on processing table DOM elements.
Rendered The Rendered event occurs after completing table rendering.
Rendering The Rendering event occurs on starting table rendering.
Resizing The Resizing event occurs on starting of resizing table header.
RowDblClick The RowDblClick event occurs after the double-click on the table row.
RowResized The RowResized event occurs after changing table row height.
RowsDeleted The RowsDeleted event occurs after deleting table rows.
RowsInserted The RowsInserted event occurs on completing of inserting rows to table in asynchronous mode.
SavedMeasures The SavedMeasures event occurs on completing of saving changes in table data source dimensions.
SavedRanges The SavedRanges event occurs on completing of saving table data series ranges.
SavingMeasures The SavingMeasures event occurs on starting of saving changes in table data source dimensions.
SavingRanges The SavingRanges event occurs on starting of saving table data series ranges.
ScrollChanged The ScrollChanged event occurs after changing the position of scrollbars.
Sorted The Sorted event occurs after sorting table data.
Sorting The Sorting event occurs before sorting table data.
VerticalScrollChanged The VerticalScrollChanged event occurs after changing the position of vertical scrollbar.

Properties inherited from the class Control

  Property name Brief description
Anchors The Anchors property determines position of the component placed within container.
Animation The Animation property sets animation parameters for component.
Bottom The Bottom property sets bottom offset on placing the component within the LayoutPanel.
Content The Content property sets the component contents.
ContextMenu The ContextMenu property sets the context menu for the component.
Data The Data property is used to store any custom data.
DataContext The DataContext property contains an object with data.
Enabled The Enabled property sets whether the component is enabled.
Height The Height property determines the component height.
IsResizable The IsResizable property determines whether the component can be resized.
IsRTL The lsRTL property sets right to left text direction.
IsVisible The IsVisible property determines whether the component is displayed.
Left The Left property sets left offset on placing the component within the GridPanel.
Offset The Offset property determines coordinates of root DOM node of a control.
Opacity The Opacity property determines component transparency.
Parent The Parent property determines a parent component of a control.
ParentNode The ParentNode property sets parent DOM node.
ResourceKey The ResourceKey property sets the resource key for the component.
Right The Right property sets right offset on placing the component within the LayoutPanel.
Rotate The Rotate property sets component rotation angle.
ShowToolTip The ShowToolTip property determines whether the tooltip of the component can be displayed.
Style The Style property sets component style.
TabIndex The TabIndex property sets the order of the control element passing inside the container.
Tag The Tag property sets JSON object associated with the component.
ToolTip The ToolTip property determines text of component tooltip.
Top The Top property sets top offset on placing the component within the GridPanel.
Value The Value property sets the value to the component.
Width The Width property sets the component width.

Methods inherited from the class Control

  Method name Brief description
The addClass method adds a CSS class to the component.
addEvent The addEvent method adds an event handler to a DOM node.
addEventHandler The addEventHandler method adds an event handler to a DOM node.
addEvents The addEvents method adds an array of event handlers to a DOM node.
The addStateClass method adds a CSS class to the component and removes the previous CSS class.
addStyleBySelector The addStyleBySelector method creates a block that contains a style with the specified CSS selector.
The addToNode method adds a component to the specified node.
bindEvents The bindEvents method subscribes an element to all available events.
The clearStylesCache method clears cache of component styles.
The getAnchorFlags method returns JSON object that contains settings of the current component's position.
The getClass method returns the current CSS classes of the component.
The getCssStyle method returns style for the specified node.
The getDomNode method returns main DOM node of the component.
The getFocused method determines whether the component is focused.
getFunctionByName The getFunctionByName method returns function by name.
getIsBinded The getIsBinded method returns whether an element is subscribed to all DOM node events.
The hasClass method determines whether the specified CSS class is set for root DOM node of the control.
The hide method hides a control.
The hideToolTip method clears tooltip timeout and hides the tooltip if it is displayed.
The isResingNow method determines whether the component is being resized.
refreshBindingProperty The refreshBindingProperty method refreshes the bound property by name.
refreshItemsStyle The refreshItemsStyle method refreshes CSS styles of child elements.
refreshStyle The refreshStyle method refreshes element CSS styles.
The removeClass method removes CSS class from the component.
The removeEvent method removes event handler from DOM node.
removeEventHandler The removeEventHandler method removes event handler from DOM node.
removeFromDOM The removeFromDOM method removes node from the DOM structure.
The removeStateClasses method removes CSS classes of the component.
The setDraggable method determines whether it is possible to drag component on the HTML page.
The setFocus method sets the component focus.
The setIsHovered method displays the component as on hover.
The setIsPressed method displays the component as if clicked upon.
The setOpacityIE8 method sets component transparency value in Internet Explorer 8.
The setSize method establishes the sizes of the component.
The show method displays a control.
unBindEvents The unBindEvents method unsubscribes an element from all standard events.
The updatePosition method updates size and position when absolute positioning based on the current parameters is used.
The updateSize method updates the component size on changing the size of the container that contains the component.

Events inherited from the class Control

  Event name Brief description
Drag The Drag event occurs on clicking and holding the left mouse button.
DragEnd The DragEnd event occurs when dragging the component finishes.
DragStart The DragStart event occurs when dragging the component starts.
OnContextMenu The OnContextMenu event occurs on calling context menu of the component.
SizeChanged The SizeChanged event occurs after the component is resized.
SizeChanging The SizeChanging event occurs during component resize.

Properties inherited from the class Object

  Property name Brief description
Data The Data property associates a random object with this component.
Id The Id property sets component identifier.
Settings The Settings property sets the component parameters.

Methods inherited from the class Object

  Method name Brief description
clone The clone method creates a copy of object. It is not implemented in PP.Ui.Control.
dispose The dispose method deletes the component.
getTypeName The getTypeName method returns the name of the object type without the namespace, to which it belongs.

See also:

DHTML Components