Stop event action on drag and task edit.Perform customized action on drag ,task edit .

[Sudhanshu Jain]

1.How can we stop taskbar duration update .Task duration should not be increase or decrease .???We want to only drag the task. 

2. How can we fire customized action on double click on task bar .which event we can use for that ????

3.How can we fire customized action on dependency mapping .which event we can use for that ????

4.How can we fire customized action on task drag  .which event we can use for that ????

5.Which event is fired when we click on the task bar only ????

[Pooja Priya Krishna Moorthy]

Hi Sudhanshu, 

 

Thanks for using our essential JS2 products. 

Please find the below response. 

No	Queries	Syncfusion Comments
1	How can we stop taskbar duration update. Task duration should not be increase or decrease .???We want to only drag the task.	By using taskbarediting event we can restrict the duration update on resizing. We can set args.cancel as true when taskbarEditAction is LeftResizing or RightResizing.  We can also hide taskbar resizing element by over-riding the CSS.  Please find the below code example.    <style>        .e-gantt-chart .e-taskbar-right-resizer.e-icon.e-right-resize-gripper,        .e-gantt-chart .e-taskbar-left-resizer.e-icon.e-left-resize-gripper        {          display: none;        }  </style>          export class Editing extends SampleBase {              //...              taskbarEditing(args) {                  if (args.taskBarEditAction == "LeftResizing" || args.taskBarEditAction == "RightResizing") {                      args.cancel = true                  }              }              render() {                  return (<div className='control-pane'>                   <GanttComponent id='Editing' dataSource={editingData}                              taskbarEditing={this.taskbarEditing.bind(this)}>                          //...                          </GanttComponent>                  </div>);              }          }
2	How can we fire customized action on double click on task bar .which event we can use for that ????	actionBegin event gets triggered on double click of a record. Using this event with requestType beforeOpenEditDialog we can perform some custom actions. Please find the code example below.      export class Editing extends SampleBase {              //...           actionBegin(args) {                if(args.requestType == "beforeOpenEditDialog") {                        //... custom action goes here                  }              }              render() {                  return (<div className='control-pane'>                      <GanttComponent id='Editing' dataSource={editingData}                              actionBegin ={this.actionBegin.bind(this)}>                          //...                          </GanttComponent>                  </div>);              }          }
3	How can we fire customized action on dependency mapping which event we can use for that?	While drawing connector lines, taskbarediting event gets triggered with taskbarEditAction ConnectorPointRightDrag, ConnectorPointLeftDrag. After connector lines are drawn actionComplete event gets triggered with requestType save.
4	How can we fire customized action on task drag. Which event we can use for that?	taskbarediting event gets triggered with different taskbarEditAction like ParentDrag, ChildDrag, MilestoneDrag while dragging parent task, child task, milestone task respectively.
5	Which event is fired when we click on the task bar only ????	Currently we don’t have any event for taskbarClick action. But we logged a feature request for this and you can track its status from below feedback link.  Link - https://www.syncfusion.com/feedback/8153/provide-support-for-taskbarclick-event-in-gantt  This feature will be implemented and included in any of our upcoming releases. Please cast your to make it count. We will prioritize the features for every release based on demands.    Currently we can achieve this by some work-around. We can manually bind the click event using javascript addEventListener method. Please find the code example below.      export class Editing extends SampleBase {              //...           dataBound(args) {            var taskbar = document.getElementsByClassName('e-taskbar-main-container');               for (var i=0;i<taskbar.length;i++){                  taskbar[i].addEventListener('click', function () {                      //...            });               }             }              render() {                  return (<div className='control-pane'>                          <GanttComponent id='Editing' dataSource={editingData}                              dataBound ={this.dataBound.bind(this)}>                          //...                          </GanttComponent>                   </div>);              }          }

 

Please find the below sample link.  

Link- https://stackblitz.com/edit/react-7ydmkf?file=index.js 

 

Regards, 

Pooja Priya K