Skip to content

Instantly share code, notes, and snippets.

@greglockwood
Created June 15, 2015 08:41
Show Gist options
  • Save greglockwood/67ea53a5f43852ba24c4 to your computer and use it in GitHub Desktop.
Save greglockwood/67ea53a5f43852ba24c4 to your computer and use it in GitHub Desktop.
Angular Grid Typescript Definitions
declare module ng.grid {
interface GridOptions<T> {
columnDefs?: ColumnDef<T>[]; // Array of Column Definitions..
groupHeaders?: boolean; // Whether to group the headers. Default is false.
headerHeight?: number; // Height, in pixels, of the header row. If not grouping headers, default is 25. If grouping headers, default is 50.
rowData?: T[]; // Data to be displayed as rows in the table
rowSelection?: string; // Type of row selection, set to either 'single' or 'multiple' to enable selection.
rowDeselection?: boolean; // Set to true or false (default is false). If true, then rows will be deselected if you hold down ctrl + click the row.
pinnedColumnCount?: number; // Number of columns to pin. Default is 0.
rowHeight?: number; // Height of rows, in pixels. Default is 25 pixels.
enableColResize?: boolean; // Set to true or false (default is false)
enableSorting?: boolean; // Set to true or false (default is false)
enableFilter?: boolean; // Set to true or false (default is false)
quickFilterText?: string; // Rows are filtered using this text as a 'quick filter'
rowClass?: string|string[]|(()=>(string|string[])); // Class to use for the row. Can be string, array of strings, or function.
rowStyle?: CSSValuesObject|(()=>CSSValuesObject); // An object of CSS values. Or a function returning an object of css values.
angularCompileRows?: boolean; // Whether to compile the rows for Angular. Default is false (for performance). Turn on if you want to use AngularJS in your custom cell renderers.
angularCompileFilters?: boolean; // Whether to compile provided custom filters. Default is false (for performance). Turn on if you want to use AngularJS in your custom filters.
angularCompileHeaders?: boolean; // Whether to compile the customer headers for AngularJS. Default is false (for performance). Turn on if you want to user AngularJS in your custom column headers.
headerCellRenderer?: CellRendererCallback<T>; // Provide a function for custom header rendering.
groupKeys?: string[]; // Parameters for grouping. See the section on grouping for details explanation.
groupUseEntireRow?: boolean;
groupInnerCellRenderer?: CellRendererCallback<T>;
groupDefaultExpanded?: boolean;
groupAggFields?: string[];
groupAggFunction?: Function;
groupIncludeFooter?: boolean;
groupSelectsChildren?: boolean;
groupSuppressGroupColumn?: boolean;
dontUseScrolls?: boolean; // Set to true or false (default is false). When true, scrollbars are not used.
rowSelected?: (row: T) => void; // Function callback, gets called when a row is selected.
rowClicked?: EventCallback<T>; // Function callback, gets called when a row is clicked.
cellClicked?: EventCallback<T>; // Function callback, gets called when a cell is clicked.
cellDoubleClicked?: EventCallback<T>; // Function callback, gets called when a cell is double clicked.
modelUpdated?: EventCallback<T>; // Function callback, gets called when displayed rows have changed. Happens following sort, filter or tree expand / collapse events.
ready?: EventCallback<T>; // Function callback, gets called after Angular Grid has initialised. The name 'ready' was influenced by the authors time programming the Commodore 64. Use this function if, for example, you need to use the grid's API to fix the columns to size.
suppressRowClickSelection?: boolean; // If true, rows won't be selected when clicked. Use when you want checkbox selection exclusively.
suppressCellSelection?: boolean; // If true, cells won't be selectable. This means cells will not get keyboard focus when you click on them.
selectionChanged?: () => void; // Function callback, gets called when a selection is changed.
cellValueChanged?: ValueChangedCallback<T>; // Function callback, gets called when a value has changed after editing.
getRowClass?: ()=>(string|string[]); // Function callback, to allow adding a css class to a row.
colWidth?: number; // The default width for each col. Widths specified in column definitions get preference over this.
rowsAlreadyGrouped?: boolean; // Set to true if data provided to the grid is already in node structure (this is for passing already aggregated data to the grid).
rowsBuffer?: number; // Defaults to 20. Set higher to increase the number of rows that automatically load before and after the viewport.
selectedRows?: T[]; // stores the currently selected rows
api?: AngularGridAPI<T>;
context?: any;
datasource?: Datasource<T>;
virtualPaging?: boolean;
}
interface ColumnDef<T> {
headerName?: string;
headerTooltip?: string;
field?: string;
width?: number;
cellClass?: string|string[]|((params: CellStyleOrClassParams<T>)=>(string|string[]));
cellClassRules?: CellClassRules<T>;
cellStyle?: CSSValuesObject|((params: CellStyleOrClassParams<T>)=>CSSValuesObject);
cellRenderer?: (params: CellRendererParams<T>)=>string|Element;
cellClicked?: EventCallback<T>;
cellDoubleClicked?: EventCallback<T>;
comparator?: ()=>number;
checkboxSelection?: boolean;
suppressMenu?: boolean;
suppressSorting?: boolean;
suppressSizeToFit?: boolean;
group?: string; // Not sure about this one
groupShow?: string; // "open" or "closed"
editable?: boolean|(()=>boolean);
newValueHandler?: ValueChangedCallback<T>;
cellValueChanged?: ValueChangedCallback<T>;
volatile?: boolean;
cellTemplate?: string;
cellTemplateUrl?: string;
filter?: string|CustomFilter<T>;
filterParams?: FilterParams<T>;
valueGetter?: string|((params: ValueGetterParams<T>) => any);
}
interface CSSValuesObject {
[property: string]: any;
}
interface CellRendererCallback<T> {
(params: CellRendererParams<T>): (string|Element);
}
interface BaseParams<T> {
data: T;
colDef: ColumnDef<T>;
$scope?: RowScope<T>;
api: AngularGridAPI<T>;
context: any;
}
interface ValueGetterParams<T> extends BaseParams<T> {
refreshCell: () => void;
}
interface CellRendererParams<T> extends ValueGetterParams<T> {
value: any;
rowIndex: number;
}
interface CellStyleOrClassParams<T> extends BaseParams<T> {
value: any;
rowIndex: number;
}
interface RowScope<T> extends ng.IScope {
data: T;
}
interface CellClassRules<T> {
[className: string]: (string|((params: CellStyleOrClassParams<T>) => boolean));
}
interface EventCallback<T> {
(params: RowClickCallbackData<T>): void;
}
interface ValueChangedCallback<T> {
(params: ValueChangedParams<T>): void;
}
interface ValueChangedParams<T> {
node: Node<T>;
data: T;
oldValue: string;
newValue: string;
rowIndex: number;
colDef: ColumnDef<T>;
context: any;
api: AngularGridAPI<T>;
}
interface Datasource<T> {
getRows: (params: GetRowsParams<T>) => void;
pageSize: number;
rowCount?: number;
overflowSize?: number;
maxConcurrentRequests?: number;
maxPagesInCache?: number;
}
interface GetRowsParams<T> {
startRow: number;
endRow: number;
filterModel: FilterModel<T>;
sortModel: SortModel<T>;
successCallback: GetRowsCallbackSuccess<T>;
failCallback: () => void;
}
interface GetRowsCallbackSuccess<T> {
(rowsThisPage: T[], lastRow: number): void;
}
interface RowClickCallbackData<T> {
data: Object;
event: MouseEvent;
node: Node<T>;
}
interface Node<T> {
id: number;
data: T;
}
interface FilterParams<T> {
cellRenderer?: CellRendererCallback<T>;
cellHeight: number;
values?: any[];
}
interface AngularGridAPI<T> {
onNewRows: Function; // Inform the grid that the rows have changed. The grid will assume the rows are brand new and draw all rows from scratch.
setRows: (rows: T[]) => void; // Set new rows into the grid. This is the same as setting new rows in gridOptions and then calling onNewRows()
onNewDatasource: () => void; // Inform the grid that a new datasource has been set. The grid will reset all paging and load the first page..
setDatasource: (datasource: Datasource<T>) => void; // Set new datasource into the gird. This is the same as setting a new datasource in gridOptions and then calling onNewDatasource()
onNewCols: () => void; // Call to inform the grid that the columns have changed. The grid will redraw all the colum headers, and then redraw all of the rows. The rows will not be discarded, so any selections, scrolling or groups open, will stay.
selectAll: () => void; // Select all rows (even rows that are not visible due to grouping being and their groups not expanded).
deselectAll: () => void; // Clear all row selections.
selectIndex: (index: number, multi: boolean, suppressEvents: boolean) => void;
selectNode: (node: Node<T>, multi: boolean, suppressEvents: boolean) => void; // Select the row at the given index / node. If multi is true, then previous selections will be kept (ie allow multi-select). If multi is false, any previously selected row will be unselected. If suppressEvents is true, then rowSelected and selectionChanged will not be called during the selection.
deselectIndex: (index: number) => void;
deselectNode: (node: Node<T>) => void; // Deselects the row node at the given index / node.
getSelectedNodes: () => Node<T>[]; // Returns a list of selected nodes. Getting the underlying node (rather than the data) is useful when working with tree / aggregated data, as the node can be traversed.
isNodeSelected: (node: Node<T>) => boolean; // Returns true if the node is selected, or false if it is not selected. If the node is a group node, and the group selection is set to 'children', then this will return true if all child (and grand child) nodes are selected, false if all unselected, of undefined if a mixture. This is particularly useful for group selection 'children' as in this mode, the group nodes never appear in the selected rows (as selecting a group implies selecting children).
getBestCostNodeSelection: () => Node<T>[]; // Returns a list of all selected nodes at 'best cost' - a feature to be used with groups / trees. If a group has all it's children selected, then the group appears in the result, but not the children. Designed for use with 'children' as the group selection type, where groups don't actually appear in the selection normally.
refreshView: () => void; // Rip out and re-insert all visible rows. Handy has a blanket 'redraw all' if changes have been made to the row data.
softRefreshView: () => void; // Leave the rows intact. Each cell that has been market as volatile (via colDef attribute) will be redrawn. Any cells that are not marked as volatile will be left alone, hence keeping any context or state that they have.
refreshGroupRows: () => void; // Rip out and re-insert all visible header and footer rows only. Only need to call if update the aggregate data yourself, as this gets called after recomputeAggregates() anyway.
getModel: () => RowModel<T>; // Returns the row model inside the table. From here you can see the original rows, rows after filter has been applied, rows after aggregation has been applied, and the final set of 'to be displayed' rows.
onGroupExpandedOrCollapsed: () => void; // If after getting the model, you expand or collapse a group, call this method to inform the grid. It will work out the final set of 'to be displayed' rows again (ie expand or collapse the group visually).
expandAll: () => void; // Expand all groups.
collapseAll: () => void; // Collapse all groups.
rowDataChanged: (rows: T[]) => void; // Inform the table that the provided rows have changed. If any of the rows are currently visible (ie due to row virtualisation, these rows have corresponding DOM elements) then only these rows are redrawn. If none of the rows are visible, nothing is done. The table uses object reference comparison (ie row1 === row2) to check the provided rows with the original rows, to find the corresponding rows.
setQuickFilter: (quickFilter: string) => void; // Pass a quick filter text into Angular Grid for filtering. If using Angular, the grid watched the 'quickFilterText' attribute of the gridOptions. If you won't want to use quickFilterText (ie if not using AngularJS) then you can call this method instead to apply a quick filter.
addVirtualRowListener: (rowIndex: number, callback: EventCallback<T>) => void; // Register a callback for notifications about a particular virtualised row. When the row is removed from the table (due to virtualisation), the callback is removed. This callback is intended for cell renderers, that want to register for events for the rendered row - thus if the row is no longer rendered on the screen, the callbacks stop. If the row is redrawn, then the cell renderer must register another callback.
showLoading: (show: boolean) => void; // Show or hide the loading icon. Pass either true or false. If the method onNewRows is called, the loading icon is automatically hidden.
recomputeAggregates: () => void; // Recomputes the aggregates in the model and refreshes all the group rows.
ensureIndexVisible: (index: number) => void; // Ensures the index is visible, scrolling the table if needed.
ensureColIndexVisible: (index: number) => void; // Ensures the column index is visible, scrolling the table if needed.
ensureNodeVisible: (comparator: Node<T>|T|((node: Node<T>) => boolean)) => void; // Ensures a node is visible, scrolling the table if needed. Provide one of a) the node b) the data object c) a comparator function (that takes the node as a parameter, and returns true for match, false for no match)
forEachInMemory: (callback: (node: Node<T>) => void) => void; // The callback gets called once for each node that is in browser memory. If pagination, then gets called for the currently loaded page. If virtual paging, then gets called for each virtual page loaded in the page cache. If doing neither pagination or virtual paging, then gets called for every single node (including group nodes).
getFilterApi: (col: ColumnDef<T>|string) => (SetFilterAPI|NumberFilterAPI|TextFilterAPI); // Returns the API for the filter for the column. Either provide the colDef (matches on object reference) or the column field attribute (matches on string comparison). Matching by field is normal. Matching by colDef is useful when field is missing or not unique.
onFilterChanged: () => void; // Informs the grid that a filter has changed. This is typically called after a filter change through one of the filter APIs.
setSortModel: (sortModel: SortModel<T>[]) => void; // Sets the sort state of the grid.
getSortModel: () => SortModel<T>[]; // Returns the sort state of the grid.
sizeColumnsToFit: () => void; // Make the currently visible columns fit the screen.
}
interface RowModel<T> {
forEachInMemory: (callback: (node: Node<T>) => void) => void; // The callback gets called once for each node that is in browser memory. If pagination, then gets called for the currently loaded page. If virtual paging, then gets called for each virtual page loaded in the page cache. If doing neither pagination or virtual paging, then gets called for every single node (including group nodes).
getTopLevelNodes: () => Node<T>[];
getVirtualRow: (index: number) => Node<T>;
getVirtualRowCount: () => number;
}
interface FilterAPI {
getModel: () => any; // Gets the filter as a model, good for saving and restoring.
setModel: (model: any) => void;
}
interface SetFilterAPI extends FilterAPI {
setMiniFilter: (newMiniFilter: string) => void; // Sets the filter at the top of the filter (the 'quick search' in the popup)
getMiniFilter: () => string; // Gets the mini filter text.
selectEverything: () => void; // Selects everything
selectNothing: () => void; // Clears the selection
isFilterActive: () => boolean; // Returns true if anything except 'everything selected'
unselectValue: (value: any) => void // Unselects a value
selectValue: (value: any) => void; // Selects a value
isValueSelected: (value: any) => boolean; // Returns true if a value is selected
isEverythingSelected: () => boolean; // Returns true if everything selected (inverse of isFilterActive())
isNothingSelected: () => boolean; // Returns true if nothing is selected
getUniqueValueCount: () => number; // Returns number of unique values. Useful for iterating with getUniqueValue(index)
getUniqueValue: (index: number) => any; // Returns the unique value at the given index
}
interface NumberFilterAPI extends FilterAPI {
getType: () => string;
setType: (type: string) => void;
getFilter: () => number;
setFilter: (filter: number) => void;
}
interface TextFilterAPI extends NumberFilterAPI {
// same as NumberFilterAPI for now
}
interface SortModel<T> {
// not sure what goes in here, it can be added as necessary
}
interface CustomFilter<T> {
(params: CustomFilterParams<T>);
getGUI: () => (string|Element);
isFilterActive: () => boolean;
doesFilterPass: (value: T, rowNode: Node<T>, filterModel: FilterModel<T>) => boolean;
afterGuiAttached?: () => void;
onNewRowsLoaded?: () => void;
getAPI?: () => FilterAPI;
}
interface CustomFilterParams<T> {
colDef: ColumnDef<T>;
rowModel: any;
filterChangedCallback: () => void;
filterParams: FilterParams<T>;
$scope?: ng.IScope;
}
interface FilterModel<T> {
// not sure what goes in here, it can be added as necessary
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment