Premium support for our pure JavaScript UI components


Post by sprabhu »

Hi,
In the advanced example for Bryntum Gantt, the Predecessor or Successor column shows the task name and WBS level e.g. (abc(1.1.1) where abc is task name and 1.1.1 is wbs level. But when we select a value the column is populated with wbs level(i.e. 1.1.1). Is it possible to show the Task Name instead of Wbs level.

https://bryntum.com/products/gantt/examples/advanced/


Post by alex.l »

Hi, could you please make a video to show where did you see WBS instead of task name when you select it?
I am not sure I got it correct, because I see the name after I selected a task, please see video attached.

Attachments
Screen Recording 2023-05-19 at 11.09.57.mov
(3.75 MiB) Downloaded 26 times

All the best,
Alex


Post by sprabhu »

Hi Alex,
Please go through the recording using the below url. The WBS level is shown instead of Task Name
https://frontrol-my.sharepoint.com/:v:/p/cgupta/Ee6BPuse2OVAv7GTLiqYMTsBWfTV5z5XQhNrZJoTZqRMng?e=US27Z0


Post by sprabhu »

Also, the list shows the value as Task Name(WBS level) sorted alphabetically. Can we change that to show some other columns e.g. Column A (Column B) and can we sort the list based on WBS level instead.

Attachments
Predecessors dropdown list sorted alphabetically.png
Predecessors dropdown list sorted alphabetically.png (217.79 KiB) Viewed 623 times

Post by alex.l »

Ok, I see now, thanks.
That's not configurable, but you can use your own renderer for the column and format data as you need.
As example try this

    columns : [
        { type : 'wbs' },
        { type : 'name', width : 250 },
         
// ... { type : 'predecessor', renderer({ record, grid }) { const dependencyIdField = this.dependencyIdField || grid.dependencyIdField; return DependencyField.dependenciesToString(record[this.field], this.field === 'predecessors' ? 'from' : 'to', this.delimiter, 'name'); },

All the best,
Alex


Post by alex.l »

Also, the list shows the value as Task Name(WBS level) sorted alphabetically. Can we change that to show some other columns e.g. Column A (Column B) and can we sort the list based on WBS level instead.

The editor in the column is https://bryntum.com/products/gantt/docs/api/Gantt/widget/DependencyField
You can change its https://bryntum.com/products/gantt/docs/api/Gantt/widget/DependencyField#config-listItemTpl and use your own. Original code you can find in DependencyField.js, but I will post it here as well

   listItemTpl(task) {
        const
            taskName              = StringHelper.encodeHtml(task.name),
            { dependencyIdField } = this.owner,
            idField               = (dependencyIdField && dependencyIdField !== task.constructor.idField) ? dependencyIdField : task.constructor.idField,
            // Don't output generated ids in the list
            taskIdentifier        = !task.isPhantom ? String(task[idField]) : '';

    return `<div class="b-predecessor-item-text">${taskName} ${taskIdentifier.length ? `(${taskIdentifier})` : ''}</div>
        <div class="b-sch-box b-from" data-side="from"></div>
        <div class="b-sch-box b-to" data-side="to"></div>`;
}

For sorting just apply sorter you want for the column editor. Default code

sorters : [
            {
                field : 'name'
            }
        ]

Possible override

        {
            type  : 'predecessor',
            renderer({ record, grid }) {
                const dependencyIdField = this.dependencyIdField || grid.dependencyIdField;
                return DependencyField.dependenciesToString(record[this.field], this.field === 'predecessors' ? 'from' : 'to', this.delimiter, 'name');
            },
            editor : {
                sorters : [
                    {
                        field : 'wbsCode'
                    }
                ]
            },

        width : 112
    },

All the best,
Alex


Post by sprabhu »

Hi Alex,
If I use the code you provided i.e.

        {
            type  : 'predecessor',
            renderer({ record, grid }) {
                const dependencyIdField = this.dependencyIdField || grid.dependencyIdField;
                return DependencyField.dependenciesToString(record[this.field], this.field === 'predecessors' ? 'from' : 'to', this.delimiter, 'name');
            },
            editor : {
                sorters : [
                    {
                        field : 'wbsCode'
                    }
                ]
            },

    width : 112
},

It gives an error as 'DependencyField is not defined'. Can you help me on this.
Also can you let me know how can I locate the DependencyField.js on the Bryntum examples


Post by tasnim »

Hi,

You need to import DependencyField

import { DependencyField } from '../../build/gantt.module.js?467719';

Post by sprabhu »

Hi Tasnim,
The import of dependencyField resolved the above issue.
But I am not able to follow along the listItemTpl part to implement the

Also, the list shows the value as Task Name(WBS level) sorted alphabetically. Can we change that to show some other columns e.g. Column A (Column B) and can we sort the list based on WBS level instead.
consider column A is Name and column B as start date

Can you please help as where and how we can implement this


Post by alex.l »

Hi sure,

What exactly is not clear to you?

All the best,
Alex


Post Reply