Search results

GridModel

Interface for a class Grid

Properties

actionBegin

EmitType<PageEventArgs|GroupEventArgs|FilterEventArgs|SearchEventArgs|SortEventArgs|AddEventArgs|SaveEventArgs|EditEventArgs|DeleteEventArgs>

Triggers when Grid actions such as sorting, filtering, paging, grouping etc., starts.

actionComplete

EmitType<PageEventArgs|GroupEventArgs|FilterEventArgs|SearchEventArgs|SortEventArgs|AddEventArgs|SaveEventArgs|EditEventArgs|DeleteEventArgs>

Triggers when Grid actions such as sorting, filtering, paging, grouping etc. are completed.

actionFailure

EmitType<FailureEventArgs>

Triggers when any Grid action failed to achieve the desired results.

batchAdd

EmitType<BatchAddArgs>

Triggers when records are added in batch mode.

batchCancel

EmitType<BatchCancelArgs>

Triggers when cancel the batch edit changes batch mode.

batchDelete

EmitType<BatchDeleteArgs>

Triggers when records are deleted in batch mode.

beforeBatchAdd

EmitType<BeforeBatchAddArgs>

Triggers before records are added in batch mode.

beforeBatchDelete

EmitType<BeforeBatchDeleteArgs>

Triggers before records are deleted in batch mode.

beforeBatchSave

EmitType<BeforeBatchSaveArgs>

Triggers before records are saved in batch mode.

beforeCopy

EmitType<BeforeCopyEventArgs>

Triggers before Grid copy action.

beforeDataBound

EmitType<BeforeDataBoundArgs>

Triggers before data is bound to Grid.

beforeExcelExport

EmitType<Object>

Triggers before Grid data is exported to Excel file.

beforeOpenColumnChooser

EmitType<ColumnChooserEventArgs>

Triggers before the columnChooser open.

beforePdfExport

EmitType<Object>

Triggers before Grid data is exported to PDF document.

beforePrint

EmitType<PrintEventArgs>

Triggers before the print action starts.

beginEdit

EmitType<BeginEditArgs>

Triggers before the record is to be edit.

cellDeselected

EmitType<CellDeselectEventArgs>

Triggers when a particular selected cell is deselected.

cellDeselecting

EmitType<CellDeselectEventArgs>

Triggers before the selected cell is deselecting.

cellEdit

EmitType<CellEditArgs>

Triggers when the cell is being edited.

cellSave

EmitType<CellSaveArgs>

Triggers when cell is saved.

cellSaved

EmitType<CellSaveArgs>

Triggers when cell is saved.

cellSelected

EmitType<CellSelectEventArgs>

Triggers after a cell is selected.

cellSelecting

EmitType<CellSelectingEventArgs>

Triggers before any cell selection occurs.

checkBoxChange

EmitType<CheckBoxChangeEventArgs>

Triggers when the check box state change in checkbox column.

columnDrag

EmitType<ColumnDragEventArgs>

Triggers when column header element is dragged (moved) continuously.

columnDragStart

EmitType<ColumnDragEventArgs>

Triggers when column header element drag (move) starts.

columnDrop

EmitType<ColumnDragEventArgs>

Triggers when a column header element is dropped on the target column.

columnMenuClick

EmitType<MenuEventArgs>

Triggers when click on column menu.

columnMenuOpen

EmitType<ColumnMenuOpenEventArgs>

Triggers before column menu opens.

contextMenuClick

EmitType<MenuEventArgs>

Triggers when click on context menu.

contextMenuOpen

EmitType<BeforeOpenCloseMenuEventArgs>

Triggers before context menu opens.

created

EmitType<Object>

Triggers when the component is created.

dataBound

EmitType<Object>

Triggers when data source is populated in the Grid.

dataSourceChanged

EmitType<DataSourceChangedEventArgs>

Triggers when the grid data is added, deleted and updated. Invoke the done method from the argument to start render after edit operation.

dataStateChange

EmitType<DataStateChangeEventArgs>

Triggers when the grid actions such as Sorting, Paging, Grouping etc., are done. In this event,the current view data and total record count should be assigned to the dataSource based on the action performed.

destroyed

EmitType<Object>

Triggers when the component is destroyed.

detailDataBound

EmitType<DetailDataBoundEventArgs>

Triggers after detail row expands.

This event triggers at initial expand.

excelExportComplete

EmitType<ExcelExportCompleteArgs>

Triggers after Grid data is exported to Excel file.

excelHeaderQueryCellInfo

EmitType<ExcelHeaderQueryCellInfoEventArgs>

Triggers before exporting each header cell to Excel file. You can also customize the Excel cells.

excelQueryCellInfo

EmitType<ExcelQueryCellInfoEventArgs>

Triggers before exporting each cell to Excel file. You can also customize the Excel cells.

exportDetailDataBound

EmitType<ExportDetailDataBoundEventArgs>

Triggers before exporting each detail Grid to PDF document.

headerCellInfo

EmitType<HeaderCellInfoEventArgs>

Triggered for stacked header.

load

EmitType<Object>

This event allows customization of Grid properties before rendering.

pdfExportComplete

EmitType<PdfExportCompleteArgs>

Triggers after Grid data is exported to PDF document.

pdfHeaderQueryCellInfo

EmitType<PdfHeaderQueryCellInfoEventArgs>

Triggers before exporting each header cell to PDF document. You can also customize the PDF cells.

pdfQueryCellInfo

EmitType<PdfQueryCellInfoEventArgs>

Triggers before exporting each cell to PDF document. You can also customize the PDF cells.

printComplete

EmitType<PrintEventArgs>

Triggers after print action is completed.

queryCellInfo

EmitType<QueryCellInfoEventArgs>

Triggered every time a request is made to access cell information, element, or data. This will be triggered before the cell element is appended to the Grid element.

recordDoubleClick

EmitType<RecordDoubleClickEventArgs>

Triggers when record is double clicked.

resizeStart

EmitType<ResizeArgs>

Triggers when column resize starts.

resizeStop

EmitType<ResizeArgs>

Triggers when column resize ends.

resizing

EmitType<ResizeArgs>

Triggers on column resizing.

rowDataBound

EmitType<RowDataBoundEventArgs>

Triggered every time a request is made to access row information, element, or data. This will be triggered before the row element is appended to the Grid element.

rowDeselected

EmitType<RowDeselectEventArgs>

Triggers when a selected row is deselected.

rowDeselecting

EmitType<RowDeselectEventArgs>

Triggers before deselecting the selected row.

rowDrag

EmitType<RowDragEventArgs>

Triggers when row elements are dragged (moved) continuously.

rowDragStart

EmitType<RowDragEventArgs>

Triggers when row element’s drag(move) starts.

rowDragStartHelper

EmitType<RowDragEventArgs>

Triggers when row element’s before drag(move).

rowDrop

EmitType<RowDragEventArgs>

Triggers when row elements are dropped on the target row.

rowSelected

EmitType<RowSelectEventArgs>

Triggers after a row is selected.

rowSelecting

EmitType<RowSelectingEventArgs>

Triggers before row selection occurs.

toolbarClick

EmitType<ClickEventArgs>

Triggers when toolbar item is clicked.

aggregates

AggregateRowModel[]

Configures the Grid aggregate rows.

Check the Aggregates for its configuration.

allowExcelExport

boolean

If allowExcelExport set to true, then it will allow the user to export grid to Excel file.

Check the ExcelExport to configure exporting document.

allowFiltering

boolean

If allowFiltering set to true the filter bar will be displayed. If set to false the filter bar will not be displayed. Filter bar allows the user to filter grid records with required criteria.

Check the Filtering to customize its default behavior.

allowGrouping

boolean

If allowGrouping set to true, then it will allow the user to dynamically group or ungroup columns. Grouping can be done by drag and drop columns from column header to group drop area.

Check the Grouping to customize its default behavior.

allowMultiSorting

boolean

If allowMultiSorting set to true, then it will allow the user to sort multiple column in the grid.

allowSorting should be true.

allowPaging

boolean

If allowPaging is set to true, the pager renders at the footer of the Grid. It is used to handle page navigation in the Grid.

Check the Paging to configure the grid pager.

allowPdfExport

boolean

If allowPdfExport set to true, then it will allow the user to export grid to Pdf file.

Check the Pdfexport to configure the exporting document.

allowReordering

boolean

If allowReordering is set to true, Grid columns can be reordered. Reordering can be done by drag and drop of a particular column from one index to another index.

If Grid is rendered with stacked headers, reordering is allowed only at the same level as the column headers.

allowResizing

boolean

If allowResizing is set to true, Grid columns can be resized.

allowRowDragAndDrop

boolean

If allowRowDragAndDrop is set to true, you can drag and drop grid rows at another grid.

allowSelection

boolean

If allowSelection is set to true, it allows selection of (highlight row) Grid records by clicking it.

allowSorting

boolean

If allowSorting is set to true, it allows sorting of grid records when column header is clicked.

Check the Sorting to customize its default behavior.

allowTextWrap

boolean

If allowTextWrap set to true, then text content will wrap to the next line when its text content exceeds the width of the Column Cells.

childGrid

GridModel

Defines Grid options to render child Grid. It requires the queryString for parent and child relationship.

Check the Child Grid for its configuration.

columnMenuItems

string[] | ColumnMenuItemModel[]

columnMenuItems defines both built-in and custom column menu items.

The available built-in items are,

  • AutoFitAll - Auto fit the size of all columns.
  • AutoFit - Auto fit the current column.
  • Group - Group by current column.
  • Ungroup - Ungroup by current column.
  • SortAscending - Sort the current column in ascending order.
  • SortDescending - Sort the current column in descending order.
  • Filter - Filter options will show based on filterSettings property like checkbox filter, excel filter, menu filter.

columnQueryMode

string

columnQueryModeprovides options to retrive data from the datasource.Their types are

  • All: It Retrives whole datasource.
  • Schema: Retrives data for all the defined columns in grid from the datasource.
  • ExcludeHidden: Retrives data only for visible columns of grid from the dataSource.

columns

Column[] | string[] | ColumnModel[]

Defines the schema of dataSource. If the columns declaration is empty or undefined then the columns are automatically generated from data source.

contextMenuItems

string[] | ContextMenuItemModel[]

contextMenuItems defines both built-in and custom context menu items.

The available built-in items are,

  • AutoFitAll - Auto fit the size of all columns.
  • AutoFit - Auto fit the current column.
  • Group - Group by current column.
  • Ungroup - Ungroup by current column.
  • Edit - Edit the current record.
  • Delete - Delete the current record.
  • Save - Save the edited record.
  • Cancel - Cancel the edited state.
  • Copy - Copy the selected records.
  • PdfExport - Export the grid as Pdf format.
  • ExcelExport - Export the grid as Excel format.
  • CsvExport - Export the grid as CSV format.
  • SortAscending - Sort the current column in ascending order.
  • SortDescending - Sort the current column in descending order.
  • FirstPage - Go to the first page.
  • PrevPage - Go to the previous page.
  • LastPage - Go to the last page.
  • NextPage - Go to the next page.

dataSource

Object | DataManager | DataResult

It is used to render grid table rows. If the dataSource is an array of JavaScript objects, then Grid will create instance of DataManager from this dataSource. If the dataSource is an existing DataManager, the Grid will not initialize a new one.

Check the available Adaptors to customize the data operation.

detailTemplate

string

The detail template allows you to show or hide additional information about a particular row.

It accepts either the template string or the HTML element ID.

{% codeBlock src=“grid/detail-template-api/index.ts” %}{% endcodeBlock %}

editSettings

EditSettingsModel

Configures the edit settings.

enableAltRow

boolean

If enableAltRow is set to true, the grid will render with e-altrow CSS class to the alternative tr elements.

Check the AltRow to customize the styles of alternative rows.

enableAutoFill

boolean

If enableAutoFill is set to true, then the auto fill icon will displayed on cell selection for copy cells. It requires the selection mode to be Cell and cellSelectionMode to be Box.

enableColumnVirtualization

boolean

If enableColumnVirtualization set to true, then the Grid will render only the columns visible within the view-port and load subsequent columns on horizontal scrolling. This helps to load large dataset of columns in Grid.

enableHover

boolean

If enableHover is set to true, the row hover is enabled in the Grid.

enablePersistence

boolean

Enable or disable persisting component’s state between page reloads.

enableRtl

boolean

Enable or disable rendering component in right to left direction.

enableVirtualization

boolean

If enableVirtualization set to true, then the Grid will render only the rows visible within the view-port and load subsequent rows on vertical scrolling. This helps to load large dataset in Grid.

filterSettings

FilterSettingsModel

Configures the filter settings of the Grid.

frozenColumns

number

Gets or sets the number of frozen columns.

frozenRows

number

Gets or sets the number of frozen rows.

gridLines

string

Defines the mode of grid lines. The available modes are,

  • Both: Displays both horizontal and vertical grid lines.
  • None: No grid lines are displayed.
  • Horizontal: Displays the horizontal grid lines only.
  • Vertical: Displays the vertical grid lines only.
  • Default: Displays grid lines based on the theme.

groupSettings

GroupSettingsModel

Configures the group settings.

height

string | number

Defines the scrollable height of the grid content.

hierarchyPrintMode

string

Defines the hierarchy grid print modes. The available modes are

  • Expanded - Prints the master grid with expanded child grids.
  • All - Prints the master grid with all the child grids.
  • None - Prints the master grid alone.

locale

string

Overrides the global culture and localization value for this component. Default global culture is ‘en-US’.

pageSettings

PageSettingsModel

Configures the pager in the Grid.

printMode

string

Defines the print modes. The available print modes are

  • AllPages: Prints all pages of the Grid.
  • CurrentPage: Prints the current page of the Grid.

query

Query

Defines the external Query that will be executed along with data processing.

queryString

string

Defines the relationship between parent and child datasource. It acts as the foreign key for parent datasource.

rowDropSettings

RowDropSettingsModel

Configures the row drop settings.

rowHeight

number

Defines the height of Grid rows.

rowTemplate

string

The row template that renders customized rows from the given template. By default, Grid renders a table row for every data source item.

searchSettings

SearchSettingsModel

Configures the search behavior in the Grid.

selectedRowIndex

number

The selectedRowIndex allows you to select a row at initial rendering. You can also get the currently selected row index.

selectionSettings

SelectionSettingsModel

Configures the selection settings.

showColumnChooser

boolean

If showColumnChooser is set to true, it allows you to dynamically show or hide columns.

Check the ColumnChooser for its configuration.

showColumnMenu

boolean

If showColumnMenu set to true, then it will enable the column menu options in each columns.

Check the Column menu for its configuration.

sortSettings

SortSettingsModel

Configures the sort settings.

textWrapSettings

TextWrapSettingsModel

Configures the text wrap in the Grid.

toolbar

[]

toolbar defines the ToolBar items of the Grid. It contains built-in and custom toolbar items. If a string value is assigned to the toolbar option, it is considered as the template for the whole Grid ToolBar. If an array value is assigned, it is considered as the list of built-in and custom toolbar items in the Grid’s Toolbar.

The available built-in ToolBar items are:

  • Add: Adds a new record.
  • Edit: Edits the selected record.
  • Update: Updates the edited record.
  • Delete: Deletes the selected record.
  • Cancel: Cancels the edit state.
  • Search: Searches records by the given key.
  • Print: Prints the Grid.
  • ExcelExport - Export the Grid to Excel(excelExport() method manually to make export.)
  • PdfExport - Export the Grid to PDF(pdfExport() method manually to make export.)
  • CsvExport - Export the Grid to CSV(csvExport() method manually to make export.)

    The following code example implements the custom toolbar items.

    Check the Toolbar to customize its default items.

{% codeBlock src=“grid/toolbar-api/index.ts” %}{% endcodeBlock %}

width

string | number

Defines the Grid width.

Contents
Contents