Controls

SlickColumnMenu 15

A control to add a Column Picker (right+click on any column header to reveal the column picker) NOTE: this a simplified and updated version of slick.columnpicker.js USAGE: Add the slick.columnpicker.(js|css) files and register it with the grid. Available options, by defining a columnPicker object: let options = { enableCellNavigation: true, columnPicker: { columnTitle: "Columns", // default to empty string // the last 2 checkboxes titles hideForceFitButton: false, // show/hide checkbox near the end "Force Fit Columns" (default:false) hideSyncResizeButton: false, // show/hide checkbox near the end "Synchronous Resize" (default:false) forceFitTitle: "Force fit columns", // default to "Force fit columns" headerColumnValueExtractor: "Extract the column label" // default to column.name syncResizeTitle: "Synchronous resize", // default to "Synchronous resize" } };

init(grid: SlickGrid)

destroy()

handleBodyMouseDown(e: DOMMouseOrTouchEvent<HTMLDivElement>)

handleHeaderContextMenu(e: SlickEventData)

repositionMenu(event: DOMMouseOrTouchEvent<HTMLDivElement> | SlickEventData)

updateColumnOrder()

updateAllTitles(pickerOptions: { columnTitle: string; })

updateColumn(e: DOMMouseOrTouchEvent<HTMLInputElement>)

setColumnVisibiliy(idxOrId: number | string, show: boolean)

setColumnVisibility(idxOrId: number | string, show: boolean)

getAllColumns()

getColumnbyId(id: number | string)

getColumnIndexbyId(id: number | string)

getVisibleColumns()

SlickColumnPicker 10

A control to add a Column Picker (right+click on any column header to reveal the column picker) NOTE: this is the old 'complex' column pciker that hides columns by removing them from the grid for a more modern version that uses the column.hidden property and is a lot simpler, use slick.columnmenu.js USAGE: Add the slick.columnpicker.(js|css) files and register it with the grid. Available options, by defining a columnPicker object: let options = { enableCellNavigation: true, columnPicker: { columnTitle: "Columns", // default to empty string // the last 2 checkboxes titles hideForceFitButton: false, // show/hide checkbox near the end "Force Fit Columns" (default:false) hideSyncResizeButton: false, // show/hide checkbox near the end "Synchronous Resize" (default:false) forceFitTitle: "Force fit columns", // default to "Force fit columns" headerColumnValueExtractor: "Extract the column label" // default to column.name syncResizeTitle: "Synchronous resize", // default to "Synchronous resize" } };

init(grid: SlickGrid)

destroy()

updateAllTitles(pickerOptions: { columnTitle: string; })

setColumnVisibiliy(idxOrId: number | string, show: boolean)

setColumnVisibility(idxOrId: number | string, show: boolean)

getAllColumns()

getColumnbyId(id: number | string)

getColumnIndexbyId(id: number | string)

getVisibleColumns()

SlickGridMenu 17

A control to add a Grid Menu (hambuger menu on top-right of the grid) USAGE: Add the slick.gridmenu.(js|css) files and register it with the grid. To specify a menu in a column header, extend the column definition like so: let gridMenuControl = new Slick.Controls.GridMenu(columns, grid, options); Available grid options, by defining a gridMenu object: let options = { enableCellNavigation: true, gridMenu: { commandTitle: "Command List", // default to empty string columnTitle: "Columns", // default to empty string iconImage: "some-image.png", // this is the Grid Menu icon (hamburger icon) iconCssClass: "fa fa-bars", // you can provide iconImage OR iconCssClass leaveOpen: false, // do we want to leave the Grid Menu open after a command execution? (false by default) menuWidth: 18, // width (icon) that will be use to resize the column header container (18 by default) contentMinWidth: 0, // defaults to 0 (auto), minimum width of grid menu content (command, column list) marginBottom: 15, // defaults to 15, margin to use at the bottom of the grid when using max-height (default) resizeOnShowHeaderRow: false, // false by default showButton: true, // true by default - it allows the user to control if the // default gridMenu button (located on the top right corner by default CSS) // should be created or omitted useClickToRepositionMenu: true, // true by default // the last 2 checkboxes titles hideForceFitButton: false, // show/hide checkbox near the end "Force Fit Columns" hideSyncResizeButton: false, // show/hide checkbox near the end "Synchronous Resize" forceFitTitle: "Force fit columns", // default to "Force fit columns" syncResizeTitle: "Synchronous resize", // default to "Synchronous resize" commandItems: [ { // command menu item options }, { // command menu item options } ] } }; Available menu options: hideForceFitButton: Hide the "Force fit columns" button (defaults to false) hideSyncResizeButton: Hide the "Synchronous resize" button (defaults to false) forceFitTitle: Text of the title "Force fit columns" contentMinWidth: minimum width of grid menu content (command, column list), defaults to 0 (auto) height: Height of the Grid Menu content, when provided it will be used instead of the max-height (defaults to undefined) menuWidth: Grid menu button width (defaults to 18) resizeOnShowHeaderRow: Do we want to resize on the show header row event syncResizeTitle: Text of the title "Synchronous resize" useClickToRepositionMenu: Use the Click offset to reposition the Grid Menu (defaults to true), when set to False it will use the icon offset to reposition the grid menu 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) marginBottom: Margin to use at the bottom of the grid menu, only in effect when height is undefined (defaults to 15) 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 command 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. 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` 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. * ONLY works with a JS event (as per slick.core code), so we cannot notify when it's a button event (when grid menu is attached to an external button, not the hamburger menu) 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. * ONLY works with a JS event (as per slick.core code), so we cannot notify when it's a button event (when grid menu is attached to an external button, not the hamburger menu) Event args: grid: Reference to the grid. column: Column definition. menu: Menu options. Note that you can change the menu items here. onMenuClose: Fired when the menu is closing. 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: GridMenuOption)

createMenu(level?, item?: GridMenuItem | MenuCommandItem | 'divider')

destroy()

deleteMenu()

destroySubMenus()

recreateGridMenu()

showGridMenu(e: DOMMouseOrTouchEvent<HTMLButtonElement>)

hideMenu(e: DOMMouseOrTouchEvent<HTMLElement>)

updateAllTitles(gridMenuOptions: GridMenuOption)

getAllColumns()

getVisibleColumns()

GridPagerOption (options) 6

SlickGridPager 2

init()

destroy()