How to correctly implement a Hierarchical Numbering Column in Gantt Chart?
Gantt Chart by default has a column `ID` displaying tasks' primary key. But what I need is a column like this:
My current implementation and Question are:
Current Implementation: Database-side hierarchy numbering
• Added two PostgreSQL triggers (compute_hierarchyandrenumber_siblings) so that any insert/delete/update will recalcHierarchyNumberon the fly.
• All backend endpoints reload the entity after save, so your triggers always fill in the latest numbers before you return data.Question: The UI gap
• When you delete a task, the DB trigger correctly renumbers its siblings and your batch endpoint returns those updated siblings in changedRecords.
• Problem: Syncfusion Gantt isn’t automatically rebinding those sibling rows, so the grid keeps showing the old numbers.Two paths forward
- Manual refresh
• InactionComplete(or use a component ref), call.refresh()(or loopupdateRecordByID) to force the grid to redraw.
• ✅ This works, but it bypasses the built-in DataManager mechanism. - Batch-mode via DataManager
• Leverage UrlAdaptor’s support for{ action: 'batch', addedRecords, changedRecords, deletedRecords }.
• The Gantt in Batch edit mode should consume those arrays and update exactly the affected rows without a full refresh.
• Current hitch: We’ve setbatchUrl,editSettings.mode='Batch', and returned the correct arrays, but the grid still fires single-record saves or doesn’t trigger its internalbatchSavepath.
- Manual refresh
Why this is tricky
• Syncfusion’s docs show how to toggle “Cell” vs. “Batch” edit, but they don’t explicitly spell out the URL-shape or event sequence.
• In practice, Gantt will only apply your changedRecords when its own requestType is exactlybatchSave. Anything else (single-save, refresh, etc.) drops that array.
please help, thanks
code is here:
<script setup>
import { GanttComponent as EjsGantt, ContextMenu, Edit, Selection, Toolbar, Resize, Sort, ExcelExport, PdfExport } from '@syncfusion/ej2-vue-gantt';
import { provide, ref } from 'vue';
import { DataManager, UrlAdaptor } from '@syncfusion/ej2-data';
// Configure DataManager for remote CRUD
const baseUrl = 'http://localhost:3000/api/tasks';
const dataManager = new DataManager({
url: baseUrl,
batchUrl: baseUrl,
adaptor: new UrlAdaptor(),
crossDomain: true,
idMapping: 'TaskID'
});
// Define task fields mapping
const taskFields = {
id: 'TaskID',
name: 'TaskName',
startDate: 'StartDate',
endDate: 'EndDate',
duration: 'Duration',
progress: 'Progress',
parentID: 'parentId'
};
// Define edit settings for Gantt
const editSettings = {
allowAdding: true,
allowEditing: true,
allowDeleting: true,
allowTaskbarEditing: true,
showDeleteConfirmDialog: true,
addRowPosition: 'Child',
allowBatchSave: true // enable batch CRUD mode
};
// Define toolbar items for Gantt actions
const toolbar = [
'Add', 'Edit', 'Delete', 'Update', 'Cancel',
'ExpandAll', 'CollapseAll', 'ExcelExport', 'PdfExport'
];
// Reference to Gantt component for invoking batch save
const ganttRef = ref(null);
// Intercept single-record saves/deletes and rerun as batchSave
function onActionBegin(args) {
console.log('[Gantt Debug] actionBegin', args.requestType, args.data);
// Intercept single-record add or delete to trigger batchSave
if ((args.requestType === 'beforeAdd' || args.requestType === 'beforeDelete')) {
console.log('[Gantt Debug] intercepting single operation, cancelling and triggering batchSave');
args.cancel = true;
// use batch save to consume changedRecords from server
ganttRef.value.ej2Instances.saveChanges();
}
}
// Log completion of batchSave or other actions
function onActionComplete(args) {
console.log('[Gantt Debug] actionComplete', args.requestType, args.data, args);
}
// Define grid columns, replacing default ID with HierarchyNumber
const columns = [
// Hidden primary key column for TreeGrid
{ field: 'TaskID', headerText: 'TaskID', isPrimaryKey: true, visible: false, allowResizing: true },
// Visible hierarchical number with tooltip on overflow
{ field: 'HierarchyNumber', headerText: 'ID', width: 100, textAlign: 'Left', allowResizing: true, clipMode: 'EllipsisWithTooltip' },
{ field: 'TaskName', headerText: 'Name', width: 250, textAlign: 'Left', allowResizing: true },
{ field: 'StartDate', headerText: 'Start Date', width: 120, format: 'MM/dd/yyyy', textAlign: 'Left', allowResizing: true },
{ field: 'EndDate', headerText: 'End Date', width: 120, format: 'MM/dd/yyyy', textAlign: 'Left', allowResizing: true },
{ field: 'Progress', headerText: 'Progress', width: 100, textAlign: 'Right', allowResizing: true }
];
// Provide required Gantt and TreeGrid modules (including batch editing)
provide('gantt', [ContextMenu, Edit, Selection, Toolbar, Resize, Sort, ExcelExport, PdfExport]);
</script>
<template>
<ejs-gantt
ref="ganttRef"
@actionBegin="onActionBegin"
@actionComplete="onActionComplete"
:dataSource="dataManager"
:taskFields="taskFields"
:editSettings="editSettings"
:toolbar="toolbar"
:enableContextMenu="true"
:columns="columns"
:allowResizing="true"
:allowSelection="true"
:allowExcelExport="true"
:allowPdfExport="true"
:allowSorting="true"
height="450px"
:treeColumnIndex="1"
/>
</template>
<style>
/* Material theme used for this sample */
@import "@syncfusion/ej2-base/styles/material.css";
@import "@syncfusion/ej2-buttons/styles/material.css";
@import "@syncfusion/ej2-calendars/styles/material.css";
@import "@syncfusion/ej2-dropdowns/styles/material.css";
@import "@syncfusion/ej2-inputs/styles/material.css";
@import "@syncfusion/ej2-navigations/styles/material.css";
@import "@syncfusion/ej2-popups/styles/material.css";
@import "@syncfusion/ej2-splitbuttons/styles/material.css";
@import "@syncfusion/ej2-layouts/styles/material.css";
@import "@syncfusion/ej2-grids/styles/material.css";
@import "@syncfusion/ej2-treegrid/styles/material.css";
@import "@syncfusion/ej2-vue-gantt/styles/material.css";
</style>
SIGN IN To post a reply.
3 Replies
SIGN IN To post a reply.
