Our state of the art Gantt chart


Post by kamran_mushtaq »

Hello,

How can we change Task fields in popup when we double click on task or Edit it through right click. Some fields are unrelatable for us, we some of our fields like Status, Task descriptions, risk status, type (task or milestone), in General tab of the popup.
Basically how to customize this Edit task popup, can you please let me know through a code example.

Thank you

Attachments
Screenshot 2022-10-06 PopUp TaskEdit.png
Screenshot 2022-10-06 PopUp TaskEdit.png (56.64 KiB) Viewed 356 times

Post by tasnim »

Hi,
Please check taskEdit docs : https://bryntum.com/docs/gantt/api/Gantt/feature/TaskEdit
And here is a guide on how to customize the task editor https://bryntum.com/docs/gantt/guide/Gantt/customization/taskedit


Post by kamran_mushtaq »

Great Tasnim,
Everything is working smoothly one thing that I don't get is I wan to and newCutomField of type Select not a textField or button, how to add it ? and how to display its options in it as well?


Post by tasnim »

Hi,
Did you mean something like this

Screenshot 2022-10-10 182521.png
Screenshot 2022-10-10 182521.png (52.74 KiB) Viewed 323 times

If you mean to use this combo
Then you need to check https://bryntum.com/docs/gantt/api/Core/widget/Combo

Here is a code example for you

    features : {
        taskEdit : {
            items : {
                generalTab : {
                    items : {
                        myCustomField : {
                            type : 'combo',
                            label : 'Select an item',
                            items : ['Fanta', 'Loranga', 'Jaffa', 'Zingo', 'Orangina'],
                        }
                    }
                }
            }
        }
    }

Post by kamran_mushtaq »

yes, Thank you so much Tasnim.
One more thing how to set width of this customField? I want 2 fields in a row which I'm adding (width 50%) and what is the type for text area box?


Post by tasnim »

Hi,
You can use the flex prop to achieve that
Please check the code sample below to achieve that

    features : {
        taskEdit : {
            items : {
                generalTab : {
                    items : {
                        duration : {
                            flex : '1 0 100%'
                        },
                        myCustomField : {
                            type : 'combo',
                            label : 'Select an item',
                            items : ['Fanta', 'Loranga', 'Jaffa', 'Zingo', 'Orangina'],
                            weight : 800,
                            width : '50%',
                            flex   : '1 0 50%'
                        },
                        newCustomField : {
                            type : 'combo',
                            label : 'another',
                            weight : 900,
                            width : '50%',
                            flex   : '1 0 50%'
                        }
                    }
                }
            }
        }
    }
Attachments
Screenshot 2022-10-11 145147.png
Screenshot 2022-10-11 145147.png (40.08 KiB) Viewed 309 times

Post by kamran_mushtaq »

Great Tasnim,

Can we give an id to the new custom fields ? And on the basis of these id's can we apply custom JS functions on it?
can you please let me know with the code example as you replied above.


Post by kamran_mushtaq »

One more thing can we have this popup when we add a new task not editing when we add new task it appears that it adds the new task row and to change it we have to dblclick it to edit as desired. Can we have this popup first time when we add task so that we create the task details at that time.


Post by marcio »

Hey kamran_mushtaq,

What do you mean by applying JS functions on it?? Like onFunctions listeners??

Besides that, you can open the editor anytime by using https://www.bryntum.com/docs/gantt/api/Gantt/feature/TaskEdit#function-editTask

Best regards,
Márcio


Post by kamran_mushtaq »

like can we give id to this new field so that after we can get the value by id

newCustomField : {
                            type : 'combo',
                            label : 'another',
                            weight : 900,
                            width : '50%',
                            flex   : '1 0 50%'
                        }

Post Reply