Open add dialog from context menu add

[Sean]

Hi team, 

We are trying to get the gantt control to:

1. Show the add dialog when the user right-clicks the context menu and selects Add. We have attempted this via  the actionBegin function along with the code this.$refs.gantt.ej2Instances.editModule.dialogModule.openAddDialog(); but it is not working.
2. When we do get this add dialog working, how can we hide the ID label and textbox or re-arrange the HTML inputs of the add dialog.

Attachment: addDialog_7cca3d37.7z

[Monisha Sivanthilingam]

Hi Samantha, 

  

Thank you for contacting Syncfusion support. 

  

We have analysed your query and have prepared a sample according to your requirements. Please find the responses to your queries below. 

  

Sl. No.	Query	Syncfusion Comments
1	Show the add dialog when the user right-clicks the context menu and selects Add	We have achieved this requirement by the use of the contextMenuClick event and opened the add dialog when the item clicked is Add. The following code snippets demonstrate the solution.     contextMenuClick: function (args) {          if (args.item.properties.text == "Add") {            count++;            this.openAddDialog();          }        },        contextMenuOpen: function (args) {          if (count != 0) {            args.cancel = true;          }        },
2	how can we hide the ID label and textbox or re-arrange the HTML inputs of the add dialog.	We can limit the fields to be displayed in each tab or rearrange them using the editDialogFields or addDialogFields property. The following code snippets demonstrate the solution.     addDialogFields: [          {            type: "General",            headerText: "General",            fields: ["TaskName", "StartDate", "Duration", "Progress"],          },          { type: "Dependency" },          { type: "Resources" },          { type: "Notes" },        ],        editDialogFields: [          {            type: "General",            headerText: "General",            fields: ["TaskName", "StartDate", "Duration", "Progress"],          },          { type: "Dependency" },          { type: "Resources" },          { type: "Notes" },        ]

  

Please contact us if you require any further assistance. 

  

Regards, 

Monisha. 

[Sean]

Thanks for that Monisha.

1) Is there a way to add validations to the fields we add into the General Tab?

2) Now I can open the dialog when clicking on Child, Below and Above. The question now is how can I position the new task as such when I hit the save button in the dialog?

3) Is there a way to hide any of the sub options (Above, Child, Child, Milestone) for specific tasks when hovering the Add option?

4) The same question as above but with Outdent and Indent.

Thanks

[Sean]

Thanks for that Monisha.

1) Is there a way to add validations to the fields we add into the General Tab?

2) Now I can open the dialog when clicking on Child, Below and Above. The question now is how can I position the new task as such when I hit the save button in the dialog?

3) Is there a way to hide any of the sub options (Above, Child, Child, Milestone) for specific tasks when hovering the Add option?

4) The same question as above but with Outdent and Indent.

Thanks

Hi Monisha,

Is there any update regarding the four points I asked before?

Many Thanks

[Gopinath Muniraj]

Hi Samantha, 

We have analyzed your query. Please find the below responses. 

 

S. No	Query	Syncfusion comments
1.	Is there a way to add validations to the fields we add into the General Tab?	Currently, we have validation support in cell editing alone. We can achieve this using validationRules of columns property. Please find the below code example.  columns: [              { field: "TaskID", width: "150" },              {                field: "TaskName",                width: "250",                validationRules: { required: true, minLength: 3 },              },  ],  Please get the sample from below link.  Sample: https://codesandbox.io/s/vue-template-forked-qsmj8?file=/src/App.vue   Please confirm us is this your requirement. If yes, we have logged feature for validation in dialog. The status can be tracked from below feedback link.   https://www.syncfusion.com/feedback/15480/provide-support-for-custom-validation-in-add-edit-dialog    As we have already lined up some major features, we could not start its implementation immediately. Please cast your vote to make it count. We will prioritize the features for every release based on demands.
2.	Is there a way to hide any of the sub options (Above, Child, Child, Milestone) for specific tasks when hovering the Add option?	Do you want to hide that submenu (above, below, child, etc.,) and open the dialog alone? If yes, we can do that some workaround solution using contextMenuOpen and contextMenuClick event. Please refer the below code snippet,  contextMenuClick: function (args) {              if (args.item.properties.text == "Add") {                this.openAddDialog(); // Opening add dialog              }  },  contextMenuOpen: function (args) {              if (args.parentItem && args.parentItem.properties.text == "Add") {                args.cancel = true; // Restricting opening submenu              }  },
3.	Now I can open the dialog when clicking on Child, Below and Above. The question now is how can I position the new task as such when I hit the save button in the dialog?	By using the query 2 (above query), we can hide the sub menu and open the add dialog and we can set the set the position of the newly adding records by setting newRowPosition in the editSettings based on our requirement. Please refer the below code snippet,  editSettings: {              allowAdding: true,              allowEditing: true,              allowDeleting: true,              newRowPosition: "Child",  },
4.	The same question as above but with Outdent and Indent.	Do you want to hide the indent and outdent items in the context menu? If yes, we can hide that items using the contextMenuOpen event. Please refer the below code snippet,  contextMenuOpen: function (args) {              args.hideItems.push("Indent");              args.hideItems.push("Outdent");  }

 

Please have prepared a sample for query 2, 3 and 4. Please get the sample from below link. 

Sample: https://codesandbox.io/s/vue-template-forked-0l5to?file=/src/App.vue:1293-1562  

Please let us know if you need any further assistance on this. 

Regards, 

Gopinath M 

[Sean]

Hi,

Thanks for your response. I have a few more:

You can check this sandbox  CodePEN

1) I have added: 

args.hideItems.push("Child");

args.hideItems.push("Above");

Because I want to hide them, but when you right click on the third option the submenu doesnt come up. 

2) I want to get the Cancel event (you can check in actionComplete) It works fine the way I did it but I wonder if there is a better solution since even if I cancel, the item gets inserted into the gantt chart.

3) Is there a way to validate fields in the general tab with a callback? e.g validationRules: function(x => { ... }) 

4) And is there a way to grey out a field in validatonRules ?

Thanks

[Gopinath Muniraj]

Hi Samantha, 

Please find the below responses. 

S. No	Query	Syncfusion comments
	But when you right click on the third option the submenu doesn’t come up	Please let us know is this solution working for you? Else are you facing any error on this or do you need to make any customization on this?  Please share is the above details to assist you better.
	I want to get the Cancel event (you can check in actionComplete) It works fine the way I did it but I wonder if there is a better solution since even if I cancel, the item gets inserted into the gantt chart.	We can restrict the adding of new records using actionBegin event, with the requestType “beforeAdd”. Please refer the below code snippet,  actionBegin: function (args) {              if (args.requestType == "beforeAdd") {                args.cancel = true;              }  },  We have prepared a sample for your reference. Please get the sample from below link.  Sample: https://codesandbox.io/s/vue-template-forked-njw42?file=/src/App.vue
	Is there a way to validate fields in the general tab with a callback?	Currently, we have validation support in cell editing alone. We can achieve this using validationRules of columns property. Please find the below code example.   columns: [               { field: "TaskID", width: "150" },               {                 field: "TaskName",                 width: "250",                 validationRules: { required: true, minLength: 3 },               },   ],       Please get the sample from below link.   Sample: https://codesandbox.io/s/vue-template-forked-qsmj8?file=/src/App.vue      Please confirm us is this your requirement. If yes, we have logged feature for validation in dialog. The status can be tracked from below feedback link.    https://www.syncfusion.com/feedback/15480/provide-support-for-custom-validation-in-add-edit-dialog      As we have already lined up some major features, we could not start its implementation immediately. Please cast your vote to make it count. We will prioritize the features for every release based on demands.

 

Please contact us if you need any further assistance on this. 

Regards, 

Gopinath M 

[Sean]

Hi,

If you check at my codepen CodePEN when you right click on "Market research" milestone the submenu doesnt show up. It look like this is a bug when trying to hide some options in the submenu. E.G  

 args.hideItems.push("Child");

 args.hideItems.push("Above");

If you take those lines off the right click on "Market research" will work. Can you please confirm with me if this is a bug or how can I hide those options 'Child' and 'Above' and keep the right click to work as expected? 

Thanks

[Sean]

Hi

As you mention the the point 2 above, to avoid the task getting added into the gantt chart when clicking on cancel. 

actionBegin: function (args) { 

            if (args.requestType == "beforeAdd") { 

              args.cancel = true; 

            } 

}, 

When I do that the  the cancel button works fine but the save button does not trigger any event. Is it a bug in the dialog?

Sample: https://codesandbox.io/s/vue-template-forked-njw42?file=/src/App.vue  

Thanks

[Monisha Sivanthilingam]

Hi Samantha, 

 

Please find the response for your queries. 

 

Sl. No.	Query	Syncfusion Comments
1	Can you please confirm with me if this is a bug or how can I hide those options 'Child' and 'Above' and keep the right click to work as expected?	We were able to reproduce the reported issue and have considered this as an issue from our side. We have already logged a bug report for this. You can track its status from the below feedback link.    Feedback: https://www.syncfusion.com/feedback/21850/console-error-arises-when-hiding-items-in-context-menu    The fix will be provided in the patch release scheduled for 9th February, 2021.    We appreciate your patience until then.
2	When I do that the cancel button works fine but the save button does not trigger any event. Is it a bug in the dialog?	We were unable to reproduce the issue in the sample you provided. The actionBegin event was triggered when hit save and according to the customization you have provided the changes we made to the edited record were not saved.

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[Sean]

Hi,

1 - At the end I  made the cancel button and save button to work by adding this piece of code:

 actionBegin: function (args) { 

                if (args.requestType == "beforeAdd" && addDialogCountTracker  === 0) { 

                    args.cancel = true;

                } 

            }

2 - On the other hand I was trying to follow the sample for context menu in here https://ej2.syncfusion.com/vue/documentation/gantt/context-menu/#custom-context-menu-items 

But it throws an error message saying classList not defined. Can you please share a sandbox to use so we can check it out?

Thanks

https://ej2.syncfusion.com/vue/documentation/gantt/context-menu/#custom-context-menu-items

[Gopinath Muniraj]

Hi Samantha, 

Please find the below responses. 

S. No	Queries	Syncfusion comments
	I made the cancel button and save button to work by adding this piece of code	Thanks for the update. Please contact us if you are facing any issue on this.
	Can you please share a sandbox to use so we can check it out?	As per your requirement, we have prepared a sample for contextMenuItems, where we can add our custom items in the context menu, and we can utilize it based on our requirement. Please get the sample from below link.  Sample: https://codesandbox.io/s/vue-template-forked-867lb?file=/src/App.vue   Please contact us if you are facing any issue on this.

Thanks, 

Gopinath M 

[Sean]

Hi, this is the error I see when I try to make the context menu to work. Basically when I right click on the menu nothing opens adn instead I get this console error

I'm using the same version of gantt chart as the one you used in the sandbox "18.2.54" I also used the newest version "18.4.39".

The problem comes up when you add this lines for instance:

Check out this sanbox: https://codesandbox.io/s/vue-template-forked-0bwzz?file=/src/App.vue

Please fix this as soon as possible.

Thanks. :)

[Monisha Sivanthilingam]

Hi Samantha, 

 

As we promised earlier, we will include the fix in our upcoming patch release which is planned on 9^th February, 2021. You can track the status from the below feedback link. 

 

Feedback: https://www.syncfusion.com/feedback/21850/console-error-arises-when-hiding-items-in-context-menu 

 

We appreciate your patience until then. 

 

Regards, 

Monisha. 

[Sean]

Hi,

Was this bug fixed? What version should use?

Thanks

[Gopinath Muniraj]

Hi Samantha, 

We are extremely sorry for the delay.  

We have fixed this issue from our side. Due to some technical issues, the changes could not move to this week patch release.  

Unfortunately, we can release our updated version next week only. Surely this issue will be resolved in our upcoming patch release scheduled on 17^th February 2021.  

Thanks for your patience until then.  

Regards,  

Gopinath M  

[Sean]

Hi,

Was this fix updated today 17th Feb?

Thanks

[Gopinath Muniraj]

Hi Samantha, 

Thanks for your patience. 

The issue reported in feedback 21850 has been fixed in version v18.4.43. Please find the release notes from the below link.   

Release Notes: https://ej2.syncfusion.com/vue/documentation/release-notes/18.4.43/?type=all#gantt   

You can use the code snippet like below to hide the child context menu items. Please refer the below code snippet, 

contextMenuOpen: function (args) { 

            args.hideItems.push("Indent"); 

            args.hideItems.push("Outdent"); 

            if (args.parentItem && args.parentItem.properties.text == "Add") {           

              args.hideChildItems = ["Child", "Above"]; 

            } 

}, 

We have also prepared a sample demonstrating the fix. Please get the sample from below link. 

Sample: https://codesandbox.io/s/vue-template-forked-0hvhd?file=/src/App.vue  

Please contact us if you need any further assistance on this. 

Thanks, 

Gopinath M