Plugins

SlickAutoTooltips 2

AutoTooltips plugin to show/hide tooltips when columns are too narrow to fit content.

init(grid: SlickGrid)

destroy()

SlickCellCopyManager 5

This manager enables users to copy/paste cell data

init(grid: SlickGrid)

destroy()

SlickCellExternalCopyManager 7

This manager enables users to copy/paste data from/to an external Spreadsheet application such as MS-Excel® or OpenOffice-Spreadsheet. Since it is not possible to access directly the clipboard in javascript, the plugin uses a trick to do it's job. After detecting the keystroke, we dynamically create a textarea where the browser copies/pastes the serialized data. options: copiedCellStyle : sets the css className used for copied cells. default : "copied" copiedCellStyleLayerKey : sets the layer key for setting css values of copied cells. default : "copy-manager" dataItemColumnValueExtractor : option to specify a custom column value extractor function dataItemColumnValueSetter : option to specify a custom column value setter function clipboardCommandHandler : option to specify a custom handler for paste actions includeHeaderWhenCopying : set to true and the plugin will take the name property from each column (which is usually what appears in your header) and put that as the first row of the text that's copied to the clipboard bodyElement: option to specify a custom DOM element which to will be added the hidden textbox. It's useful if the grid is inside a modal dialog. onCopyInit: optional handler to run when copy action initializes onCopySuccess: optional handler to run when copy action is complete newRowCreator: function to add rows to table if paste overflows bottom of table, if this function is not provided new rows will be ignored. readOnlyMode: suppresses paste headerColumnValueExtractor : option to specify a custom column header value extractor function

init(grid: SlickGrid)

destroy()

clearCopySelection()

setIncludeHeaderWhenCopying(includeHeaderWhenCopying: boolean)

SlickCellMenu 12

A plugin to add Menu on a Cell click (click on the cell that has the cellMenu object defined) The "cellMenu" is defined in a Column Definition object Similar to the ContextMenu plugin (could be used in combo), except that it subscribes to the cell "onClick" event (regular mouse click or touch). A general use of this plugin is for an Action Dropdown Menu to do certain things on the row that was clicked You can use it to change the cell data property through a list of Options AND/OR through a list of Commands. USAGE: Add the slick.cellMenu.(js|css) files and register it with the grid. To specify a menu in a column header, extend the column definition like so: var cellMenuPlugin = new Slick.Plugins.CellMenu(columns, grid, options); Available cellMenu options, by defining a cellMenu object: var columns = [ { id: "action", name: "Action", field: "action", formatter: fakeButtonFormatter, cellMenu: { optionTitle: "Change Effort Driven", optionItems: [ { option: true, title: "True", iconCssClass: 'checkmark' }, { option: false, title: "False" } ], commandTitle: "Commands", commandItems: [ { command: "delete-row", title: "Delete Row", iconCssClass: "sgi sgi-close", cssClass: 'bold', textCssClass: "red" }, { divider: true }, "divider" // you can pass "divider" as a string or an object { command: "help", title: "Help", iconCssClass: "icon-help" }, { command: "help", title: "Disabled Command", disabled: true }, ], } } ]; Available cellMenu properties: commandTitle: Title of the Command section (optional) commandItems: Array of Command item objects (command/title pair) optionTitle: Title of the Option section (optional) optionItems: Array of Options item objects (option/title pair) hideCloseButton: Hide the Close button on top right (defaults to false) hideCommandSection: Hide the Commands section even when the commandItems array is filled (defaults to false) hideMenuOnScroll: Do we want to hide the Cell Menu when a scrolling event occurs (defaults to true)? hideOptionSection: Hide the Options section even when the optionItems array is filled (defaults to false) maxHeight: Maximum height that the drop menu will have, can be a number (250) or text ("none") width: Width that the drop menu will have, can be a number (250) or text (defaults to "auto") autoAdjustDrop: Auto-align dropup or dropdown menu to the left or right depending on grid viewport available space (defaults to true) autoAdjustDropOffset: Optionally add an offset to the auto-align of the drop menu (defaults to 0) autoAlignSide: Auto-align drop menu to the left or right depending on grid viewport available space (defaults to true) autoAlignSideOffset: Optionally add an offset to the left/right side auto-align (defaults to 0) menuUsabilityOverride: Callback method that user can override the default behavior of enabling/disabling the menu from being usable (must be combined with a custom formatter) subItemChevronClass: CSS class that can be added on the right side of a sub-item parent (typically a chevron-right icon) subMenuOpenByEvent: defaults to "mouseover", what event type shoud we use to open sub-menu(s), 2 options are available: "mouseover" or "click" Available menu Command/Option item properties: action: Optionally define a callback function that gets executed when item is chosen (and/or use the onCommand event) command: A command identifier to be passed to the onCommand event handlers (when using "commandItems"). option: An option to be passed to the onOptionSelected event handlers (when using "optionItems"). title: Menu item text label. divider: Boolean which tells if the current item is a divider, not an actual command. You could also pass "divider" instead of an object disabled: Whether the item/command is disabled. hidden: Whether the item/command is hidden. subMenuTitle: Optional sub-menu title that will shows up when sub-menu commmands/options list is opened subMenuTitleCssClass: Optional sub-menu title CSS class to use with `subMenuTitle` tooltip: Item tooltip. cssClass: A CSS class to be added to the menu item container. iconCssClass: A CSS class to be added to the menu item icon. textCssClass: A CSS class to be added to the menu item text. iconImage: A url to the icon image. itemVisibilityOverride: Callback method that user can override the default behavior of showing/hiding an item from the list itemUsabilityOverride: Callback method that user can override the default behavior of enabling/disabling an item from the list The plugin exposes the following events: onAfterMenuShow: Fired after the menu is shown. You can customize the menu or dismiss it by returning false. Event args: cell: Cell or column index row: Row index grid: Reference to the grid. onBeforeMenuShow: Fired before the menu is shown. You can customize the menu or dismiss it by returning false. Event args: cell: Cell or column index row: Row index grid: Reference to the grid. onBeforeMenuClose: Fired when the menu is closing. Event args: cell: Cell or column index row: Row index grid: Reference to the grid. menu: Menu DOM element onCommand: Fired on menu option clicked from the Command items list Event args: cell: Cell or column index row: Row index grid: Reference to the grid. command: Menu command identified. item: Menu item selected column: Cell Column definition dataContext: Cell Data Context (data object) onOptionSelected: Fired on menu option clicked from the Option items list Event args: cell: Cell or column index row: Row index grid: Reference to the grid. option: Menu option selected. item: Menu item selected column: Cell Column definition dataContext: Cell Data Context (data object)

init(grid: SlickGrid)

setOptions(newOptions: Partial<CellMenuOption>)

destroy()

closeMenu(e?: DOMMouseOrTouchEvent<HTMLButtonElement | HTMLDivElement> | SlickEventData_, args?: MenuFromCellCallbackArgs)

destroyAllMenus()

destroySubMenus()

repositionMenu(e: DOMMouseOrTouchEvent<HTMLDivElement>, menuElm: HTMLElement)

SlickCellRangeDecorator 6

Displays an overlay on top of a given cell range. TODO: Currently, it blocks mouse events to DOM nodes behind it. Use FF and WebKit-specific "pointer-events" CSS style, or some kind of event forwarding. Could also construct the borders separately using 4 individual DIVs.

destroy()

getSelectionCss()

setSelectionCss(cssProps: CSSStyleDeclaration)

init()

hide()

show(range: SlickRange, isCopyTo?: boolean)

SlickCellRangeSelector 10

init(grid: SlickGrid)

destroy()

getCellDecorator()

getSelectionMode()

setSelectionMode(mode: string)

getCurrentRange()

getPreviousRange()

CellSelectionModelOption (options) 2

SlickCellSelectionModel 9

init(grid: SlickGrid)

destroy()

getOptions(): CellSelectionModelOption | undefined

setOptions(options: Partial<CellSelectionModelOption>)

resetPageRowCount()

setSelectedRanges(ranges: SlickRange_[], caller?, selectionMode?)

getSelectedRanges()

refreshSelections()

SlickCheckboxSelectColumn 9

init(grid: SlickGrid)

destroy()

getOptions()

setOptions(options: Partial<CheckboxSelectorOption>)

selectRows(rowArray: number[])

deSelectRows(rowArray: number[])

createCheckboxElement(inputId: string, checked?)

getColumnDefinition()

selectableOverride(overrideFn: SelectableOverrideCallback<T>)

SlickContextMenu 11

A plugin to add Context Menu (mouse right+click), it subscribes to the cell "onContextMenu" event. The "contextMenu" is defined in the Grid Options object You can use it to change a data property (only 1) through a list of Options AND/OR through a list of Commands. A good example of a Command would be an Export to CSV, that can be run from anywhere in the grid by doing a mouse right+click Note: There is only 1 list of Options, so typically that would be use for 1 column if you plan to use different Options for different columns, then the CellMenu plugin might be better suited. USAGE: Add the slick.contextmenu.(js|css) files and register it with the grid. To specify a menu in a column header, extend the column definition like so: var contextMenuPlugin = new Slick.Plugins.ContextMenu(columns, grid, options); Available grid options, by defining a contextMenu object: var options = { enableCellNavigation: true, contextMenu: { optionTitle: 'Change Priority', optionShownOverColumnIds: ["priority"], optionItems: [ { option: 0, title: 'none', cssClass: 'italic' }, { divider: true }, "divider" // just the string is also accepted { option: 1, iconCssClass: 'fa fa-fire grey', title: 'Low' }, { option: 3, iconCssClass: 'fa fa-fire red', title: 'High' }, { option: 2, iconCssClass: 'fa fa-fire orange', title: 'Medium' }, { option: 4, iconCssClass: 'fa fa-fire', title: 'Extreme', disabled: true }, ], commandTitle: 'Commands', commandShownOverColumnIds: ["title", "complete", "start", "finish", "effortDriven"], commandItems: [ { command: 'export-excel', title: 'Export to CSV', iconCssClass: 'fa fa-file-excel-o', cssClass: '' }, { command: 'delete-row', title: 'Delete Row', cssClass: 'bold', textCssClass: 'red' }, { command: 'help', title: 'Help', iconCssClass: 'fa fa-question-circle',}, { divider: true }, ], } }; Available contextMenu properties: commandTitle: Title of the Command section (optional) commandItems: Array of Command item objects (command/title pair) commandShownOverColumnIds: Define which column to show the Commands list. If not defined (defaults), the menu will be shown over all columns optionTitle: Title of the Option section (optional) optionItems: Array of Options item objects (option/title pair) optionShownOverColumnIds: Define which column to show the Options list. If not defined (defaults), the menu will be shown over all columns hideCloseButton: Hide the Close button on top right (defaults to false) hideCommandSection: Hide the Commands section even when the commandItems array is filled (defaults to false) hideMenuOnScroll: Do we want to hide the Cell Menu when a scrolling event occurs (defaults to false)? hideOptionSection: Hide the Options section even when the optionItems array is filled (defaults to false) maxHeight: Maximum height that the drop menu will have, can be a number (250) or text ("none") width: Width that the drop menu will have, can be a number (250) or text (defaults to "auto") autoAdjustDrop: Auto-align dropup or dropdown menu to the left or right depending on grid viewport available space (defaults to true) autoAdjustDropOffset: Optionally add an offset to the auto-align of the drop menu (defaults to -4) autoAlignSide: Auto-align drop menu to the left or right depending on grid viewport available space (defaults to true) autoAlignSideOffset: Optionally add an offset to the left/right side auto-align (defaults to 0) menuUsabilityOverride: Callback method that user can override the default behavior of enabling/disabling the menu from being usable (must be combined with a custom formatter) subItemChevronClass: CSS class that can be added on the right side of a sub-item parent (typically a chevron-right icon) subMenuOpenByEvent: defaults to "mouseover", what event type shoud we use to open sub-menu(s), 2 options are available: "mouseover" or "click" Available menu Command/Option item properties: action: Optionally define a callback function that gets executed when item is chosen (and/or use the onCommand event) command: A command identifier to be passed to the onCommand event handlers (when using "commandItems"). option: An option to be passed to the onOptionSelected event handlers (when using "optionItems"). title: Menu item text. divider: Boolean which tell if the current item is a divider, not an actual command. You could also pass "divider" instead of an object disabled: Whether the item/command is disabled. hidden: Whether the item/command is hidden. subMenuTitle: Optional sub-menu title that will shows up when sub-menu commmands/options list is opened subMenuTitleCssClass: Optional sub-menu title CSS class to use with `subMenuTitle` tooltip: Item tooltip. cssClass: A CSS class to be added to the menu item container. iconCssClass: A CSS class to be added to the menu item icon. textCssClass: A CSS class to be added to the menu item text. iconImage: A url to the icon image. itemVisibilityOverride: Callback method that user can override the default behavior of showing/hiding an item from the list itemUsabilityOverride: Callback method that user can override the default behavior of enabling/disabling an item from the list The plugin exposes the following events: onAfterMenuShow: Fired after the menu is shown. You can customize the menu or dismiss it by returning false. Event args: cell: Cell or column index row: Row index grid: Reference to the grid. onBeforeMenuShow: Fired before the menu is shown. You can customize the menu or dismiss it by returning false. Event args: cell: Cell or column index row: Row index grid: Reference to the grid. onBeforeMenuClose: Fired when the menu is closing. Event args: cell: Cell or column index row: Row index grid: Reference to the grid. menu: Menu DOM element onCommand: Fired on menu option clicked from the Command items list Event args: cell: Cell or column index row: Row index grid: Reference to the grid. command: Menu command identified. item: Menu item selected column: Cell Column definition dataContext: Cell Data Context (data object) value: Value of the cell we triggered the context menu from onOptionSelected: Fired on menu option clicked from the Option items list Event args: cell: Cell or column index row: Row index grid: Reference to the grid. option: Menu option selected. item: Menu item selected column: Cell Column definition dataContext: Cell Data Context (data object)

init(grid: SlickGrid)

setOptions(newOptions: Partial<ContextMenuOption>)

destroy()

destroyMenu(e?: Event | SlickEventData_, args?: { cell: number; row: number; })

destroyAllMenus()

destroySubMenus()

SlickCrossGridRowMoveManager 8

Row Move Manager options: cssClass: A CSS class to be added to the menu item container. columnId: Column definition id (defaults to "_move") cancelEditOnDrag: Do we want to cancel any Editing while dragging a row (defaults to false) disableRowSelection: Do we want to disable the row selection? (defaults to false) hideRowMoveShadow: Do we want to hide the row move shadow clone? (defaults to true) rowMoveShadowMarginTop: When row move shadow is shown, optional margin-top (defaults to 0) rowMoveShadowMarginLeft: When row move shadow is shown, optional margin-left (defaults to 0) rowMoveShadowOpacity: When row move shadow is shown, what is its opacity? (defaults to 0.95) rowMoveShadowScale: When row move shadow is shown, what is its size scale? (default to 0.75) singleRowMove: Do we want a single row move? Setting this to false means that it's a multple row move (defaults to false) width: Width of the column usabilityOverride: Callback method that user can override the default behavior of the row being moveable or not

init(grid: SlickGrid)

destroy()

setOptions(newOptions: CrossGridRowMoveManagerOption)

getColumnDefinition(): Column

usabilityOverride(overrideFn: UsabilityOverrideFn)

isHandlerColumn(columnIndex: number | string)

SlickCustomTooltip 4

CustomTooltip plugin to show/hide tooltips when columns are too narrow to fit content.

init(grid: SlickGrid)

destroy()

hideTooltip()

setOptions(newOptions: Partial<CustomTooltipOption>)

SlickDraggableGrouping 6

Draggable Grouping contributed by: Muthukumar Selvarasu muthukumar{dot}se{at}gmail{dot}com github.com/muthukumarse/Slickgrid NOTES: This plugin provides the Draggable Grouping feature which could be located in either the Top-Header or the Pre-Header A plugin to add Draggable Grouping feature. USAGE: Add the plugin .js & .css files and register it with the grid. The plugin expose the following methods: destroy: used to destroy the plugin setDroppedGroups: provide option to set default grouping on loading clearDroppedGroups: provide option to clear grouping getSetupColumnReorder: its function to setup draggable feature agains Header Column, should be passed on grid option. Also possible to pass custom function The plugin expose the following event(s): onGroupChanged: pass the grouped columns to who subscribed.

init(grid: SlickGrid)

getSetupColumnReorder(grid: SlickGrid, headers: any, _headerColumnWidthDiff: any, setColumns: (columns: Column[]) => void, setupColumnResize: () => void, _columns: Column[], getColumnIndex: (columnId: string) => number, _uid: string, trigger: (slickEvent: SlickEvent_, data?: any) => void)

destroy()

setDroppedGroups(groupingInfo: Array<string | GroupingGetterFunction> | string)

clearDroppedGroups()

SlickHeaderButtons 3

A plugin to add custom buttons to column headers. USAGE: Add the plugin .js & .css files and register it with the grid. To specify a custom button in a column header, extend the column definition like so: let columns = [ { id: 'myColumn', name: 'My column', // This is the relevant part header: { buttons: [ { // button options }, { // button options } ] } } ]; Available button options: cssClass: CSS class to add to the button. image: Relative button image path. disabled: Whether the item is disabled. tooltip: Button tooltip. showOnHover: Only show the button on hover. handler: Button click handler. command: A command identifier to be passed to the onCommand event handlers. Available menu item options: action: Optionally define a callback function that gets executed when item is chosen (and/or use the onCommand event) command: A command identifier to be passed to the onCommand event handlers. cssClass: CSS class to add to the button. handler: Button click handler. image: Relative button image path. showOnHover: Only show the button on hover. tooltip: Button tooltip. itemVisibilityOverride: Callback method that user can override the default behavior of showing/hiding an item from the list itemUsabilityOverride: Callback method that user can override the default behavior of enabling/disabling an item from the list The plugin exposes the following events: onCommand: Fired on button click for buttons with 'command' specified. Event args: grid: Reference to the grid. column: Column definition. command: Button command identified. button: Button options. Note that you can change the button options in your event handler, and the column header will be automatically updated to reflect them. This is useful if you want to implement something like a toggle button.

init(grid: SlickGrid)

destroy()

SlickHeaderMenu 9

A plugin to add drop-down menus to column headers. USAGE: Add the plugin .js & .css files and register it with the grid. To specify a menu in a column header, extend the column definition like so: let columns = [ { id: 'myColumn', name: 'My column', // This is the relevant part header: { menu: { items: [ { // menu item options }, { // menu item options } ] } } } ]; Available menu options: autoAlign: Auto-align drop menu to the left when not enough viewport space to show on the right autoAlignOffset: When drop menu is aligned to the left, it might not be perfectly aligned with the header menu icon, if that is the case you can add an offset (positive/negative number to move right/left) buttonCssClass: an extra CSS class to add to the menu button (default 'caret') buttonImage: a url to the menu button image menuUsabilityOverride: Callback method that user can override the default behavior of enabling/disabling the menu from being usable (must be combined with a custom formatter) minWidth: Minimum width that the drop menu will have subItemChevronClass: CSS class that can be added on the right side of a sub-item parent (typically a chevron-right icon) subMenuOpenByEvent: defaults to "mouseover", what event type shoud we use to open sub-menu(s), 2 options are available: "mouseover" or "click" Available menu item options: action: Optionally define a callback function that gets executed when item is chosen (and/or use the onCommand event) title: Menu item text. divider: Whether the current item is a divider, not an actual command. disabled: Whether the item/command is disabled. hidden: Whether the item/command is hidden. tooltip: Item tooltip. command: A command identifier to be passed to the onCommand event handlers. cssClass: A CSS class to be added to the menu item container. iconCssClass: A CSS class to be added to the menu item icon. iconImage: A url to the icon image. textCssClass: A CSS class to be added to the menu item text. itemVisibilityOverride: Callback method that user can override the default behavior of showing/hiding an item from the list itemUsabilityOverride: Callback method that user can override the default behavior of enabling/disabling an item from the list The plugin exposes the following events: onAfterMenuShow: Fired after the menu is shown. You can customize the menu or dismiss it by returning false. Event args: grid: Reference to the grid. column: Column definition. menu: Menu options. Note that you can change the menu items here. onBeforeMenuShow: Fired before the menu is shown. You can customize the menu or dismiss it by returning false. Event args: grid: Reference to the grid. column: Column definition. menu: Menu options. Note that you can change the menu items here. onCommand: Fired on menu item click for buttons with 'command' specified. Event args: grid: Reference to the grid. column: Column definition. command: Button command identified. button: Button options. Note that you can change the button options in your event handler, and the column header will be automatically updated to reflect them. This is useful if you want to implement something like a toggle button.

init(grid: SlickGrid)

setOptions(newOptions: Partial<HeaderMenuOption>)

destroy()

destroyAllMenus()

destroySubMenus()

hideMenu()

SlickHybridSelectionModel 15

init(grid: SlickGrid)

destroy()

getOptions(): HybridSelectionModelOption

setOptions(options: Partial<HybridSelectionModelOption>)

getCellRangeSelector(): SlickCellRangeSelector_ | undefined

getSelectedRanges(): SlickRange_[]

getSelectedRows(): number[]

setSelectedRows(rows: number[]): void

resetPageRowCount()

setSelectedRanges(ranges: SlickRange_[], caller?, selectionMode?)

currentSelectionModeIsRow()

refreshSelections()

getRowMoveManagerPlugin(): SlickRowMoveManager_ | SlickCrossGridRowMoveManager_ | undefined

rowSelectionModelIsActive(data: OnActiveCellChangedEventArgs): boolean

SlickResizer 10

A Resizer plugin that can be used to auto-resize a grid and/or resize with fixed dimensions. When fixed height is defined, it will auto-resize only the width and vice versa with the width defined. You can also choose to use the flag "enableAutoSizeColumns" if you want to the plugin to automatically call the grid "autosizeColumns()" method after each resize. USAGE: Add the "slick.resizer.js" file and register it with the grid. You can specify certain options as arguments when instantiating the plugin like so: var resizer = new Slick.Plugins.Resizer({ container: '#gridContainer', rightPadding: 15, bottomPadding: 20, minHeight: 180, minWidth: 300, }); grid.registerPlugin(resizer); The plugin exposes the following events: onGridAfterResize: Fired after the grid got resized. You can customize the menu or dismiss it by returning false. Event args: grid: Reference to the grid. dimensions: Resized grid dimensions used onGridBeforeResize: Fired before the grid gets resized. You can customize the menu or dismiss it by returning false. Event args: grid: Reference to the grid.

setOptions(newOptions: Partial<ResizerOption>)

init(grid: SlickGrid)

bindAutoResizeDataGrid(newSizes?: GridSize)

calculateGridNewDimensions(): GridSize | null

destroy()

getLastResizeDimensions()

pauseResizer(isResizePaused: boolean)

resizeGrid(delay?: number, newSizes?: GridSize, event?: Event | null): Promise<GridSize | undefined> | void

SlickRowDetailView 19

A plugin to add row detail panel Original StackOverflow question & article making this possible (thanks to violet313) https://stackoverflow.com/questions/10535164/can-slickgrids-row-height-be-dynamically-altered#29399927 http://violet313.org/slickgrids/#intro USAGE: Add the slick.rowDetailView.(js|css) files and register the plugin with the grid. AVAILABLE ROW DETAIL OPTIONS: cssClass: A CSS class to be added to the row detail expandedClass: Extra classes to be added to the expanded Toggle expandableOverride: callback method that user can override the default behavior of making every row an expandable row (the logic to show or not the expandable icon). collapsedClass: Extra classes to be added to the collapse Toggle loadOnce: Defaults to false, when set to True it will load the data once and then reuse it. preTemplate: Template that will be used before the async process (typically used to show a spinner/loading) postTemplate: Template that will be loaded once the async function finishes process: Async server function call panelRows: Row count to use for the template panel singleRowExpand: Defaults to false, limit expanded row to 1 at a time. useRowClick: Boolean flag, when True will open the row detail on a row click (from any column), default to False keyPrefix: Defaults to '_', prefix used for all the plugin metadata added to the item object (meta e.g.: padding, collapsed, parent) collapseAllOnSort: Defaults to true, which will collapse all row detail views when user calls a sort. Unless user implements a sort to deal with padding saveDetailViewOnScroll: Defaults to true, which will save the row detail view in a cache when it detects that it will become out of the viewport buffer useSimpleViewportCalc: Defaults to false, which will use simplified calculation of out or back of viewport visibility AVAILABLE PUBLIC METHODS: init: initiliaze the plugin expandableOverride: callback method that user can override the default behavior of making every row an expandable row (the logic to show or not the expandable icon). destroy: destroy the plugin and it's events collapseAll: collapse all opened row detail panel collapseDetailView: collapse a row by passing the item object (row detail) expandDetailView: expand a row by passing the item object (row detail) getColumnDefinition: get the column definitions getExpandedRows: get all the expanded rows getFilterItem: takes in the item we are filtering and if it is an expanded row returns it's parents row to filter on getOptions: get current plugin options resizeDetailView: resize a row detail view, it will auto-calculate the number of rows it needs saveDetailView: save a row detail view content by passing the row object setOptions: set or change some of the plugin options THE PLUGIN EXPOSES THE FOLLOWING SLICK EVENTS: onAsyncResponse: This event must be used with the "notify" by the end user once the Asynchronous Server call returns the item detail Event args: item: Item detail returned from the async server call detailView: An explicit view to use instead of template (Optional) onAsyncEndUpdate: Fired when the async response finished Event args: grid: Reference to the grid. item: Item data context onBeforeRowDetailToggle: Fired before the row detail gets toggled Event args: grid: Reference to the grid. item: Item data context onAfterRowDetailToggle: Fired after the row detail gets toggled Event args: grid: Reference to the grid. item: Item data context expandedRows: Array of the Expanded Rows onRowOutOfViewportRange: Fired after a row becomes out of viewport range (user can't see the row anymore) Event args: grid: Reference to the grid. item: Item data context rowId: Id of the Row object (datacontext) in the Grid rowIndex: Index of the Row in the Grid expandedRows: Array of the Expanded Rows rowIdsOutOfViewport: Array of the Out of viewport Range Rows onRowBackToViewportRange: Fired after a row is back to viewport range (user can visually see the row detail) Event args: grid: Reference to the grid. item: Item data context rowId: Id of the Row object (datacontext) in the Grid rowIndex: Index of the Row in the Grid expandedRows: Array of the Expanded Rows rowIdsOutOfViewport: Array of the Out of viewport Range Rows

init(grid: SlickGrid)

destroy()

getOptions()

setOptions(options: Partial<RowDetailViewOption>)

collapseAll()

collapseDetailView(item: any, isMultipleCollapsing?)

expandDetailView(item: any)

saveDetailView(item: any)

getColumnDefinition()

getExpandedRows()

resizeDetailView(item: any)

getFilterItem(item: any)

expandableOverride(overrideFn: UsabilityOverrideFn)

SlickRowMoveManager 8

Row Move Manager options: containerCssClass: A CSS class to be added to the cell container. cssClass: A CSS class to be added to the div of the cell formatter. columnId: Column definition id (defaults to "_move") cancelEditOnDrag: Do we want to cancel any Editing while dragging a row (defaults to false) disableRowSelection: Do we want to disable the row selection? (defaults to false) hideRowMoveShadow: Do we want to hide the row move shadow clone? (defaults to true) rowMoveShadowMarginTop: When row move shadow is shown, optional margin-top (defaults to 0) rowMoveShadowMarginLeft: When row move shadow is shown, optional margin-left (defaults to 0) rowMoveShadowOpacity: When row move shadow is shown, what is its opacity? (defaults to 0.95) rowMoveShadowScale: When row move shadow is shown, what is its size scale? (default to 0.75) singleRowMove: Do we want a single row move? Setting this to false means that it's a multple row move (defaults to false) width: Width of the column usabilityOverride: Callback method that user can override the default behavior of the row being moveable or not

init(grid: SlickGrid)

destroy()

setOptions(newOptions: Partial<RowMoveManagerOption>)

getColumnDefinition(): Column

usabilityOverride(overrideFn: UsabilityOverrideFn)

isHandlerColumn(columnIndex: number | string)

SlickRowSelectionModel 10

init(grid: SlickGrid)

destroy()

getOptions(): RowSelectionModelOption

setOptions(options: Partial<RowSelectionModelOption>)

getSelectedRows()

setSelectedRows(rows: number[])

setSelectedRanges(ranges: SlickRange_[], caller?, selectionMode?: string)

getSelectedRanges()

refreshSelections()

SlickStateOption (options) 5

CurrentState (options) 4

SlickState 13

init(grid: SlickGrid)

destroy()

save()

restore()

setUserData(data: any)

setUserDataFromState(data: any)

getUserData()

getStateUserData()

resetUserData()

getColumns()

getSortColumns()

reset()