Premium support for our pure JavaScript UI components


Post by sprabhu »

The part which is not clear is: how can we use listItemTpl and achieve the below change:
When we click on the predecessor dropdown the list of value currently shows Name(WBS order), can we change this to show start date(Name)

Attachments
predecessor lov
predecessor lov
predecessor list of value.png (39.86 KiB) Viewed 196 times

Post by sprabhu »

How can we override the DependencyField by using listItemTpl.
Can you please help us with some example.
If we want the Predecessor dropdown value to have startDate (name) who can we achieve this?


Post by alex.l »

Hi, here is an example

    columns : [
        // ...
        {
            type  : 'predecessor',
            width : 112,
            editor : {
                listItemTpl(task) {
                    const
                        taskName              = StringHelper.encodeHtml(task.name),
                        taskStartDate          = DateHelper.format(task.startDate, 'YYYY-MM-DD'),
                        { dependencyIdField } = this.owner;

                return `<div class="b-predecessor-item-text">${taskStartDate} (${taskName})</div>
                    <div class="b-sch-box b-from" data-side="from"></div>
                    <div class="b-sch-box b-to" data-side="to"></div>`;
            }
        }
    },

All the best,
Alex


Post by sprabhu »

Hi Alex,
If I use the above code on the 'Advance demo', and click on the predecessor field, I get the pop-up on the top left corner with the empty list.


Post by marcio »

Hey sprabhu,

Have you added the import to the StringHelper?? If you add it, you'll get it working correctly.

Attachments
Screenshot 2023-06-13 at 13.30.20.png
Screenshot 2023-06-13 at 13.30.20.png (52.27 KiB) Viewed 157 times
Bryntum Gantt - Advanced demo - 13 June 2023.mp4
(193.24 KiB) Downloaded 30 times

Best regards,
Márcio


Post by sprabhu »

its working now. Thanks


Post by sprabhu »

Hi Alex/Márcio,
With the steps you mentioned the dropdown value has Start Date (Task Name), but after the selection we get the WBS level. How can we display the Start Date (Task Name) instead of wbs after selection.


Post by tasnim »

Hi,

You could achieve it using a renderer method on the column

            renderer({ record }) {
                if (record.predecessors.length > 0) {
                    const result = record.predecessors.map(dependency => DateHelper.format(dependency.toTask.startDate, 'YYYY-MM-DD'))
                    return result.join(';')
                }
            }
Attachments
Screenshot 2023-08-15 111521.png
Screenshot 2023-08-15 111521.png (50.44 KiB) Viewed 109 times

Post by sprabhu »

Thanks for the quick reply.
Is there a way to eliminate some task from the predecessor dropdown. eg On Advance example can we eliminate/exclude the task 'Install Apache' from showing up in the predecessor dropdown.


Post by alex.l »

Hi,

We will be glad to help you, but please follow our forum rule: one thread - one question and create a new thread for this question.
Thank you!

All the best,
Alex


Post Reply