1. Home
  2. Forum
  3. Angular - EJ 2
  4. How to check if save is Clicked in Add Dialog

How to check if save is Clicked in Add Dialog

I'm using syncfusion gantt chart in my angular project, and I'm using it's default toolbar for adding the new task.

Now I want to call API on the click of save button on Dialog (and want that modal data as well).

So How should I achieve that in Angular.


 <div class="col-sm-12">
    <ejs-gantt id="ganttDefault" height="550px" [labelSettings]="labelSettings"  [allowFiltering]='true' [allowSorting]= 'true' [dataSource]="schedulelist" [taskFields]="taskSettings"  [timelineSettings]="timelineSettings" [editSettings]="editSettings" [toolbar]="toolbar" (queryTaskbarInfo) = "queryTaskbarInfo($event)"></ejs-gantt>
  </div>

 

  ngOnInit(): void {
    this.getScheduleList(this.projectID);

    this.taskSettings = {
      id: 'activityCode',
      name: 'activityName',
      startDate: 'startDate',
      endDate: 'endDate',
      duration: 'duration',
      isCritical: 'isCritical',
    };

    this.labelSettings = {
      leftLabel: 'Task ID: ${taskData.activityCode}',
    }

    this.timelineSettings = {
      topTier: {
        format: 'MMM dd, yyyy',
        unit: 'Week',
      },
      bottomTier: {
        unit: 'Day',
      },
    };

    this.editSettings = {
      allowAdding: true,
      allowEditing: true,
      allowDeleting: true,
      allowTaskbarEditing: true,
      showDeleteConfirmDialog: true
    };

    this.toolbar = ['Add', 'Edit', 'Update', 'Delete', 'Cancel', 'ExpandAll', 'CollapseAll', 'Search'];
  }


this is my Code for chart.

3 Replies 1 reply marked as answer
MS Monisha Sivanthilingam Syncfusion Team July 22, 2021 10:53 AM UTC

Hi Nayan, 
 
Greetings from Syncfusion support. 
 
We can achieve your requirement by making use of the toolbarClick event and the add requestType in the actionComplete event. We can also get the data of the newly added record in the newTaskData property of the actionComplete event. The following code snippets demonstrate the solution. 
 
App.component.html 
 
<ejs-gantt id="ganttDefault" height="430px" [dataSource]="data" [taskFields]="taskSettings" [columns]="columns" 
        [labelSettings]="labelSettings" [treeColumnIndex]="1" height="450px" [allowSelection]="true" 
        dateFormat="MMM dd, y" [projectStartDate]="projectStartDate" [projectEndDate]="projectEndDate" 
        [highlightWeekends]="true" [editSettings]="editSettings" [toolbar]="toolbar" 
        [splitterSettings]="splitterSettings" (actionComplete)="actionComplete($event)" (toolbarClick)="toolbarClick($event)"> 
</ejs-gantt> 
 
 
App.component.ts 
 
public toolbarClick(args: any) { 
  if (args.item.text == 'Add') { 
      this.dialog = true; 
  } 
} 
public actionComplete(args: any) { 
  if (args.requestType == 'add' && this.dialog) { 
    alert('Save button clicked'); 
    console.log(args.newTaskData); 
    this.dialog = false; 
  } 
} 
 
 
We have also prepared a sample for your reference. 
 
Please contact us if you require any further assistance. 
 
Regards, 
Monisha. 


Marked as answer
NM NAYAN MIYATRA July 28, 2021 09:59 AM UTC

Thanks "Monisha Sivanthilingam" for your support, I got my answer.


MS Monisha Sivanthilingam Syncfusion Team July 29, 2021 04:07 AM UTC

Hi Nayan, 
 
You are welcome. 
 
Please contact us if you require any further assistance. 
 
Regards, 
Monisha. 


Loader.
Up arrow icon