Skip to main content

registerEditorItem

Description​

Registers a custom UI component for use as a field in the Editor

The registered component must support the value property and onchange callback as in Editor.

Usage​

registerEditorItem?: (
  type: string,
  handler: Component<any>
) => void;

Parameters​

  • type - (required) a unique identifier for the editor control
  • handler - (required) a Vue component that implements value property and onchange callback as in Editor.

Example​

The example shows how to add a custom editor field using the radio button component:

<script setup>
  import { ref } from "vue";
  import { Gantt, Editor, getEditorItems, registerEditorItem, defaultTaskTypes } from "@svar-ui/vue-gantt";
  import { RadioButtonGroup } from "@svar-ui/vue-core";

  registerEditorItem("radio", RadioButtonGroup);

  // replace the "type" select with a radio group
  const items = getEditorItems().map(item =>
    item.key === "type"
      ? {
          key: "type",
          comp: "radio",
          label: "Type",
          options: defaultTaskTypes.map(o => ({
            ...o,
            value: o.id,
          })),
          config: { type: "inline" },
        }
      : item
  );

  const api = ref(null);
</script>

<template>
  <Gantt ref="api" />
  <Editor :api="api" :items="items" />
</template>

Related articles: