Kanban Card Editor

KanbanCardEditorDialogPlugin is a separate companion plugin that KanbanPlugin installs by default. It listens to the existing cancelable create, edit, and delete request events, then uses KanbanPlugin’s canonical mutation methods and history integration. The separate Open request remains application-owned for products that provide a distinct read-only detail view.

import { KanbanPlugin } from '@revolist/revogrid-enterprise';

grid.plugins = [KanbanPlugin];
grid.kanban = kanban;
grid.kanbanCardEditorDialog = {
  fields: [{
    id: 'points', label: 'Story points', kind: 'number', field: 'points',
    validate: (value) => Number(value) < 0 ? 'Story points cannot be negative.' : undefined,
  }],
};

The packaged form includes title, description, workflow status, swimlane, priority, tags, assignees, progress, start/end schedule, due date, and color. Matching schema IDs override those fields, hiddenFields removes them, and fieldOrder sets layout order. Additional schemas can map any ColumnProp, or use read and write for composite application records.

Field schemas support text, textarea, number, select, multiselect, tags, checkbox, date, datetime, color, assignees, and custom DOM controls. They can also provide icons, options, placeholders, defaults, parsing, formatting, readonly/required state, synchronous or asynchronous validation, and renderer cleanup lifecycles.

Assignee fields use the same resource picker as Scheduler and Gantt. Supply schema options when your application owns a people directory. If the packaged field has no explicit options, the editor derives a unique picker catalog from the canonical Kanban cards through card.assignees, or assigneeField plus assigneeAvatarField. Explicit options remain authoritative, and existing mapped selections stay visible even before a directory is loaded.

Validation

Each visible field runs its required check and synchronous or asynchronous validate callback. Use the editor-level validate callback for cross-field or remote rules; return a form message or a record keyed by field ID.

grid.kanbanCardEditorDialog = {
  fields: [{
    id: 'points', field: 'points', kind: 'number', required: true,
    validate: async (value) => await api.pointsError(value),
  }],
  validate: ({ draft }) => draft.startDate > draft.dueDate
    ? { dueDate: 'Due date must follow the start date.' }
    : undefined,
};

The validation lifecycle is observable through beforekanbancardeditorvalidate, beforekanbancardeditorfieldvalidate, kanbancardeditorfieldvalidate, kanbancardeditorvalidate, and kanbancardeditorinvalid. The two before... events are cancelable. Their details expose setError, allowing application validators to add field or form errors without replacing editor persistence. Cancelled or invalid validation always keeps the editor open and blocks the Kanban mutation.

Replacement editors call context.controller.validate() to run the same rules and events as the packaged dialog. The plugin instance also exposes validate() for an open editor.

Persistence and identifiers

By default, Save calls createCard or updateCard, Delete calls deleteCards, and every successful operation is undoable. The fallback create ID is a collision-checked string. Use createCardId for numeric or domain IDs.

Use onSubmit and onDelete for remote persistence. Returning false tells the plugin that the application handled the mutation. Errors thrown by async hooks remain visible without closing the dialog.

Replace or disable the editor

Set grid.kanbanCardEditorDialog = false or cancel the request event to retain an application-owned workflow. Explicitly registering KanbanCardEditorDialogPlugin remains supported and the Kanban dependency lifecycle reuses that instance. A full customization.editor DOM renderer receives the draft state and controller, so React, Vue, Angular, and other application UI can mount in place of the packaged modal.

grid.kanbanCardEditorDialog = {
  customization: {
    editor: {
      mount(container, context) {
        return mountApplicationEditor(container, context.controller);
      },
    },
  },
};