DataViews
Core
Version 1
Core Class DataView GrapeCity DataViewsJS Class

DataView Class

The DataView is a comprehensive pure JavaScript control which offers all the features of a normal data grid along with support for different layout engines, DAX formulas, and various grouping strategies. The grouping strategies can be used to design custom layouts similar to facebook, pinterest, chat, scheduler, and so on.

See examples:

Heirarchy

  • DataView

Constructors

Events

Properties

Methods

Constructors

constructor

  • new DataView(container: HTMLElement | string, data: any, config?: any, layoutEngine?: ILayoutEngine): DataView

  • Creates a new instance of DataView

    Parameters

    • container: HTMLElement | string

      Specifies container node the grid attached to

    • data: any

      Specifies an array of objects for the grid model or a dataSource object

    • Optional config: any

      Specifies an array of column definitions or a JSON object used to deserialize the grid. If it is an array of column objects, please see IColumn type to find available properties

    • Optional layoutEngine: ILayoutEngine

      Specifies layout strategy

    Returns DataView

Events

columnChanged

columnChanged: Event<IColumnChangedEventArgs> = new Event<IColumnChangedEventArgs>()

This event occurs when the user changes the column visibility, pinned option, or column width, or expands or collapses the column group from UI

columnReorder

columnReorder: Event<IColumnReorderEventArgs> = new Event<IColumnReorderEventArgs>()

This event occurs when the user starts dragging the column and before dropping the column in the column header

editing

editing: Event<IEditingEventArgs> = new Event<IEditingEventArgs>()

This event occurs before editing, once editing has started, before editing has ended, or editing has stopped

focusChanged

focusChanged: Event<IFocusChangedEventArgs> = new Event<IFocusChangedEventArgs>()

This event occurs when the focused row is changed. The event fires on GridLayout or HorizontalLayout

grouping

grouping: Event<IGroupingEventArgs> = new Event<IGroupingEventArgs>()

This event occurs when the user updates groups with UI actions. The event is fired before the actual update happens

rowClick

rowClick: Event<IRowClickEventArgs> = new Event<IRowClickEventArgs>()

This event occurs when clicking the row

rowDbClick

rowDbClick: Event<IRowClickEventArgs> = new Event<IRowClickEventArgs>()

This event occurs when double-clicking the row

rowReorder

rowReorder: Event<IRowReorderEventArgs> = new Event<IRowReorderEventArgs>()

This event occurs when the user starts dragging the row header and before inserting the row at new position

selectionChanged

selectionChanged: Event<ISelectionChangedEventArgs> = new Event<ISelectionChangedEventArgs>()

This event occurs when the user changes the selection using UI actions

Properties

container

container: HTMLElement

Gets the HTML element where the grid attached to

data

data: DataManager

Gets underlying instance of DataManager

layoutEngine

layoutEngine: ILayoutEngine

Gets instance of current ILayoutEngine

options

options: IGridOptions

Gets grid options.

uid

uid: string = gridId()

Get the unique id of the current instance

Static getControlByElement

getControlByElement: getControlByElement = getControlByElement

Gets the instance of DataView which is hosted to the specified node

param

an HTML element which is used to host the DataView instance

returns

a DataView instance

Methods

cancelBatchEdit

  • cancelBatchEdit(): void

  • Cancel batch edit and clear changes.

    Returns void

cancelEditing

  • cancelEditing(): void

  • Cancels editing the current row.

    Returns void

clearSelection

  • clearSelection(): void

  • Clears selected cells.

    Returns void

destroy

  • destroy(): void

  • Removes the DataView instance from the host and destroys all resources used by the current instance which includes layout engine and group strategy.

    Returns void

export

  • export(options: ExportOptions): any

  • Export data from the grid to different formats. Now only CSV format is supported. Filtered rows are not included. You need to load @grapecity/dataviews.csvexport module in order to get working CSV export.

    Parameters

    • options: ExportOptions

      export options

    Returns any

focusRow

  • focusRow(sourceRow: number, columnId: string): void

  • Focus visible row.

    Parameters

    • sourceRow: number

      The source index of row to focus.

    • columnId: string

      The column id of focused cell. It will work if selectionUnit is cell.

    Returns void

formatDataItem

  • formatDataItem(dataItem: any): Object

  • Formats the dataItem based on column formats

    Parameters

    • dataItem: any

      object that needs to be formatted.

    Returns Object

    the formatted object

getCachedBatchActions

  • getCachedBatchActions(): object[]

  • Get cahced actions which havn't been saved.

    Returns object[]

getItem

  • getItem(index: any): any

  • Gets item information by given index or row id.

    Parameters

    • index: any

      The input view index or row id, can be an array. notice that the index is the view index in control.

    Returns any

    The queried item information.

getLayoutInfo

  • getLayoutInfo(): ILayoutInfo

  • Gets the layout information of the current instance.

    Returns ILayoutInfo

    An object which uses the area name as the key and the layout information as the value.

getRenderInfo

  • getRenderInfo(option: IRenderInfoOptions): IAreaRenderInfo

  • Gets the render information.

    Parameters

    • option: IRenderInfoOptions

      An object used to specify the area, horizontal scroll offset, and vertical offset. The object indicates whether the return value contains row render infos.

    Returns IAreaRenderInfo

    The render information result.

getRowId

  • getRowId(hitInfo: IHitTestInfo): string

  • Util method, used to get the corresponding row element id from hitInfo

    Parameters

    • hitInfo: IHitTestInfo

      hit test result, can get this by calling hitTest method

    Returns string

    row element id

getRowInfoFromId

  • getRowInfoFromId(rowId: string): IElementPlace

  • Util method, used to get the row info from row id

    Parameters

    • rowId: string

      the id of the row

    Returns IElementPlace

    row info.

getSelections

  • getSelections(): object[]

  • Gets the data of selected rows.

    Returns object[]

    The information of selected rows, including data, sourceRow and columns id.

hideLoadingOverlay

  • hideLoadingOverlay(): void

  • Hide built-in loading overlay

    Returns void

hitTest

  • hitTest(e: IHitTestEventArgs): IHitTestInfo

  • Recognizes what element is under given point.

    Parameters

    • e: IHitTestEventArgs

      Hit testing coordinates

    Returns IHitTestInfo

    The hit test information.

invalidate

  • invalidate(): void

  • Invalidates the entire control

    Returns void

refresh

  • refresh(area: string): void

  • Refreshes the specified part of the grid.

    Parameters

    • area: string

      The area that needs to be refreshed.

    Returns void

saveBatchEdit

  • saveBatchEdit(callback?: Action): void

  • Save batch edit changes.

    Parameters

    • Optional callback: Action

      callback function which will be executed after save all actions to server return results.

    Returns void

setSelections

  • setSelections(sourceRow: number | number[], columns: string | string[]): void

  • Set selection.

    Parameters

    • sourceRow: number | number[]

      The source row index or source row indexes array of selected row(s).

    • columns: string | string[]

      The column id collection of selected row. It will work if selectionUnit is cell.

    Returns void

showLoadingOverlay

  • showLoadingOverlay(): void

  • Show built-in loading overlay

    Returns void

startEditing

  • startEditing(viewIndex?: any, colIndex?: number): void

  • Starts to edit the current row

    Parameters

    • Optional viewIndex: any

      The dataview row viewIndex or id.

    • Optional colIndex: number

      DataView column index.

    Returns void

stopEditing

  • stopEditing(): void

  • Stops editing the current row and commits the new value.

    Returns void

toJSON

  • toJSON(): Object

  • Serializes the current instance to a JSON object

    Returns Object

    A JSON object