@syncfusion/ej2-grids
Version:
Feature-rich JavaScript datagrid (datatable) control with built-in support for editing, filtering, grouping, paging, sorting, and exporting to Excel.
1,434 lines • 129 kB
TypeScript
import { Component, ModuleDeclaration, ChildProperty, TouchEventArgs } from '@syncfusion/ej2-base';
import { INotifyPropertyChanged, L10n } from '@syncfusion/ej2-base';
import { KeyboardEvents, EmitType } from '@syncfusion/ej2-base';
import { Query, DataManager } from '@syncfusion/ej2-data';
import { ItemModel, ClickEventArgs } from '@syncfusion/ej2-navigations';
import { GridModel, ResizeSettingsModel } from './grid-model';
import { ReturnType, BatchChanges } from '../base/type';
import { IDialogUI, ScrollPositionType, ActionArgs, ExportGroupCaptionEventArgs, FilterUI, LazyLoadArgs, ContextMenuClickEventArgs, NotifyArgs, ExportHeaders, DetailTemplateDetachArgs } from './interface';
import { AggregateQueryCellInfoEventArgs, IGrid } from './interface';
import { IRenderer, IValueFormatter, IFilterOperator, IIndex, RowDataBoundEventArgs, QueryCellInfoEventArgs } from './interface';
import { CellDeselectEventArgs, CellSelectEventArgs, CellSelectingEventArgs, ParentDetails, ContextMenuItemModel } from './interface';
import { PdfQueryCellInfoEventArgs, ExcelQueryCellInfoEventArgs, ExcelExportProperties, PdfExportProperties } from './interface';
import { PdfHeaderQueryCellInfoEventArgs, ExcelHeaderQueryCellInfoEventArgs, ExportDetailDataBoundEventArgs, ExportDetailTemplateEventArgs } from './interface';
import { ColumnMenuOpenEventArgs, BatchCancelArgs, RecordDoubleClickEventArgs, DataResult } from './interface';
import { HeaderCellInfoEventArgs, KeyboardEventArgs, RecordClickEventArgs, AdaptiveDialogEventArgs } from './interface';
import { FailureEventArgs, FilterEventArgs, ColumnDragEventArgs, GroupEventArgs, PrintEventArgs, ICustomOptr, ReorderEventArgs } from './interface';
import { RowDeselectEventArgs, RowSelectEventArgs, RowSelectingEventArgs, RowDeselectingEventArgs, PageEventArgs, RowDragEventArgs } from './interface';
import { BeforeBatchAddArgs, BeforeBatchDeleteArgs, BeforeBatchSaveArgs, ResizeArgs, ColumnMenuItemModel } from './interface';
import { BatchAddArgs, BatchDeleteArgs, BeginEditArgs, CellEditArgs, CellSaveArgs, BeforeDataBoundArgs, RowInfo } from './interface';
import { DetailDataBoundEventArgs, ColumnChooserEventArgs, AddEventArgs, SaveEventArgs, EditEventArgs, DeleteEventArgs } from './interface';
import { ExcelExportCompleteArgs, PdfExportCompleteArgs, DataStateChangeEventArgs, DataSourceChangedEventArgs } from './interface';
import { SearchEventArgs, SortEventArgs, ISelectedCell, BeforeCopyEventArgs, ColumnDataStateChangeEventArgs } from './interface';
import { BeforePasteEventArgs, CheckBoxChangeEventArgs, CommandClickEventArgs, BeforeAutoFillEventArgs } from './interface';
import { Render } from '../renderer/render';
import { Column, ColumnModel, ActionEventArgs } from '../models/column';
import { SelectionType, GridLine, SortDirection, SelectionMode, PrintMode, FilterType, FilterBarMode } from './enum';
import { CheckboxSelectionType, HierarchyGridPrintMode, NewRowPosition, ClipMode, freezeMode, IndicatorType } from './enum';
import { WrapMode, ToolbarItems, ContextMenuItem, ColumnMenuItem, ToolbarItem, CellSelectionMode, EditMode, ResizeMode } from './enum';
import { ColumnQueryModeType, RowRenderingDirection, AdaptiveMode } from './enum';
import { Data } from '../actions/data';
import { ServiceLocator } from '../services/service-locator';
import { ColumnWidthService } from '../services/width-controller';
import { AriaService } from '../services/aria-service';
import { FocusStrategy } from '../services/focus-strategy';
import { SortSettingsModel, SelectionSettingsModel, FilterSettingsModel, SearchSettingsModel, EditSettingsModel } from './grid-model';
import { SortDescriptorModel, PredicateModel, RowDropSettingsModel, GroupSettingsModel, TextWrapSettingsModel, LoadingIndicatorModel } from './grid-model';
import { InfiniteScrollSettingsModel } from './grid-model';
import { PageSettingsModel, AggregateRowModel, AggregateColumnModel, ColumnChooserSettingsModel } from '../models/models';
import { Sort } from '../actions/sort';
import { Page } from '../actions/page';
import { Selection } from '../actions/selection';
import { Filter } from '../actions/filter';
import { Search } from '../actions/search';
import { Resize } from '../actions/resize';
import { Reorder } from '../actions/reorder';
import { RowDD } from '../actions/row-reorder';
import { ShowHide } from '../actions/show-hide';
import { Scroll } from '../actions/scroll';
import { InfiniteScroll } from '../actions/infinite-scroll';
import { Group } from '../actions/group';
import { Print } from '../actions/print';
import { DetailRow } from '../actions/detail-row';
import { Toolbar } from '../actions/toolbar';
import { Edit } from '../actions/edit';
import { Row } from '../models/row';
import { ColumnChooser } from '../actions/column-chooser';
import { ExcelExport } from '../actions/excel-export';
import { PdfExport } from '../actions/pdf-export';
import { Clipboard } from '../actions/clipboard';
import { ContextMenu } from '../actions/context-menu';
import { BeforeOpenCloseMenuEventArgs, MenuEventArgs } from '@syncfusion/ej2-navigations';
import { ColumnMenu } from '../actions/column-menu';
import { CheckState } from './enum';
import { Aggregate } from '../actions/aggregate';
import { ColumnDeselectEventArgs, ColumnSelectEventArgs, ColumnSelectingEventArgs } from './interface';
import { Workbook } from '@syncfusion/ej2-excel-export';
/**
* Represents the field name and direction of sort column.
*/
export declare class SortDescriptor extends ChildProperty<SortDescriptor> {
/**
* Defines the field name of sort column.
*
* @default ''
*/
field: string;
/**
* Defines the direction of sort column.
*
* @default ''
*/
direction: SortDirection;
/**
* @hidden
* Defines the sorted column whether or from grouping operation.
*
* @default false
*/
isFromGroup: boolean;
}
/**
* Configures the sorting behavior of Grid.
*/
export declare class SortSettings extends ChildProperty<SortSettings> {
/**
* Specifies the columns to sort at initial rendering of Grid.
* Also user can get current sorted columns.
*
* @default []
*/
columns: SortDescriptorModel[];
/**
* If `allowUnsort` set to false the user can not get the grid in unsorted state by clicking the sorted column header.
*
* @default true
*/
allowUnsort: boolean;
}
/**
* Represents the predicate for the filter column.
*/
export declare class Predicate extends ChildProperty<Predicate> {
/**
* Defines the field name of the filter column.
*
* @default ''
*/
field: string;
/**
* Defines the operator to filter records. The available operators and its supported data types are:
* <table>
* <tr>
* <td colspan=1 rowspan=1>
* Operator<br/></td><td colspan=1 rowspan=1>
* Description<br/></td><td colspan=1 rowspan=1>
* Supported Types<br/></td></tr>
* <tr>
* <td colspan=1 rowspan=1>
* startswith<br/></td><td colspan=1 rowspan=1>
* Checks whether the value begins with the specified value.<br/></td><td colspan=1 rowspan=1>
* String<br/></td></tr>
* <tr>
* <td colspan=1 rowspan=1>
* endswith<br/></td><td colspan=1 rowspan=1>
* Checks whether the value ends with the specified value.<br/><br/></td><td colspan=1 rowspan=1>
* <br/>String<br/></td></tr>
* <tr>
* <td colspan=1 rowspan=1>
* contains<br/></td><td colspan=1 rowspan=1>
* Checks whether the value contains the specified value.<br/><br/></td><td colspan=1 rowspan=1>
* <br/>String<br/></td></tr>
* <tr>
* <td colspan=1 rowspan=1>
* equal<br/></td><td colspan=1 rowspan=1>
* Checks whether the value is equal to the specified value.<br/><br/></td><td colspan=1 rowspan=1>
* <br/>String | Number | Boolean | Date<br/></td></tr>
* <tr>
* <td colspan=1 rowspan=1>
* notequal<br/></td><td colspan=1 rowspan=1>
* Checks for values that are not equal to the specified value.<br/><br/></td><td colspan=1 rowspan=1>
* <br/>String | Number | Boolean | Date<br/></td></tr>
* <tr>
* <td colspan=1 rowspan=1>
* greaterthan<br/></td><td colspan=1 rowspan=1>
* Checks whether the value is greater than the specified value.<br/><br/></td><td colspan=1 rowspan=1>
* Number | Date<br/></td></tr>
* <tr>
* <td colspan=1 rowspan=1>
* greaterthanorequal<br/></td><td colspan=1 rowspan=1>
* Checks whether the value is greater than or equal to the specified value.<br/><br/></td><td colspan=1 rowspan=1>
* <br/>Number | Date<br/></td></tr>
* <tr>
* <td colspan=1 rowspan=1>
* lessthan<br/></td><td colspan=1 rowspan=1>
* Checks whether the value is less than the specified value.<br/><br/></td><td colspan=1 rowspan=1>
* <br/>Number | Date<br/></td></tr>
* <tr>
* <td colspan=1 rowspan=1>
* lessthanorequal<br/></td><td colspan=1 rowspan=1>
* Checks whether the value is less than or equal to the specified value.<br/><br/></td><td colspan=1 rowspan=1>
* <br/>Number | Date<br/></td></tr>
* </table>
*
* @default null
*/
operator: string;
/**
* Defines the value used to filter records.
*
* @default ''
*/
value: string | number | Date | boolean | (string | number | Date | boolean)[];
/**
* If match case set to true, then filter records with exact match or else
* filter records with case insensitive(uppercase and lowercase letters treated as same).
*
* @default null
*/
matchCase: boolean;
/**
* If ignoreAccent is set to true, then filter ignores the diacritic characters or accents while filtering.
*
* @default false
*/
ignoreAccent: boolean;
/**
* Defines the relationship between one filter query and another by using AND or OR predicate.
*
* @default null
*/
predicate: string;
/**
* @hidden
* Defines the actual filter value for the filter column.
*/
actualFilterValue: Object;
/**
* @hidden
* Defines the actual filter operator for the filter column.
*/
actualOperator: Object;
/**
* @hidden
* Defines the type of the filter column.
*/
type: string;
/**
* @hidden
* Defines the predicate of filter column.
*/
ejpredicate: Object;
/**
* Defines the UID of filter column.
*
* @default ''
*/
uid: string;
/**
* @hidden
* Defines the foreignKey availability in filtered columns.
*/
isForeignKey: boolean;
/**
* Defines the condition to add the new predicates on existing predicate with "and"/"or" operator.
*
* @default ''
*/
condition: string;
}
/**
* Configures the infinite scroll behavior of Grid.
*/
export declare class InfiniteScrollSettings extends ChildProperty<InfiniteScrollSettings> {
/**
* If `enableCache` is set to true, the Grid will cache the loaded data to be reused next time it is needed.
*
* @default false
*/
enableCache: boolean;
/**
* Defines the number of blocks to be maintained in Grid while settings enableCache as true.
*
* @default 3
*/
maxBlocks: number;
/**
* Defines the number of blocks that will render at the initial Grid rendering.
*
* @default 3
*/
initialBlocks: number;
}
/**
* Configures the filtering behavior of the Grid.
*/
export declare class FilterSettings extends ChildProperty<FilterSettings> {
/**
* Specifies the columns to be filtered at initial rendering of the Grid. You can also get the columns that were currently filtered.
*
* @default []
*/
columns: PredicateModel[];
/**
* Defines options for filtering type. The available options are
* * `Menu` - Specifies the filter type as menu.
* * `CheckBox` - Specifies the filter type as checkbox.
* * `FilterBar` - Specifies the filter type as filterbar.
* * `Excel` - Specifies the filter type as checkbox.
*
* @default FilterBar
*/
type: FilterType;
/**
* Defines the filter bar modes. The available options are,
* * `OnEnter`: Initiates filter operation after Enter key is pressed.
* * `Immediate`: Initiates filter operation after a certain time interval. By default, time interval is 1500 ms.
*
* @default OnEnter
*/
mode: FilterBarMode;
/**
* Shows or hides the filtered status message on the pager.
*
* @default true
*/
showFilterBarStatus: boolean;
/**
* Defines the time delay (in milliseconds) in filtering records when the `Immediate` mode of filter bar is set.
*
* @default 1500
*/
immediateModeDelay: number;
/**
* The `operators` is used to override the default operators in filter menu. This should be defined by type wise
* (string, number, date and boolean). Based on the column type, this customize operator list will render in filter menu.
*
* > Check the [`Filter Menu Operator`](../../grid/filtering/filter-menu#customizing-filter-menu-operators-list) customization.
*
* @default null
*/
operators: ICustomOptr;
/**
* If ignoreAccent set to true, then filter ignores the diacritic characters or accents while filtering.
*
* > Check the [`Diacritics`](../../grid/filtering/#diacritics/) filtering.
*
* @default false
*/
ignoreAccent: boolean;
/**
* If `enableInfiniteScrolling` set to true, then the data will be loaded in Checkbox filter `Popup` content, when the scrollbar reaches the end.
* This helps to load large dataset in Checkbox filter `Popup` content.
* {% codeBlock src='grid/enableInfiniteScrolling/index.md' %}{% endcodeBlock %}
*
* @default false
*/
enableInfiniteScrolling: boolean;
/**
* If `enableInfiniteScrolling` set to true, For on demand request, Gets data from the parent data source based on given number of records count.
*
* @default 100
*/
itemsCount: number;
/**
* Defines the loading indicator. The available loading indicator are:
* * Spinner
* * Shimmer
*
* @default Shimmer
*/
loadingIndicator: IndicatorType;
/**
* If `enableCaseSensitivity` is set to true then searches grid records with exact match based on the filter
* operator. It will have no effect on number, boolean and Date fields.
*
* @default false
*/
enableCaseSensitivity: boolean;
/**
* If 'showFilterBarOperator' is set to true, then it renders the dropdownlist component to select the operator
* in filterbar input
*
* @default false
*/
showFilterBarOperator: boolean;
}
/**
* Configures the selection behavior of the Grid.
*/
export declare class SelectionSettings extends ChildProperty<SelectionSettings> {
/**
* Grid supports row, cell, and both (row and cell) selection mode.
*
* @default Row
*/
mode: SelectionMode;
/**
* The cell selection modes are flow and box. It requires the selection
* [`mode`](./selectionmode/) to be either cell or both.
* * `Flow`: Selects the range of cells between start index and end index that also includes the other cells of the selected rows.
* * `Box`: Selects the range of cells within the start and end column indexes that includes in between cells of rows within the range.
* * `BoxWithBorder`: Selects the range of cells as like Box mode with borders.
*
* @default Flow
*/
cellSelectionMode: CellSelectionMode;
/**
* Defines options for selection type. They are
* * `Single`: Allows selection of only a row or a cell.
* * `Multiple`: Allows selection of multiple rows or cells.
*
* @default Single
*/
type: SelectionType;
/**
* If 'checkboxOnly' set to true, then the Grid selection is allowed only through checkbox.
*
* > To enable checkboxOnly selection, should specify the column type as`checkbox`.
*
* @default false
*/
checkboxOnly: boolean;
/**
* If 'persistSelection' set to true, then the Grid selection is persisted on all operations.
* For persisting selection in the Grid, any one of the column should be enabled as a primary key.
*
* @default false
*/
persistSelection: boolean;
/**
* Defines options for checkbox selection Mode. They are
* * `Default`: This is the default value of the checkboxMode. In this mode, user can select multiple rows by clicking rows one by one.
* * `ResetOnRowClick`: In ResetOnRowClick mode, on clicking a row it will reset previously selected row and also multiple
* rows can be selected by using CTRL or SHIFT key.
*
* @default Default
*/
checkboxMode: CheckboxSelectionType;
/**
* If 'enableSimpleMultiRowSelection' set to true, then the user can able to perform multiple row selection with single clicks.
*
* @default false
*/
enableSimpleMultiRowSelection: boolean;
/**
* If 'enableToggle' set to true, then the user can able to perform toggle for the selected row.
*
* @default true
*/
enableToggle: boolean;
/**
* If 'allowColumnSelection' set to true, then the user can able to select the columns.
*
* @default false
*/
allowColumnSelection: boolean;
}
/**
* Configures the search behavior of the Grid.
*/
export declare class SearchSettings extends ChildProperty<SearchSettings> {
/**
* Specifies the collection of fields included in search operation. By default, bounded columns of the Grid are included.
*
* @default []
*/
fields: string[];
/**
* Specifies the key value to search Grid records at initial rendering.
* You can also get the current search key.
*
* @default ''
*/
key: string;
/**
* Defines the operator to search records. The available operators are:
* <table>
* <tr>
* <td colspan=1 rowspan=1>
* Operator<br/></td><td colspan=1 rowspan=1>
* Description<br/></td></tr>
* <tr>
* <td colspan=1 rowspan=1>
* startswith<br/></td><td colspan=1 rowspan=1>
* Checks whether the string begins with the specified string.<br/></td></tr>
* <tr>
* <td colspan=1 rowspan=1>
* endswith<br/></td><td colspan=1 rowspan=1>
* Checks whether the string ends with the specified string.<br/></td></tr>
* <tr>
* <td colspan=1 rowspan=1>
* contains<br/></td><td colspan=1 rowspan=1>
* Checks whether the string contains the specified string. <br/></td></tr>
* <tr>
* <td colspan=1 rowspan=1>
* equal<br/></td><td colspan=1 rowspan=1>
* Checks whether the string is equal to the specified string.<br/></td></tr>
* <tr>
* <td colspan=1 rowspan=1>
* notequal<br/></td><td colspan=1 rowspan=1>
* Checks for strings not equal to the specified string. <br/></td></tr>
* </table>
*
* @default 'contains'
*/
operator: string;
/**
* If `ignoreCase` is set to false, searches records that match exactly, else
* searches records that are case insensitive(uppercase and lowercase letters treated the same).
*
* @default true
*/
ignoreCase: boolean;
/**
* If ignoreAccent set to true, then filter ignores the diacritic characters or accents while filtering.
*
* > Check the [`Diacritics`](../../grid/filtering/#diacritics/) filtering.
*
* @default false
*/
ignoreAccent: boolean;
}
/**
* Configures the row drop settings of the Grid.
*/
export declare class RowDropSettings extends ChildProperty<RowDropSettings> {
/**
* Defines the ID of droppable component on which row drop should occur.
*
* @default null
*/
targetID: string;
}
/**
* Configures the text wrap settings of the Grid.
*/
export declare class TextWrapSettings extends ChildProperty<TextWrapSettings> {
/**
* The `wrapMode` property defines how the text in the grid cells should be wrapped. The available modes are:
* * `Both`: Wraps text in both the header and content cells.
* * `Content`: Wraps text in the content cells only.
* * `Header`: Wraps texts in the header cells only.
*
* @default Both
*/
wrapMode: WrapMode;
}
/**
* Configures the resize behavior of the Grid.
*/
export declare class ResizeSettings extends ChildProperty<ResizeSettings> {
/**
* Defines the mode of Grid column resizing. The available modes are:
* `Normal`: Columns will not be adjusted to fit the remaining space.
* `Auto`: Resized column width will be adjusted by other columns automatically.
*
* @default Normal
*/
mode: ResizeMode;
}
/**
* Configures the group behavior of the Grid.
*/
export declare class GroupSettings extends ChildProperty<GroupSettings> {
/**
* If `showDropArea` is set to true, the group drop area element will be visible at the top of the Grid.
*
* @default true
*/
showDropArea: boolean;
/**
* If `allowReordering` is set to true, Grid allows the grouped elements to be reordered.
*
* @default false
*/
allowReordering: boolean;
/**
* If `showToggleButton` set to true, then the toggle button will be showed in the column headers which can be used to group
* or ungroup columns by clicking them.
*
* @default false
*/
showToggleButton: boolean;
/**
* If `showGroupedColumn` is set to false, it hides the grouped column after grouping.
*
* @default false
*/
showGroupedColumn: boolean;
/**
* If `showUngroupButton` set to false, then ungroup button is hidden in dropped element.
* It can be used to ungroup the grouped column when click on ungroup button.
*
* @default true
*/
showUngroupButton: boolean;
/**
* If `disablePageWiseAggregates` set to true, then the group aggregate value will
* be calculated from the whole data instead of paged data and two requests will be made for each page
* when Grid bound with remote service.
*
* @default false
*/
disablePageWiseAggregates: boolean;
/**
* Specifies the column names to group at initial rendering of the Grid.
* You can also get the currently grouped columns.
*
* @default []
*/
columns: string[];
/**
* The Caption Template allows user to display the string or HTML element in group caption.
* > It accepts either the
* [template string](https://ej2.syncfusion.com/documentation/common/template-engine/) or the HTML element ID.
*
* @default null
* @aspType string
*/
captionTemplate: string | Object | Function;
/**
* The Lazy load grouping, allows the Grid to render only the initial level caption rows in collapsed state while grouping.
* The child rows of each caption will render only when we expand the captions.
*
* @default false
*/
enableLazyLoading: boolean;
}
/**
* Configures the edit behavior of the Grid.
*/
export declare class EditSettings extends ChildProperty<EditSettings> {
/**
* If `allowAdding` is set to true, new records can be added to the Grid.
*
* @default false
*/
allowAdding: boolean;
/**
* If `allowEditing` is set to true, values can be updated in the existing record.
*
* @default false
*/
allowEditing: boolean;
/**
* If `allowDeleting` is set to true, existing record can be deleted from the Grid.
*
* @default false
*/
allowDeleting: boolean;
/**
* Defines the mode to edit. The available editing modes are:
* * Normal
* * Dialog
* * Batch
*
* @default Normal
*/
mode: EditMode;
/**
* If `allowEditOnDblClick` is set to false, Grid will not allow editing of a record on double click.
*
* @default true
*/
allowEditOnDblClick: boolean;
/**
* if `showConfirmDialog` is set to false, confirm dialog does not show when batch changes are saved or discarded.
*
* @default true
*/
showConfirmDialog: boolean;
/**
* If `showDeleteConfirmDialog` is set to true, confirm dialog will show delete action. You can also cancel delete command.
*
* @default false
*/
showDeleteConfirmDialog: boolean;
/**
* Defines the custom edit elements for the dialog template.
*
* @default null
* @aspType string
*/
template: string | Object | Function;
/**
* Defines the custom edit elements for the dialog header template.
*
* @default null
* @aspType string
*/
headerTemplate: string | Object | Function;
/**
* Defines the custom edit elements for the dialog footer template.
*
* @default null
* @aspType string
*/
footerTemplate: string | Object | Function;
/**
* Defines the position of adding a new row. The available position are:
* * Top
* * Bottom
*
* @default Top
*/
newRowPosition: NewRowPosition;
/**
* Defines the dialog params to edit.
*
* @default {}
*/
dialog: IDialogUI;
/**
* If allowNextRowEdit is set to true, editing is done to next row. By default allowNextRowEdit is set to false.
*
* @default false
*/
allowNextRowEdit: boolean;
/**
* If `showAddNewRow` is set to true, it indicates whether to display the add new form by default in the grid.
*
* @default false
*/
showAddNewRow: boolean;
}
/**
* Configures the Loading Indicator of the Grid.
*/
export declare class LoadingIndicator extends ChildProperty<LoadingIndicator> {
/**
* Defines the loading indicator. The available loading indicator are:
* * Spinner
* * Shimmer
*
* @default Spinner
*/
indicatorType: IndicatorType;
}
/**
* Represents the Grid component.
* ```html
* <div id="grid"></div>
* <script>
* var gridObj = new Grid({ allowPaging: true });
* gridObj.appendTo("#grid");
* </script>
* ```
*/
export declare class Grid extends Component<HTMLElement> implements INotifyPropertyChanged {
private gridPager;
private isInitial;
isPreventScrollEvent: boolean;
private columnModel;
private rowTemplateFn;
private emptyRecordTemplateFn;
private editTemplateFn;
private editHeaderTemplateFn;
private editFooterTemplateFn;
private columnChooserTemplateFn;
private columnChooserHeaderTemplateFn;
private columnChooserFooterTemplateFn;
private detailTemplateFn;
private sortedColumns;
private footerElement;
private inViewIndexes;
private mediaCol;
private getShowHideService;
private keyA;
private frozenRightCount;
private freezeColumnRefresh;
private rightcount;
private frozenLeftCount;
private leftcount;
private tablesCount;
private movableCount;
private movablecount;
private fixedcount;
private fixedCount;
private visibleFrozenLeft;
private visibleFrozenFixed;
private frozenName;
private isPreparedFrozenColumns;
private visibleFrozenRight;
private visibleMovable;
private frozenLeftColumns;
private frozenRightColumns;
private movableColumns;
private fixedColumns;
private stackedLeft;
private stackedRight;
private stackedFixed;
private stackedMovable;
private stackedarrayLeft;
private stackedarrayRight;
private stackedarrayFixed;
private stackedarrayMovable;
private media;
private headerMaskTable;
private contentMaskTable;
private footerContentMaskTable;
private maskRowContentScroll;
private autoFitColumnsResize;
/** @hidden */
invokedFromMedia: boolean;
/** @hidden */
tableIndex: number;
private dataBoundFunction;
private dataToBeUpdated;
private componentRefresh;
private isChangeDataSourceCall;
private mergedColumns;
/** @hidden */
recordsCount: number;
/** @hidden */
isVirtualAdaptive: boolean;
/** @hidden */
/**
* * If `requireTemplateRef` is set to false in the load event, then the template element can't be accessed in grid queryCellInfo, and rowDataBound events.
* * By default, React's grid queryCellInfo and rowDataBound events allow access to the template element.
* * Avoid accessing the template elements in the grid queryCellInfo and rowDataBound events to improve rendering performance by setting this value as false.
*
* @default true
*/
requireTemplateRef: boolean;
/** @hidden */
vRows: Row<Column>[];
/** @hidden */
vcRows: Row<Column>[];
/** @hidden */
vGroupOffsets: {
[x: number]: number;
};
/** @hidden */
isInitialLoad: boolean;
/** @hidden */
private rowUid;
/**
* @hidden
*/
mergeCells: {
[key: string]: number;
};
/**
* @hidden
*/
checkAllRows: CheckState;
/**
* @hidden
*/
isCheckBoxSelection: boolean;
/**
* @hidden
*/
isPersistSelection: boolean;
/**
* Gets the currently visible records of the Grid.
*
* @default []
*/
currentViewData: Object[];
/** @hidden */
/**
* Gets the parent Grid details.
*
* @default {}
*/
parentDetails: ParentDetails;
/** @hidden */
printGridParent: IGrid;
/** @hidden */
isEdit: boolean;
/** @hidden */
commonQuery: Query;
/** @hidden */
scrollPosition: ScrollPositionType;
/** @hidden */
isLastCellPrimaryKey: boolean;
/** @hidden */
translateX: number;
/** @hidden */
filterOperators: IFilterOperator;
/** @hidden */
localeObj: L10n;
/** @hidden */
isManualRefresh: boolean;
/** @hidden */
isAutoFitColumns: boolean;
/** @hidden */
enableDeepCompare: boolean;
/** @hidden */
totalDataRecordsCount: number;
/** @hidden */
disableSelectedRecords: Object[];
/** @hidden */
partialSelectedRecords: Object[];
/** @hidden */
lazyLoadRender: IRenderer;
/** @hidden */
isSpan: boolean;
/** @hidden */
islazyloadRequest: boolean;
/** @hidden */
isAddNewRow: boolean;
/** @hidden */
addNewRowFocus: boolean;
/** @hidden */
selectVirtualRowOnAdd: boolean;
isSelectedRowIndexUpdating: boolean;
private defaultLocale;
private keyConfigs;
private keyPress;
private toolTipObj;
private prevElement;
private stackedColumn;
private isExcel;
/** @hidden */
lockcolPositionCount: number;
/** @hidden */
prevPageMoving: boolean;
/** @hidden */
pageTemplateChange: boolean;
/** @hidden */
isAutoGen: boolean;
/** @hidden */
isAutoGenerateColumns: boolean;
/** @hidden */
pageRequireRefresh: boolean;
private mediaBindInstance;
/** @hidden */
commandDelIndex: number;
/** @hidden */
preventAutoFit: boolean;
/** @hidden */
asyncTimeOut: number;
/** @hidden */
isExportGrid: boolean;
/** @hidden */
isWidgetsDestroyed: boolean;
/**
* @hidden
*/
renderModule: Render;
/**
* @hidden
*/
headerModule: IRenderer;
/**
* @hidden
*/
contentModule: IRenderer;
/**
* @hidden
*/
valueFormatterService: IValueFormatter;
/**
* @hidden
*/
serviceLocator: ServiceLocator;
/**
* @hidden
*/
ariaService: AriaService;
/**
* The `keyboardModule` is used to manipulate keyboard interactions in the Grid.
*/
keyboardModule: KeyboardEvents;
/**
* @hidden
*/
widthService: ColumnWidthService;
/**
* The `rowDragAndDropModule` is used to manipulate row reordering in the Grid.
*/
rowDragAndDropModule: RowDD;
/**
* The `pagerModule` is used to manipulate paging in the Grid.
*/
pagerModule: Page;
/**
* The `sortModule` is used to manipulate sorting in the Grid.
*/
sortModule: Sort;
/**
* The `filterModule` is used to manipulate filtering in the Grid.
*/
filterModule: Filter;
/**
* The `selectionModule` is used to manipulate selection behavior in the Grid.
*/
selectionModule: Selection;
/**
* The `showHider` is used to manipulate column's show/hide operation in the Grid.
*
* @default ''
*/
showHider: ShowHide;
/**
* The `searchModule` is used to manipulate searching in the Grid.
*/
searchModule: Search;
/**
* The `scrollModule` is used to manipulate scrolling in the Grid.
*/
scrollModule: Scroll;
/**
* The `infiniteScrollModule` is used to manipulate infinite scrolling in the Grid.
*/
infiniteScrollModule: InfiniteScroll;
/**
* The `reorderModule` is used to manipulate reordering in the Grid.
*/
reorderModule: Reorder;
/**
* `resizeModule` is used to manipulate resizing in the Grid.
*
* @hidden
*/
resizeModule: Resize;
/**
* The `groupModule` is used to manipulate grouping behavior in the Grid.
*/
groupModule: Group;
/**
* The `printModule` is used to handle the printing feature of the Grid.
*/
printModule: Print;
/**
* The `excelExportModule` is used to handle Excel exporting feature in the Grid.
*/
excelExportModule: ExcelExport;
/**
* The `pdfExportModule` is used to handle PDF exporting feature in the Grid.
*/
pdfExportModule: PdfExport;
/**
* `detailRowModule` is used to handle detail rows rendering in the Grid.
*
* @hidden
*/
detailRowModule: DetailRow;
/**
* The `toolbarModule` is used to manipulate ToolBar items and its action in the Grid.
*/
toolbarModule: Toolbar;
/**
* The `contextMenuModule` is used to handle context menu items and its action in the Grid.
*/
contextMenuModule: ContextMenu;
/**
* The `columnMenuModule` is used to manipulate column menu items and its action in the Grid.
*/
columnMenuModule: ColumnMenu;
/**
* The `editModule` is used to handle Grid content manipulation.
*/
editModule: Edit;
/**
* `clipboardModule` is used to handle Grid copy action.
*/
clipboardModule: Clipboard;
/**
* `columnchooserModule` is used to dynamically show or hide the Grid columns.
*
* @hidden
*/
columnChooserModule: ColumnChooser;
/**
* The `aggregateModule` is used to manipulate aggregate functionality in the Grid.
*
* @hidden
*/
aggregateModule: Aggregate;
private loggerModule;
private enableLogger;
/** @hidden */
focusModule: FocusStrategy;
adaptiveDlgTarget: HTMLElement;
protected needsID: boolean;
/**
* Defines the schema of dataSource.
* If the `columns` declaration is empty or undefined then the `columns` are automatically generated from data source.
* {% codeBlock src='grid/columns/index.md' %}{% endcodeBlock %}
*
* @default []
*/
columns: Column[] | string[] | ColumnModel[];
/**
* If `enableAltRow` is set to true, the grid will render with `e-altrow` CSS class to the alternative tr elements.
* > Check the [`AltRow`](../../grid/row/#styling-alternate-rows/) to customize the styles of alternative rows.
* {% codeBlock src='grid/enableAltRow/index.md' %}{% endcodeBlock %}
*
* @default true
*/
enableAltRow: boolean;
/**
* If `enableHover` is set to true, the row hover is enabled in the Grid.
* {% codeBlock src='grid/enableHover/index.md' %}{% endcodeBlock %}
*
* @default true
*/
enableHover: 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`.
* {% codeBlock src='grid/enableAutoFill/index.md' %}{% endcodeBlock %}
*
* @default false
*/
enableAutoFill: boolean;
/**
* Enables or disables the key board interaction of Grid.
*
* @default true
*/
allowKeyboard: boolean;
/**
* If 'enableStickyHeader' set to true, then the user can able to make the column headers visible when the document is scrolled.
*
* @default false
*/
enableStickyHeader: boolean;
/**
* Specifies whether to display or remove the untrusted HTML values in the Grid component.
* If 'enableHtmlSanitizer' set to true, the component will sanitize any suspected untrusted strings and scripts before rendering them.
*
* @default false
*/
enableHtmlSanitizer: 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.
* {% codeBlock src='grid/allowTextWrap/index.md' %}{% endcodeBlock %}
*
* @default false
*/
allowTextWrap: boolean;
/**
* Configures the text wrap in the Grid.
* {% codeBlock src='grid/textWrapSettings/index.md' %}{% endcodeBlock %}
*
* @default {wrapMode:"Both"}
*/
textWrapSettings: TextWrapSettingsModel;
/**
* Defines the resizing behavior of the Grid.
*
* @default {mode:"Normal"}
*/
resizeSettings: ResizeSettingsModel;
/**
* 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`](../../grid/paging/) to configure the grid pager.
* {% codeBlock src='grid/allowPaging/index.md' %}{% endcodeBlock %}
*
* @default false
*/
allowPaging: boolean;
/**
* Configures the pager in the Grid.
* {% codeBlock src='grid/pageSettings/index.md' %}{% endcodeBlock %}
*
* @default {currentPage: 1, pageSize: 12, pageCount: 8, enableQueryString: false, pageSizes: false, template: null}
*/
pageSettings: PageSettingsModel;
/**
* Configures the Loading Indicator of the Grid.
*
* @default {indicatorType: 'Spinner'}
*/
loadingIndicator: LoadingIndicatorModel;
/**
* Specifies the shimmer effect for Grid virtual and infinite scrolling.
*
* @default true
*/
enableVirtualMaskRow: 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.
* {% codeBlock src='grid/enableVirtualization/index.md' %}{% endcodeBlock %}
*
* @default false
*/
enableVirtualization: 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.
* {% codeBlock src='grid/enableColumnVirtualization/index.md' %}{% endcodeBlock %}
*
* @default false
*/
enableColumnVirtualization: boolean;
/**
* If `enableInfiniteScrolling` set to true, then the data will be loaded in Grid when the scrollbar reaches the end.
* This helps to load large dataset in Grid.
* {% codeBlock src='grid/enableInfiniteScrolling/index.md' %}{% endcodeBlock %}
*
* @default false
*/
enableInfiniteScrolling: boolean;
/**
* Configures the search behavior in the Grid.
* {% codeBlock src='grid/searchSettings/index.md' %}{% endcodeBlock %}
*
* @default { ignoreCase: true, fields: [], operator: 'contains', key: '' }
*/
searchSettings: SearchSettingsModel;
/**
* If `allowSorting` is set to true, it allows sorting of grid records when column header is clicked.
*
* > Check the [`Sorting`](../../grid/sorting/) to customize its default behavior.
* {% codeBlock src='grid/allowSorting/index.md' %}{% endcodeBlock %}
*
* @default false
*/
allowSorting: boolean;
/**
* Defines the mode of clip. The available modes are,
* `Clip`: Truncates the cell content when it overflows its area.
* `Ellipsis`: Displays ellipsis when the cell content overflows its area.
* `EllipsisWithTooltip`: Displays ellipsis when the cell content overflows its area,
* also it will display the tooltip while hover on ellipsis is applied.
* {% codeBlock src='grid/clipMode/index.md' %}{% endcodeBlock %}
*
* @default Ellipsis
*/
clipMode: ClipMode;
/**
* If `allowMultiSorting` set to true, then it will allow the user to sort multiple column in the grid.
* > `allowSorting` should be true.
* {% codeBlock src='grid/allowMultiSorting/index.md' %}{% endcodeBlock %}
*
* @default false
*/
allowMultiSorting: boolean;
/**
* If `allowExcelExport` set to true, then it will allow the user to export grid to Excel file.
*
* > Check the [`ExcelExport`](../../grid/excel-exporting/) to configure exporting document.
* {% codeBlock src='grid/allowExcelExport/index.md' %}{% endcodeBlock %}
*
* @default false
*/
allowExcelExport: boolean;
/**
* If `allowPdfExport` set to true, then it will allow the user to export grid to Pdf file.
*
* > Check the [`Pdfexport`](../../grid/pdf-export/) to configure the exporting document.
* {% codeBlock src='grid/allowPdfExport/index.md' %}{% endcodeBlock %}
*
* @default false
*/
allowPdfExport: boolean;
/**
* Configures the sort settings.
* {% codeBlock src='grid/sortSettings/index.md' %}{% endcodeBlock %}
*
* @default {columns:[]}
*/
sortSettings: SortSettingsModel;
/**
* Configures the infinite scroll settings.
* {% codeBlock src='grid/infiniteScrollSettings/index.md' %}{% endcodeBlock %}
*
* @default { enableCache: false, maxBlocks: 5, initialBlocks: 5 }
*/
infiniteScrollSettings: InfiniteScrollSettingsModel;
/**
* If `allowSelection` is set to true, it allows selection of (highlight row) Grid records by clicking it.
* {% codeBlock src='grid/allowSelection/index.md' %}{% endcodeBlock %}
*
* @default true
*/
allowSelection: boolean;
/**
* The `selectedRowIndex` allows you to select a row at initial rendering.
* You can also get the currently selected row index.
* {% codeBlock src='grid/selectedRowIndex/index.md' %}{% endcodeBlock %}
*
* @default -1
*/
selectedRowIndex: number;
/**
* Configures the selection settings.
* {% codeBlock src='grid/selectionSettings/index.md' %}{% endcodeBlock %}
*
* @default {mode: 'Row', cellSelectionMode: 'Flow', type: 'Single'}
*/
selectionSettings: SelectionSettingsModel;
/**
* 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`](../../grid/filtering/) to customize its default behavior.
* {% codeBlock src='grid/allowFiltering/index.md' %}{% endcodeBlock %}
*
* @default false
*/
allowFiltering: boolean;
/**
* Defines the grid row elements rendering direction. The available directions are,
* * `Horizontal`: Renders the grid row elements in the horizontal direction
* * `Vertical`: Renders the grid row elements in the vertical direction
*
* @default Horizontal
*/
rowRenderingMode: RowRenderingDirection;
/**
* If `enableAdaptiveUI` set to true the grid filter, sort, and edit dialogs render adaptively.
*
* @default false
*/
enableAdaptiveUI: boolean;
/**
* One of the adaptiveUIMode enumeration that specifies the Adaptive Mode. The default value is Both.
*
* @default Both
*/
adaptiveUIMode: AdaptiveMode;
/**
* 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.
* {% codeBlock src='grid/allowReordering/index.md' %}{% endcodeBlock %}
*
* @default false
*/
allowReordering: boolean;
/**
* If `allowResizing` is set to true, Grid columns can be resized.
* {% codeBlock src='grid/allowResizing/index.md' %}{% endcodeBlock %}
*
* @default false
*/
allowResizing: boolean;
/**
* If `allowRowDragAndDrop` is set to true, you can drag and drop grid rows at another grid.
* {% codeBlock src='grid/allowRowDragAndDrop/index.md' %}{% endcodeBlock %}
*
* @default false
*/
allowRowDragAndDrop: boolean;
/**
* Configures the row drop settings.
*
* @default {targetID: ''}
*/
rowDropSettings: RowDropSettingsModel;
/**
* Configures the filter settings of the Grid.
* {% codeBlock src='grid/filterSettings/index.md' %}{% endcodeBlock %}
*
* @default {columns: [], type: 'FilterBar', mode: 'Immediate', showFilterBarStatus: true, immediateModeDelay: 1500 , operators: {}}
*/
filterSettings: FilterSettingsModel;
/**
* 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`](../../grid/grouping/) to customize its default behavior.
* {% codeBlock src='grid/allowGrouping/index.md' %}{% endcodeBlock %}
*
* @default false
*/
allowGrouping: boolean;
/**
* If `enableImmutableMode` is set to true, the grid will reuse old rows if it exists in the new result instead of
* full refresh while performing the grid actions.
*
* @default false
*/
enableImmutableMode: boolean;
/**
* If `showColumnMenu` set to true, then it will enable the column menu options in each columns.
*
* > Check the [`Column menu`](../../grid/columns/#column-menu/) for its configuration.
* {% codeBlock src='grid/showColumnMenu/index.md' %}{% endcodeBlock %}
*
* @default false
*/
showColumnMenu: boolean;
/**
* If `autoFit` set to true, then it will auto fit the columns based on given width.
*
* @default false
*/
autoFit: boolean;
/**
* Configures the group settings.
* {% codeBlock src='grid/groupSettings/index.md' %}{% endcodeBlock %}
*
* @default {showDropArea: true, showToggleButton: false, showGroupedColumn: false, showUngroupButton: true, columns: []}
*/
groupSettings: GroupSettingsModel;
/**
* Configures the edit settings.
* {% codeBlock src='grid/editSettings/index.md' %}{% endcodeBlock %}
*
* @default { allowAdding: false, allowEditing: false, allowDeleting: false, mode:'Normal',
* allowEditOnDblClick: true, showConfirmDialog: true, showDeleteConfirmDialog: false }
*/
editSettings: EditSettingsModel;
/**
* Configures the Grid aggregate rows.
* {% codeBlock src='grid/aggregates/index.md' %}{% endcodeBlock %}
* > Check the [`Aggregates`](../../grid/aggregates/) for its configuration.
*
* @default []
*/
aggregates: AggregateRowModel[];
/**
* If `showColumnChooser` is set to true, it allows you to dynamically show or hide columns.
*
* > Check the [`ColumnChooser`](../../grid/columns/#column-chooser/) for its configuration.
* {% codeBlock src='grid/showColumnChooser/index.md' %}{% endcodeBlock %}
*
* @default false
*/
showColumnChooser: boolean;
/**
* Configures the column chooser in the Grid.
*
* @default { columnChooserOperator: 'startsWith' }
*/
columnChooserSettings: ColumnChooserSettingsModel;
/**
* If `enableHeaderFocus` set to true, then header element will be focused when focus moves to grid.
*
* @default false
*/
enableHeaderFocus: boolean;
/**
* Defines the scrollable height of the grid content.
* {% codeBlock src='grid/height/index.md' %}{% endcodeBlock %}
*
* @default 'auto'
*/
height: string | number;
/**
* Defines the Grid width.
* {% codeBlock src='grid/width/index.md' %}{% endcodeBlock %}
*
* @default 'auto'
*/
width: string | number;
/**
* 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.
* {% codeBlock src='grid/gridLines/index.md' %}{% endcodeBlock %}
*
* @default Default
*/
gridLines: GridLine;
/**
* The row template that renders customized rows from the given template.
* By default, Grid renders a table row for every data source item.
* > * It accepts either [template string](../../common/template-engine/) or HTML element ID.
* > * The ro