Configuring the editor

The task editor modal dialog consists of the fields for managing tasks data. To configure the editor fields (controls), use the editorShape property with the following types of the editor fields:

• text and textarea
• date
• slider
• select
• counter
• link

For example, the editor fields of the text type you can set in the following way:

const editorShape = [
    {
        key: "text",
        type: "text", 
        label: "Name",
        config: {
          placeholder: "Add task name",
          focus: true,
            },
        },    
       //other settings
] 

Linking editor fields to the tasks data

Linking is implemented via the key parameter which should be unique for each editor control. This key corresponds to the field name of the task object.

<script>
import { Gantt } from "@wx/svelte-gantt";
const editorShape = [
    {
        key: "text", //corresponds to the "text:"Svelte Gantt Widget"" task object field below
        type: "text",
        label: "Name",
        config: {
            placeholder: "Add task name",
            focus: true,
          },
    },
    {
        key: "type", //corresponds to the "type:"project"" task object field below
        type: "select",
        label: "Type",
    },
    {
        key: "start_date", //corresponds to the "start_date:"2023-11-06"" task object field below
        type: "date",
        label: "Start date",
    },
    //other settings
];

const tasks = [
  {
    id: 1,
    open: true,
    start_date: "2023-11-06",
    duration: 8,
    text: "Svelte Gantt Widget",
    progress: 60,
    type: "project"
  },
  //other tasks
]

</script>

<Gantt  {tasks} {editorShape} />