Configuring the grid (tasks tree) area

The grid with tasks tree can be used for quick navigation.

By default, the tasks tree area contains 4 columns:

• Task name
• Start date
• Duration
• '+' column. A special column with the '+' button which allows users to add tasks

Configuring columns

Columns with default parameters are applied by default and you don't need to specify the columns objects.

Default columns array you can see here: columns.

Adding a column

If you want to add a new column, add the columns object to the array and specify its id parameter in the task object. id is the mandatory parameter which defines the content of cells and the cell will take the value of the matching property from a task by default.

<script setup>
  import { Gantt } from "@svar-ui/vue-gantt";   

  const columns = [
    { id: "holder", header: "Holder", width: 90, align: "center" },
    //other columns
  ];

  const tasks = [ 
  {
   id: 1,
   start: new Date(2022, 2, 4),
   end: new Date(2023, 2, 4),
   progress: 20,
   parent: 1,
   type: "task",
   holder: "Nick",
  },
  //other tasks
]

</script>  

<template>
  <Gantt :tasks="tasks" :columns="columns" />
</template>

Configuring columns width

To set a fixed column width, use the width parameter. The default value is 120.

To make a column flexible, use the flexgrow parameter from the columns property. It takes a number and specifies how much of the available grid width the column takes relative to other flexible columns. It has no effect on columns with a fixed width set. If only one column has flexgrow: 1, it takes all available width.

Example:

<script setup>
  import { getData } from "../data";
  import { Gantt } from "@svar-ui/vue-gantt";

  const data = getData();

  const columns = [
    { id: "text", header: "Task name", flexgrow: 2 },
    {
      id: "start",
      header: "Start date",
      flexgrow: 1,
      align: "center",
    },
    {
      id: "duration",
      header: "Duration",
      align: "center",
      flexgrow: 1,
    },
    {
      id: "add-task",
      header: "",
      width: 50,
      align: "center",
    },
  ];
</script>

<template>
  <Gantt
    :tasks="data.tasks"
    :links="data.links"
    :scales="data.scales"
    :columns="columns"
  />
</template>

Disabling the tasks reordering

By default, a user can reorder tasks in the grid area with drag&drop. To disable the tasks ordering feature, you can apply the api.intercept() method to handle the drag-task action.

<script setup>
  import { getData } from "./data";
  import { Gantt } from "@svar-ui/vue-gantt";

  const data = getData();
  
  api.intercept("drag-task", ev => {
    if (typeof ev.top !== "undefined")
    return false;
  });
</script>

<template>
  <Gantt
    :columns="data.columns"
    :tasks="data.tasks" />
</template>

Another way to disable the feature is to switch to the read-only mode.

Displaying unscheduled tasks

PRO

The functionality is available in PRO Edition only

All new tasks created via the UI are unscheduled by default. To show unscheduled tasks in the tasks tree area, set the unscheduledTaks property to true. Columns like Start and Duration will display a hyphen (-) for unscheduled tasks. Unscheduled tasks are not shown in the Chart.

<script setup>
    import { getData } from "./data";
    import { Gantt } from "@svar-ui/vue-gantt";

    const data = getData();
</script>

<template>
  <Gantt :tasks="data.tasks" :unscheduledTasks="true" />
</template>

Hiding the grid area

To hide the area with tasks tree, set the columns property to false:

<script setup>
  import { getData } from "./data";
  import { Gantt } from "@svar-ui/vue-gantt";

  const data = getData();
</script>

<template>
  <Gantt
    :columns="false"
    :tasks="data.tasks" />
</template>

Related sample: No grid

Adding a header menu

You can add a header menu to columns in the grid area to dynamically hide and show them via the HeaderMenu. To add a header menu, you should import HeaderMenu from "@svar-ui/vue-gantt" and then place the Gantt tag inside the HeaderMenu tag.

<script setup>
import { Gantt, HeaderMenu } from "@svar-ui/vue-gantt";
</script>

<template>
  <HeaderMenu :api="api" ...>
    <Gantt ref="api" ... />
  </HeaderMenu>
</template>

The description of HeaderMenu properties you can see here.

The example below shows how to add a header menu to the grid columns and make possible to hide the "start" and "duration" columns:

<script setup>
  import { getData } from "../data";
  import { Gantt, HeaderMenu } from "@svar-ui/vue-gantt";
  import { ref } from "vue";
  
  const data = getData();
  const columns = { start: true, duration: true };

  const api = ref();
</script>

<template>
  <HeaderMenu :api="api" :columns="columns">
    <Gantt
        ref="api"
        :tasks="data.tasks"
        :links="data.links"
        :scales="data.scales"
    />
  </HeaderMenu>
</template>

Related sample: Header menu: hiding columns

Adding custom HTML content to cells

Gantt allows adding custom HTML to grid (tasks tree) cells.

Adding components

Basically, what you need is four simple steps:

• create a component (using HTML or ready-made components from the @svar-ui/vue-core library)
• in the component, access Gantt grid properties via defineProps, if needed
• import the configured component to the application page with Gantt
• add this component to the needed cell in Gantt grid

Accessing Gantt grid properties in components

Components in grid cells have access to the following data via defineProps:

• api - Grid API, using which you can call actions or listen to them
• row - task data object
• column - column data (its id, dimensions, etc.)

The example below demonstrates how to customize cells by adding images to them.

AvatarCell

<script setup>
  const props = defineProps({ row: {} });

  const url = "https://svar.dev/demos/grid/assets/avatars/";
  const user = computed(() => users.find(u => u.id == props.row.assigned));
  const avatar = computed(() =>
   user.value ? `${url}${user.value.label.replace(" ", "_")}.png` : ""
  );
</script>

<template>
  <div class="container">
    <div class="avatar">
      <div v-if="avatar" class="user-avatar">
        <img class="user-photo" alt="" :src="avatar" />
      </div>
    </div>
    <div>{{ user?.label ?? "" }}</div>
  </div>
</template>

<style scoped>
  .container {
   display: flex;
   align-items: center;
   padding: 0 4px;
  }

  .avatar {
   width: 40px;
  }

  .user-avatar {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   background-color: #dfe2e6;
   text-align: center;
  }

  .user-photo {
   display: block;
   width: 100%;
   height: 100%;
   border-radius: 50%;
   background-color: #dfe2e6;
  }
</style>

Now you can import your component and apply it to a cell by adding its name to the cell property of a column:

<script setup>
  import { getData } from "../data";
  import { Gantt } from "@svar-ui/vue-gantt";
  import AvatarCell from "../custom/AvatarCell.vue";

  const props = defineProps({ skinSettings: {} });

  const columns = [
   { id: "text", header: "Task name", width: 220 },
   { id: "assigned", header: "Assigned", width: 160, cell: AvatarCell },
   { id: "start", header: "Start Date", width: 100 },
  ];

  const data = getData();
</script>

<template>
  <Gantt
    v-bind="props.skinSettings"
    :tasks="data.tasks"
    :links="data.links"
    :scales="data.scales"
    :columns="columns"
  />
</template>

Related sample: Grid custom columns

Applying in-built inline editors

To apply the inline editor to column cells, set the editor parameter of the columns property to the required value ("text" | "combo" | "datepicker" | "richselect").

Example:

<script setup>
  import { getData } from "../data";
  import { Gantt } from "@svar-ui/vue-gantt";

  const props = defineProps({ skinSettings: {} });

  const data = getData();

  const columns = [
    {
      id: "text",
      header: "Task name",
      width: 170,
      sort: true,
      editor: "text",
    },
    {
      id: "start",
      header: "Start date",
      width: 120,
      align: "center",
      sort: true,
      editor: "datepicker",
    },
  ];
</script>

<template>
  <Gantt
    v-bind="props.skinSettings"
    :tasks="data.tasks"
    :links="data.links"
    :scales="data.scales"
    :columns="columns"
  />
</template>

Related sample: Grid inline editors

Customizing built-in editors

You can apply a template and custom Vue component to the cell editor (except the "text" type editor). In this case, column "editor" should be an object with "type" and "config". "config" allows to set a custom component in the "cell" property.

Please note that for the "combo" editor, the cell component will be applied to dropdown options only, while for 'datepicker" to the input field.

First, you need to prepare a custom component file. Components in editor cells have access to the data property via defineProps:

• data - inline editors data (for example, for combo and richselect it's an item from options, for datepicker - date value)

Let's consider a custom component for values of inline editors in "start" column. The component will show formatted date and calendar icon:

DataCell component

<script setup>
  const props = defineProps({ data: {} });
  const options = { year: "numeric", month: "numeric", day: "numeric"};
</script>

<template>
  <div v-if="props.data" class="container">
    <span>{{ props.data.toLocaleString("en-US", options) }}</span>
    <i class="icon wxi-calendar"></i>
  </div>
</template>

<style scoped>
  .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .icon {
    display: inline-flex;
    align-items: center;
    font-size: 20px;
    color: #b5b5b5;
  }
</style>

Apply this component in "cell" property of an inline editor config:

<script setup>
  import { getData } from "../data";
  import { Gantt } from "@svar-ui/vue-gantt";
  import DateCell from "../custom/DateCell.vue";
  
  const data = getData();
  
  const columns = [
    { id: "text", header: "Task name", flexgrow: 1 },
    {
      id: "start",
      header: "Start date",
      width: 120,
      align: "center",
      editor: {
        type: "datepicker",
        config: {
          cell: DateCell
        }
      }
    }
  ];
</script>

<template>
  <Gantt
    :tasks="data.tasks"
    :links="data.links"
    :scales="data.scales"
    :columns="columns"
  />
</template>

---

Related samples:

• Flexible Grid columns
• Grid fixed columns