SlickGrid Plugins

Index

• Column Picker
• Row Selection
• Register a Plugin

Column Picker

Enable by default and provides the list of available fields by simply doing a right+click over any column header, you can then hide/show the column(s) you want.

Grid Options

To enable/disable the Column Picker, simply call the enableColumnPicker flag in the Grid Options (enable by default).

this.gridOptions = {
  enableColumnPicker: true
}

Sample

Row Selection

Provide a way to do row selection and do actions with an Event callback function.

Grid Options

To enable/disable Row(s) Selection, you can call the enableRowSelection flag in the Grid Options. You could also choose to select the active row (false by default) by calling rowSelection: { selectActiveRow: true; }

this.gridOptions = {
  enableRowSelection: true,
  rowSelection: {
    selectActiveRow: true;
  }
}

Event

You can subscribe to a SlickGrid Event (not an Observable) named onSelectedRowsChanged and hook a callback function to it.

// args is an object returning: { rows: number[] }
grid.onSelectedRowsChanged.subscribe((e, args) => {
  console.log('onSelectedRowsChanged', args);
});

Refer to the Wiki - Grid On Events to know how to connect an Event.

Register a Plugin

You can register a Plugin or multiple Plugins by calling registerPlugins from the Grid Options. The property accept a single Plugin or an array of Plugins.

Grid Option

To enable/disable Row(s) Selection, you can call the enableRowSelection flag in the Grid Options. You could also choose to select the active row (false by default) by calling rowSelection: { selectActiveRow: true; }

this.gridOptions = {
  registerPlugins: myPlugin
}

OR multiple Plugins

this.gridOptions = {
  registerPlugins: [myPlugin1, myPlugin2]
}