📚
Slickgrid-Universal
Live DemoGitHubOther Frameworks
  • Introduction
  • Getting Started
    • Quick start
    • Salesforce (LWC)
    • Vanilla Installation
  • Styling
    • Dark Mode
    • Styling CSS/SASS/Themes
  • Column Functionalities
    • Cell Menu (Action Menu)
    • Editors
      • Autocomplete
      • old Date Picker (flatpickr)
      • new Date Picker (vanilla-calendar)
      • LongText (textarea)
      • Select Dropdown Editor (single/multiple)
    • Filters
      • Input Filter (default)
      • Select Filter (dropdown)
      • Compound Filters
      • Range Filters
      • Styling Filled Filters
      • Single Search Filter
    • Formatters
    • Sorting
  • Events
    • Available events
    • On Events
  • Grid Functionalities
    • Auto-Resize / Resizer Service
    • Resize by Cell Content
    • Column Picker
    • Composite Editor Modal
    • Custom Tooltip
    • Column & Row Spanning
    • Context Menu
    • Custom Footer
    • Excel Copy Buffer Plugin
    • Export to Excel
    • Export to File (csv/txt)
    • Grid Menu
    • Grid State & Presets
    • Grouping & Aggregators
    • Header Menu & Header Buttons
    • Pagination
    • Infinite Scroll
    • Pinning (frozen) of Columns/Rows
    • Row Detail
    • Row Selection
    • Tree Data Grid
    • Row Based Editing Plugin
  • Developer Guides
    • CSP Compliance
  • Localization
    • with I18N
    • with Custom Translate Service
    • with Single Locale
  • Backend Services
    • Custom Backend Service
    • OData
    • GraphQL
      • JSON Result Structure
      • Filtering Schema
      • Pagination Schema
      • Sorting Schema
  • Migrations
    • Migration Guide to 1.x (2021-12-11)
    • Migration Guide to 2.x (2022-10-17)
    • Migration Guide to 3.x (2023-05-29)
    • Migration Guide to 4.x (2023-12-15)
    • Migration Guide to 5.x (2024-05-10)
    • Versions 6 to 8 are skipped...
    • Migration Guide to 9.x (2025-05-10)
Powered by GitBook
On this page
  1. Events

On Events

PreviousAvailable eventsNextAuto-Resize / Resizer Service

Last updated 1 year ago

See the full list of which you can use by simply hook a subscribe to them (the subscribe are a custom SlickGrid Event and are NOT an RxJS Observable type but they very similar). You can access them in Slickgrid-Universal by following the documentation below

View

<div class="grid1">
</div>

ViewModel

Hook yourself to the Changed event of the bindable grid object.

export class GridExample {
  sgb;

  attached() {
    const dataset = this.initializeGrid();
    const gridContainerElm = document.querySelector<HTMLDivElement>(`.grid1`);

    gridContainerElm.addEventListener('oncellclicked', this.handleOnCellClicked.bind(this));
    gridContainerElm.addEventListener('oncellchanged', this.handleOnCellChanged.bind(this));
    this.sgb = new Slicker.GridBundle(gridContainerElm, this.columnDefinitions, this.gridOptions, dataset);
  }

  handleOnCellClicked(event) {
    const args = event?.detail?.args;
    const eventData = event?.detail?.eventData;

    // cellClick event only returns row/cell, use DataView to get its context
    const dataContext = this.sgb.dataView.getItem(args.row);
  }

  handleOnCellChanged(event) {
    const args = event?.detail?.args;
    const eventData = event?.detail?.eventData;
    this.updatedObject = args.item;
    this.sgb.resizerService.resizeGrid(10);
  }
}

View - SalesForce (ES6)

For SalesForce it's nearly the same, the only difference is that we add our events in the View instead of in the ViewModel

<div class="grid-container">
    <div class="grid1"
         onvalidationerror={handleOnValidationError}
         oncellchange={handleOnCellChange}
         onclick={handleOnCellClick}
         onbeforeeditcell={handleOnBeforeEditVerifyCellIsEditable}
         onslickergridcreated={handleOnSlickerGridCreated}>
    </div>
</div>
Available Events