Restrict new task falls between start and end date of the project

[Praveen Kumar Padma]

Hi there, is there a feature or validation while adding a new task to stay in between a date range ? for example I have project start date as 1st May 21 and end date as 30th May 21, I want to add a new task that should fall between the start and end date, is there a validation for date controls I can add in the 'New Task Dialog' ? 

[Pooja Priya Krishna Moorthy]

Hi Praveen, 

Thanks for contacting Syncfusion support. 

Yes, we validate internally while adding new tasks. 

By default, we set the minimum start date of a record while adding new task and duration as one by default. 

We can also modify these dates using add dialog of Gantt control. 

Please get back to us if you need more information on this. 

Regards, 

Pooja K. 

[Praveen Kumar Padma]

Hi Pooja, 

Thank you for getting back on this, is there a way to only enable only selected project dates(startDate to endDate) ? so that user knows task needs to be added between those dates, could you please provide more information on this or if you can direct me in correct direction that will be great?

[Monisha Sivanthilingam]

Hi Praveen, 

 

We can achieve your query by making use of the openAddDialog requestType in the actionComplete event. By setting the min and max values for the startDate and endDate fields, we can restrict the range of dates available according to your requirements. 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" [resourceFields] = "resourceFields"  

        [resources]="resources" (actionComplete)="actionComplete($event)"> 

    </ejs-gantt> 

 

 

App.component.ts 

 

public actionComplete(args: any){ 

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

    var startDate = (document.getElementById("ganttDefaultStartDate") as any).ej2_instances[0]; 

    startDate.min = new Date(this.projectStartDate); 

    startDate.max = new Date(this.projectEndDate); 

    var endDate = (document.getElementById("ganttDefaultEndDate") as any).ej2_instances[0]; 

    endDate.min = new Date(this.projectStartDate); 

    endDate.max = new Date(this.projectEndDate); 

  } 

} 

 

 

We have prepared a sample for your reference. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[Praveen Kumar Padma]

Monisha, 

thank you for the reply, code and sample, it works like charm!