Rename and hide fields

[Prasanth]

Hi,

Is there a way to rename and hide the fields on the add/edit dialogue as well as the TreeGrid view we see on the left side of Gantt control.

Regards

Prasanth

[Mahalakshmi Karthikeyan]

Hi Prasanthan,

Thanks for contacting Syncfusion support.

Query1: Is there a way hide the fields on the add/edit dialogue

Solution: We can hide or specify the required field alone to display in add or edit dialog with the help of “AddDialogFields” and “EditDialogFields”. Please refer the below code example below,

@(Html.EJ().Gantt("Gantt").

//…

.AddDialogFields(add =>

       {

           add.Field("Id").Add();

           add.Field("Name").Add();

           add.Field("StartDate").Add();

       }).EditDialogFields(

               edit => {

                   edit.Field("Id").Add();

                   edit.Field("Name").Add();

                   edit.Field("StartDate").Add();

               }

       ).

)

Query2: Is there a way to rename the fields on the add/edit dialogue

Solution: We can rename the Tree Grid field name as well as edit or add form text names with common names by setting Locale to the Gantt. Please refer the below code example for details.

@(Html.EJ().Gantt("Gantt").

//…

  .Locale("en-US").

)

<script type="text/javascript">

        ej.Gantt.localization["en-US"] = {

            newTaskTexts: {

                newTaskName: "New Task"

            },

            //headerText to be displayed in gridtree

            columnHeaderTexts: {

                taskId: "Task ID",

                taskName: "TaskName",

                startDate: "StartDate",

                endDate: "EndDate",

            },

            columnMenuTexts: {

                columnsText: "Columns"

            },

            //string to display in dialog

            editDialogTexts: {

                addFormTitle: "Add Form",

                editFormTitle: "Edit Form",

                saveButton: "Save",

                cancelButton: "Cancel"

            },

        }

    </script>

Query3: To hide TreeGrid Columns

Solution: we can hide the columns in 2 ways, if you want to hide the columns at load time you can set the specified column visibility as false in load event. Please refer the below code example for details.

@(Html.EJ().Gantt("Gantt")

//…

  ClientSideEvents(cl =>

       {

           cl.Load("load");

          

       })

)

<script type="text/javascript">

        function load(args) {

            var col = this.getColumns();

            col[0].visible = false;

        }

//…

</script>

Here we have hided the Task Id field at load time.

We can also hide the columns dynamically using “ShowColumnChooser” property. Once enabled this API we will get column Chooser option for every visible Gantt columns. Through which we can hide and show the desired columns. Please refer the below code example for details.

@(Html.EJ().Gantt("Gantt")

//…

.ShowColumnChooser(true)

)

We have also prepared a sample based on this and you can find the sample under the following location.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/ColumnText372070020

Regards,

Mahalakshmi K.

[Prasanth]

Hi Mahalakshmi,

Thanks for your reply and source code.  Thanks for getting back to us during this busy holiday times and your reply is highly appreciated.  I have few comments/queries regarding the solution.

I have attached the screenshots and code snippets as a zip file.

Query 1

For some reason only ID, Name, StartDate and Duration fields are showing in the dialog box.  I am assuming that we have to add all the default fields that we want plus any new fields that we want.  I want to add a "Notes" text field below Predecessor grid within the dialog box which can occupy the two columns like Predecessor grid.  I have modified the AddDialogFields section to something like below.  I have also attached the screen shot of the dialog in the zip file (ModifedAddFields-TaskDialog.png) 

.AddDialogFields(add =>

        {

            add.Field("TaskID").Add();

            add.Field("TaskName").Add();

            add.Field("StartDate").Add();

            add.Field("Duration").Add();

            add.Field("ResourceInfo").Add();

            add.Field("Status");

            add.Field("Predecessor");

Query 2

Thanks for the details I was able to change the text of most of the fields, but as you can see on the screenshot (file: ModifedTaskDialog.png) under Predecessor section (now named Linked Tasks) the "Add New" and "Remove" buttons are now renamed to "undefined" just need help with renaming them. 

Code snippet is as below

ej.Gantt.localization["en-US"] = {

        newTaskTexts: {

            newTaskName: "New Task"

        },

        //headerText to be displayed in gridtree

        columnHeaderTexts: {

            taskId: "ID",

            taskName: "Task Title",

            startDate: "Start Date",

            resourceInfo: "Assigned To",

            endDate: "EndDate",

            duration: "Duration (days)",

            status: "Progress (%)",

            predecessor: "Linked Tasks",

            type: "Link Type",

            offset: "Offset (days)"

        },

        columnMenuTexts: {

            columnsText: "Columns"

        },

        //string to display in dialog

        editDialogTexts: {

            addFormTitle: "Add Task",

            editFormTitle: "Edit Task",

            saveButton: "Save",

            cancelButton: "Cancel",

            deleteButton: "Delete"

        },

    }

Query 3: Fantastic!, thanks for the both options.

Something I have noticed is that with predecessor functionality for example if I have two tasks linked by type of finish to start, if I set the offset to x days then the second task's start date is updated to match the offset days (end date of first task + offset days), now if I reset the Start day of the second task reverse is not true in fact I don't think the update works at all - not sure whether we have to implement something on our side or it is a design or simply a bug)

Thanks again for helping out. Wishing you a very happy New Year.

Regards

Prasanth

Attachment: GanttScreenshot_a94eda2e.zip

[Prasanth]

Hi Mahalakshmi,

Thanks for your reply and source code.  Thanks for getting back to us during this busy holiday times and your reply is highly appreciated.  I have few comments/queries regarding the solution.

I have attached the screenshots and code snippets as a zip file.

Query 1

For some reason only ID, Name, StartDate and Duration fields are showing in the dialog box.  I am assuming that we have to add all the default fields that we want plus any new fields that we want.  I want to add a "Notes" text field below Predecessor grid within the dialog box which can occupy the two columns like Predecessor grid.  I have modified the AddDialogFields section to something like below.  I have also attached the screen shot of the dialog in the zip file (ModifedAddFields-TaskDialog.png) 

.AddDialogFields(add =>

        {

            add.Field("TaskID").Add();

            add.Field("TaskName").Add();

            add.Field("StartDate").Add();

            add.Field("Duration").Add();

            add.Field("ResourceInfo").Add();

            add.Field("Status");

            add.Field("Predecessor");

Query 2

Thanks for the details I was able to change the text of most of the fields, but as you can see on the screenshot (file: ModifedTaskDialog.png) under Predecessor section (now named Linked Tasks) the "Add New" and "Remove" buttons are now renamed to "undefined" just need help with renaming them. 

Code snippet is as below

ej.Gantt.localization["en-US"] = {

        newTaskTexts: {

            newTaskName: "New Task"

        },

        //headerText to be displayed in gridtree

        columnHeaderTexts: {

            taskId: "ID",

            taskName: "Task Title",

            startDate: "Start Date",

            resourceInfo: "Assigned To",

            endDate: "EndDate",

            duration: "Duration (days)",

            status: "Progress (%)",

            predecessor: "Linked Tasks",

            type: "Link Type",

            offset: "Offset (days)"

        },

        columnMenuTexts: {

            columnsText: "Columns"

        },

        //string to display in dialog

        editDialogTexts: {

            addFormTitle: "Add Task",

            editFormTitle: "Edit Task",

            saveButton: "Save",

            cancelButton: "Cancel",

            deleteButton: "Delete"

        },

    }

Query 3: Fantastic!, thanks for the both options.

Something I have noticed is that with predecessor functionality for example if I have two tasks linked by type of finish to start, if I set the offset to x days then the second task's start date is updated to match the offset days (end date of first task + offset days), now if I reset the Start day of the second task reverse is not true in fact I don't think the update works at all - not sure whether we have to implement something on our side or it is a design or simply a bug)

Thanks again for helping out. Wishing you a very happy New Year.

Regards

Prasanth

Attachment: GanttScreenshot_a94eda2e.zip

Hi Mahalakshmi,

Following my previous post regarding Query 2, I also seems to have lost the text/icons on the context menu for Gantt chart.  I assume this is due to missing javascript.  I have attached the screen shot.

Regards

Prasanth

Attachment: ContextMenuTextLost_53400bad.zip

[Mahalakshmi Karthikeyan]

Hi Prasanthan,

Thanks for the update.

Please find the response below,

Query 1: For some reason only ID, Name, StartDate and Duration fields are showing in the dialog box.  I am assuming that we have to add all the default fields that we want plus any new fields that we want.  I want to add a "Notes" text field below Predecessor grid within the dialog box which can occupy the two columns like Predecessor grid.  I have modified the AddDialogFields section to something like below.  I have also attached the screen shot of the dialog in the zip file (ModifedAddFields-TaskDialog.png) 

Solution; Yes we need to specify all the necessary fields to be displayed in the add / edit dialog in the “AddDialogFields” property. And At present there is no support to customize the add/ edit dialog in Gantt control. Hence have already logged a feature report regarding this. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

But we can include the external field in the dialog by including the external column into Gantt with the help of “Load” client side event. Please refer the below code example for details.

@(Html.EJ().Gantt("Gantt").

//…

  ClientSideEvents(eve=>{

          eve.Load("load");

      }).

)

<script type="text/javascript">              

function load(args) {

            var col = this.getColumns();

            col[0].visible = false;

            var columnData = {

                field: "Notes",

                mappingName: "Notes"

            }

            col.splice(7, 0, columnData);

        }

</script>

If you do not wish to show this field in TreeGrid part then you can set the visible as false at the time of creation.

Query 2

Thanks for the details I was able to change the text of most of the fields, but as you can see on the screenshot (file: ModifedTaskDialog.png) under Predecessor section (now named Linked Tasks) the "Add New" and "Remove" buttons are now renamed to "undefined" just need help with renaming them. 

Solution: we need to set the localized text to those names. Please refer the below code example for details.

ej.Gantt.localization["en-US"] = {

           editDialogTexts: {

                addFormTitle: "Add Form",

                editFormTitle: "Edit Form",

               saveButton: "Save",

                deleteButton: "Delete",

                cancelButton: "Cancel",

                addPredecessor: "Add New",

                removePredecessor: "Remove"

            },

//…

please refer the UG documentation for localization support below:

UG Documentation

Query 3: Fantastic!, thanks for the both options.

Something I have noticed is that with predecessor functionality for example if I have two tasks linked by type of finish to start, if I set the offset to x days then the second task's start date is updated to match the offset days (end date of first task + offset days), now if I reset the Start day of the second task reverse is not true in fact I don't think the update works at all - not sure whether we have to implement something on our side or it is a design or simply a bug)

Solution: We can also able to reproduce the issue while changing the start date the offset not get auto validated. We have also logged an issue report regarding this. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=/support/directtrac/incidents

But for now, Try with resetting both start date and the offset value of second task.

Query4: Following my previous post regarding Query 2, I also seems to have lost the text/icons on the context menu for Gantt chart.  I assume this is due to missing javascript.  I have attached the screen shot.

Solution: please refer the below code example to define the localization support for context menu from below:

ej.Gantt.localization["en-US"] = {

           contextMenuTexts: {

                taskDetailsText: "Task Details...",

                addNewTaskText: "Add New Task",

                indentText: "Indent",

                outdentText: "Outdent",

                deleteText: "Delete",

                aboveText: "Above",

                belowText: "Below"

            },

}

//…

We have also prepared a sample based on this and you can find the sample under the following location.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GanttSample1034794243

Regards,

Mahalakshmi K.

[Prasanth]

Hi Makalashmi,

Thanks for the reply.  For the javascript localization I could have looked into the link you have provided, sorry didn't know about it.

Thanks again for providing the solution.  Wishing you a Happy New Year

Regards

Prasanth

[Mahalakshmi Karthikeyan]

Hi Prasanthan,

Thanks for the update and Wish you happy New Year.

Please let us now if you need further assistance on this.

Regards,

Mahalakshmi K.