Implementing Date Validation in Gantt Chart: Ensuring 'startDate' is Earlier than 'endDate'

Question

Hello Syncfusion Community,I am currently working on a project using Syncfusion components and I am finding them very useful. However, I have run into a bit of a challenge and I am hoping someone here can assist.In my project, I have a form with two date fields, 'startDate' and 'endDate'. For the purpose of my application, the 'startDate' must always be earlier than the 'endDate'. I am looking for a way to add validation to these fields to ensure this condition is always met.Can anyone guide me on how I could implement this validation? Are there built-in features in Syncfusion that can assist with this or should I look into custom validation methods? If the latter, could you provide me with some guidelines or examples?Any help would be greatly appreciated.Thank you in advance!

Udhayakumar Anand · Answer

Hi Krzysztof WolskiGreetings from SyncfusionAfter carefully reviewing your message, we have identified a
solution that can help you achieve your requirements. By utilizing the validationRules
of the grid, you can set up validation for the specific column that you wish to
validate. In the created
event, you can obtain the instance of the Gantt chart and define the validation
rule accordingly.To assist you further, we have attached a code snippet and a
sample link that demonstrate the implementation of this approach. This will
enable you to ensure that the 'startDate' is always earlier than the 'endDate'
within your application.

Code
  Snippet:
   /*app.component.ts*/
  customFn(args) {
      return Date.parse(args['value']) < Date.parse(document.querySelectorAll('.e-selectionbackground')[args.element.parentElement.parentElement.parentElement.ariaColIndex]['innerText']);
    };
    created(args) {
      var gantt = document.getElementsByClassName('e-gantt')[0]['ej2_instances'][0];
      gantt.treeGrid.grid.columns[2].validationRules = {
        required: true,
        minLength: [this.customFn, 'Enter lesser dates'],
      };
    }

Sample Link : https://stackblitz.com/edit/angular-f3vj2y?file=src%2Fapp.component.html,src%2Fapp.component.tsIf you have any additional questions or require further
assistance, please don't hesitate to reach out to us.Regards,Udhayakumar

Krzysztof Wolski · Answer

Thank you for your response. Unfortunately, the solution you proposed doesn't seem to work for me. Here are the relevant parts of my code:

```javascript

this.columns = [
  { field: 'Id', isPrimaryKey: true, visible: false },
  {
    field: 'OrganizationalUnitId',
    editType: 'dropdownedit',
    edit: this.organizationalUnitsParams,
  },
  { field: 'StartDate' },
  { field: 'EndDate' },
  { field: 'OrganizationalUnitName', allowEditing: false },
  {
    field: 'ResourceId',
    visible: false,
    edit: { params: { value: this.employeeId } },
  },
];


customFn(args:any) {
  return Date.parse(args['value']) < Date.parse((document.querySelectorAll('.e-selectionbackground')[args.element.parentElement.parentElement.parentElement.ariaColIndex] as HTMLElement).innerText);
};


created(args:any) {
  var gantt = (document.getElementsByClassName('e-gantt') as any)[0]['ej2_instances'][0];
  gantt.treeGrid.grid.columns[2].validationRules = {
    required: true,
    minLength: [this.customFn, 'Enter lesser dates'],
  };
}


public taskSettings = {
  id: 'Id',
  name: 'OrganizationalUnitId',
  startDate: 'StartDate',
  endDate: 'EndDate',
  resourceId: 'ResourceId',
  organizationalUnitName: "OrganizationalUnitName"
};

```

When I run this code, I get the following error in the console:

```

core.mjs:10162  ERROR TypeError: Cannot set properties of undefined (setting 'validationRules')
    at HumanResourcesOuComponent.created (human-resources-ou.component.ts:156:51)
    at HumanResourcesOuComponent_Template_ejs_gantt_created_0_listener (human-resources-ou.component.html:16:14)
    at executeListenerWithErrorHandling (core.mjs:15700:16)
    at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (core.mjs:15733:22)
    at ConsumerObserver.next (Subscriber.js:91:33)
    at SafeSubscriber._next (Subscriber.js:60:26)
    at SafeSubscriber.next (Subscriber.js:31:18)
    at Subject.js:34:30
    at errorContext (errorContext.js:19:9)
    at EventEmitter_.next (Subject.js:27:21)

```

From what I can tell, `gantt.treeGrid.grid` is not undefined, but `gantt.treeGrid.grid.columns` is. I'm not sure why this is the case. Any further guidance would be greatly appreciated.

Udhayakumar Anand · Answer

Krzysztof WolskiWe have reviewed your query, but we are unable to replicate the issue
that you’ve reported, could you please provide us with the following details
for us to validate further
 Video demonstration of
     the issue
 Make sure that you’ve
     taken the instance correctly
 DataSource that you’ve
     been using
 Could you modify the
     given sample and replicate the issue which will be helpful for us to
     validate further 
 Anyother customization
     that you use to render the gantt
Sample Link: https://stackblitz.com/edit/angular-f3vj2y-8jcvfn?file=src%2Fapp.component.html,src%2Fapp.component.tsWith these additional details, we will be able to
investigate the problem more effectively and provide you with an accurate
solution.Regards,Udhayakumar