Event Manager

Learn how to handle, customize, and optimize events to create complex interactions and workflows with the Event Manager Plugin for RevoGrid. The main purpose of this plugin is to collect and dispatch edit events in one centralized location, simplifying event management.

The Event Manager Plugin aggregates various editing events into a single event, gridedit. This approach reduces the complexity of handling multiple event types individually, such as clipboardrangepaste, beforeedit, and beforerangeedit. By using the Event Manager Plugin, you can catch all these events through one unified event, making it a robust starting point for building your custom event management system.

Source code

TypeScript

import { defineCustomElements } from '@revolist/revogrid/loader';
defineCustomElements();

import { EventManagerPlugin } from '@revolist/revogrid-pro';

import { currentTheme, useRandomData } from '../composables/useRandomData';
const { createRandomData } = useRandomData();
const { isDark } = currentTheme();

export function load(parentSelector: string) {
  const grid = document.createElement('revo-grid');
  grid.range = true;
  grid.source = createRandomData(100);
  // Define columns
  grid.columns = [
    {
      name: '🆔 ID',
      prop: 'id',
    },
    {
      name: '🍎 Fruit',
      prop: 'name',
    },
    {
      name: '💰 Price',
      prop: 'price',
    },
  ];

  // Define plugin
  grid.plugins = [EventManagerPlugin];
  grid.addEventListener('gridedit', (event) => {
    const log = document.querySelector('.output .code');
    if (!log) {
      return;
    }
    log.innerHTML = JSON.stringify(event.detail);
  });

  grid.theme = isDark() ? 'darkCompact' : 'compact';
  grid.hideAttribution = true;
  document.querySelector(parentSelector)?.appendChild(grid);
}

Vue

src/components/event-manager/EventManager.vue

<template>
  <div class="grid grid-cols-2 gap-1 p-0">
    <RevoGrid
      style="min-height: 400px;"
      ref="grid"
      :theme="isDark ? 'darkCompact' : 'compact'"
      :columns="columns"
      :source="rows"
      :plugins="plugins"
      :additionalData="additionalData"
      :range="true"
      hide-attribution
      @gridedit="handleGridEdit"
    />
    <ExpressiveCode :code="log" language="json" style="max-height: 400px;" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { currentThemeVue, useRandomData } from '../composables/useRandomData';
import RevoGrid from '@revolist/vue3-datagrid';
import { EventManagerPlugin, ColumnStretchPlugin } from '@revolist/revogrid-pro';
import ExpressiveCode from '../sys/ExpressiveCode.vue';

const { createRandomData } = useRandomData();
const { isDark } = currentThemeVue();

const columns = ref([
  { name: '🍎 Fruit', prop: 'name' },
]);

const plugins = ref([EventManagerPlugin, ColumnStretchPlugin]);

const rows = ref(createRandomData(10));

const additionalData = ref({
  stretch: 'all',
});

const log = ref(' Output Vue');

const handleGridEdit = (event: CustomEvent) => {
  log.value = JSON.stringify(event.detail, null, 2);
};
</script>

React

src/components/event-manager/EventManager.tsx

import { useState, useMemo, useRef } from 'react';
import { RevoGrid, type DataType } from '@revolist/react-datagrid';
import { EventManagerPlugin } from '@revolist/revogrid-pro';

import { useRandomData, currentTheme } from '../composables/useRandomData';
const { isDark } = currentTheme();
const { createRandomData } = useRandomData();

function EventManager() {
  const gridRef = useRef<HTMLRevoGridElement>(null);
  const [source] = useState<DataType[]>(createRandomData(100));
  const [log, setLog] = useState<string>(' Output');

  const columns = useMemo(
    () => [
      { name: '🆔 ID', prop: 'id' },
      { name: '🍎 Fruit', prop: 'name' },
      { name: '💰 Price', prop: 'price' },
    ],
    [],
  );

  const handleGridEdit = (event: CustomEvent<any>) => {
    setLog(JSON.stringify(event.detail));
  };

  return (
    <div>
      <RevoGrid
        ref={gridRef}
        columns={columns}
        source={source}
        rowHeaders
        range
        additionalData={{ stretch: 'all' }}
        hide-attribution
        theme={isDark() ? 'darkCompact' : 'compact'}
        plugins={[EventManagerPlugin]}
        onGridedit={handleGridEdit}
      />
      <br />
      <div className="expressive-code">
        <pre className="code pa-5">
          <code>{log}</code>
        </pre>
      </div>
    </div>
  );
}

export default EventManager;

Angular

src/components/event-manager/EventManagerAngular.ts

import { Component, ViewEncapsulation, type OnInit } from '@angular/core';
import { RevoGrid } from '@revolist/angular-datagrid';
import { EventManagerPlugin } from '@revolist/revogrid-pro';
import { currentTheme, useRandomData } from '../composables/useRandomData';

@Component({
  selector: 'event-manager-grid',
  standalone: true,
  imports: [RevoGrid],
  template: `
    <revo-grid
      #gridRef
      [range]="true"
      [columns]="columns"
      [source]="source"
      [hideAttribution]="true"
      [theme]="theme"
      [plugins]="plugins"
      style="height: 400px; "
      (gridedit)="handleGridEdit($event)"
    ></revo-grid>
    <br />
    <div class="expressive-code">
      <pre class="code">
        <code>{{ log }}</code>
      </pre>
    </div>`,
  encapsulation: ViewEncapsulation.None,
})
export class EventManagerGridComponent implements OnInit {
  theme = currentTheme().isDark() ? 'darkCompact' : 'compact';
  source = useRandomData().createRandomData(100);
  log = ' Output';

  columns = [
    { name: '🆔 ID', prop: 'id' },
    { name: '🍎 Fruit', prop: 'name' },
    { name: '💰 Price', prop: 'price' },
  ];

  plugins = [EventManagerPlugin];

  ngOnInit() {
    // Additional initialization if needed
  }

  handleGridEdit(event: any) {
    this.log = JSON.stringify(event.detail);
  }
}

Key Features

• Centralized Event Handling: Collects multiple edit events into a single gridedit event.
• Simplified Event Management: Reduces the need to manage numerous event types individually.
• Customizable Workflows: Provides a foundation to create complex interactions and workflows.

Implementation

Here’s a brief overview of how to implement the Event Manager Plugin in your RevoGrid setup.

Step-by-Step Guide

1. Import Required Modules: Import the necessary modules from the RevoGrid library to start setting up the Event Manager Plugin.

2. Define Edit Details Type: Create a type for edit details that will help structure the event data.

3. Create EventManagerPlugin Class: Develop the EventManagerPlugin class to handle and dispatch edit events. This class listens for various edit events and dispatches a unified gridedit event.

   • Collect Edit Events: Listens for clipboardrangepaste, beforeedit, and beforerangeedit events.
   • Dispatch Unified Event: Dispatches the gridedit event after collecting details from the various edit events.

4. Add Plugin to RevoGrid: Attach the Event Manager Plugin to your RevoGrid instance and start listening for the gridedit event.

   ...
     grid.plugins = [EventManagerPlugin];
   ...

For detailed implementation, please refer to the full code below.

The Event Manager Plugin is a powerful tool for managing edit events. By consolidating multiple event types into a single, manageable event, it simplifies event handling and provides a solid foundation for developing custom workflows and interactions.