GroupIndex is different according to the hierarchy

Question

Hi,I have a scheduler with timeline grouping  like this :https://ej2.syncfusion.com/demos/?_ga=2.101044097.1084808763.1585553453-1478984002.1583226206#/material/schedule/timeline-resource-grouping.htmland external drag and drop.If I don't want to have multiple appointments on the same slot, I need to use "isSlotAvailable" function with items that i drag from external list ((nodeDragStop)="onTreeDragStop($event)") and with inner events already created ((actionBegin)="onActionBegin($event)").1) In both situation, I need groupIndex but results aren't the same :- in "onTreeDragStop", I can get the groupIndex  from a DragAndDropEventArgs object and it is equal to the row number.- in "onActionBegin", I get it  from this.ScheduleObj.eventBase.getGroupIndexFromEvent( )  with ActionEventArgs, and  groupIndex is equal to the row number of the parent Resource wich, i think, is not the regular behavior.2) When event is created, groupIndex is ok, but when item is dragged out of its original row groupIndex gets Parent Resource's number and the appointment object changes : ResourceId and GroupId switch type from number to number into an array.Can you please help me to understand this ?

Vengatesh Maniraj · Answer

Hi Anais,

 

Greetings from Syncfusion Support.

 

In both situation, I need
groupIndex but results aren't the same :

We have validated the both situations and we can get the same groupIndex.



 In onTreeDragStop, we can get the groupIndex by making
     use of event.target.getAttribute('data-group-index'). Here event as
     DragAndDropEventArgs. We need to convert this to integer type.
 In onActionBegin,  we can get groupINdex from this.ScheduleObj.eventBase.getGroupIndexFromEvent( ).


 

ResourceId and GroupId switch type
from number to number into an array

In the Scheduler, we have the
option that we can create the same event to multiple resources at a time by
making use of allowMultiple field within the resource property. For that
we have maintained the resource list in array format. 

 

We hope this may help to understand
the behavior of resource objects. For more reference please the below UG
documentation links

 

groupIndex API: https://ej2.syncfusion.com/angular/documentation/api/schedule/actionEventArgs/#groupindex

Resources: https://ej2.syncfusion.com/angular/documentation/schedule/resources/

 

Kindly check the above and get back to us if you would
require any further assistance.

 

Regards,

Vengatesh

Anais Miltenberger · Answer

Hello Vengatesh,Thank you for your answer, but I still can't get it to work.I may not have explained my problem in detail. My main goal is to be able to use the IsSlotAvailable function either by internal or external drag and drop or by creating an appointment.I think my concern comes from theIndexGroup. Here are more precisely the behaviors I have:When I drop an appointment from the external list (onTreeDragStop) I always have the right line number, so isSlotAvailable always returns a correct answer.When I click on an existing appointment in my eventObject.dataSource without changing the original line, onActionBegin returns the correct line number.When I move an existing appointment to another line, onActionBegin returns the number of the parent resource (even if I use this.ScheduleObj.eventBase.getGroupIndexFromEvent ), and it is impossible to go back to the resource number.When I create an appointment, onActionBegin returns the number of the parent resource.Here is my code:

Missions

import { Component, ViewChild } from "@angular/core";
import { DataManager, WebApiAdaptor } from "@syncfusion/ej2-data";
import { TreeViewComponent, DragAndDropEventArgs } from "@syncfusion/ej2-angular-navigations";
import {
  ScheduleComponent,
  View,
  EventSettingsModel,
  GroupModel,
  DragEventArgs,
  ResizeEventArgs,
  CellClickEventArgs,
  ResourceDetails
} from "@syncfusion/ej2-angular-schedule";


@Component({
  selector: "app-root",
  templateUrl: "app.component.html",
})
export class AppComponent {
  title = "testSync";

  @ViewChild("scheduleObj", { static: false })
  public scheduleObj: ScheduleComponent;

  public setView: View = "TimelineDay";

  public setViews: View[] = ["TimelineDay", "TimelineWeek", "TimelineMonth"];

  public setDate: Date = new Date(2020, 2, 11);

  public allowMultipleResource: Boolean = true;

  public resourceDataSource: Object[] = [
    { Name: "SAV", Id: 1, Color: "#ffaa00" },
    { Name: "Livraison", Id: 2, Color: "#f8a398" },
    { Name: "Maintenance", Id: 3, Color: "#7499e1" }
  ];

  public groupDataSource: Object[] = [
    { Name: "Jean-Michel", Id: 1, Color: "red", GroupID: 1 },
    { Name: "René", Id: 2, Color: "green", GroupID: 2 },
    { Name: "Joël", Id: 3, Color: "yellow", GroupID: 2 }
  ];

  public groupData: GroupModel = {
    resources: ["ResourcesUbi", "GroupsUbi"],
    allowGroupEdit: true
  };

  public eventObject: EventSettingsModel = {
    dataSource: [
      {
        Id: 1,
        Subject: "Test Planning",
        StartTime: new Date(2020, 2, 11, 12, 0),
        EndTime: new Date(2020, 2, 11, 13, 0),
        Location: "Ubiwan",
        ResourceID: 1,
        GroupID: 1
      },
      {
        Id: 2,
        Subject: "Test Planning 2",
        StartTime: new Date(2020, 2, 11, 13, 0),
        EndTime: new Date(2020, 2, 11, 16, 0),
        Location: "Ubiwan",
        ResourceID: 2,
        GroupID: 3
      }
    ],
    fields: {
      subject: { name: "Subject", default: "Nouvel événement" },
      location: { name: "Location", validation: { required: true } }
    }
  };

  public waitingList: { [key: string]: Object }[] = [
    {
      Id: 1,
      Name: "Dépot marchandise"
    },
    {
      Id: 2,
      Name: "Récupération marchandise"
    },
    {
      Id: 3,
      Name: "RDV exterieur"
    },
    {
      Id: 4,
      Name: "Passer chez Ubiwan"
    },
    {
      Id: 5,
      Name: "Installation"
    },
    {
      Id: 6,
      Name: "Réparation"
    }
  ];

  public field: Object = {
    dataSource: this.waitingList,
    id: "Id",
    text: "Name"
  };

  public allowDragAndDrop: boolean = true;

  onDragStart(args: DragEventArgs): void {
    args.scroll.enable = false;
    args.interval = 10;
  }

  onActionBegin(args) {
    if (
      args.requestType === "eventCreate" ||
      args.requestType === "eventChange"
    ) {
      var data = args.requestType === "eventCreate" ? args.data[0] : args.data;
      var groupIndex = this.scheduleObj.eventBase.getGroupIndexFromEvent(data);
      console.log("groupIndex from OnActionBegin", groupIndex);

      if (
        this.scheduleObj.isSlotAvailable(
          data.StartTime as Date,
          data.EndTime as Date,
          groupIndex as number
        )
      ) {
        console.log("Slot is available");
      } else {
        args.cancel = true;
        alert("Slot isn't available");
      }
    }
    console.log('eventObject.dataSource', this.eventObject.dataSource);
  }

  onResizeStart(args: ResizeEventArgs): void {
    args.scroll.scrollBy = 500;
    args.interval = 10;
  }

  onTreeDragStop(args: DragAndDropEventArgs): void {
    let cellData: CellClickEventArgs = this.scheduleObj.getCellDetails(
      args.target
    );
    let resourceDetails: ResourceDetails = this.scheduleObj.getResourcesByIndex(
      cellData.groupIndex
    );
    let eventData: { [key: string]: Object } = {
      Subject: args.draggedNodeData.text,
      StartTime: cellData.startTime,
      EndTime: cellData.endTime,
      IsAllDay: cellData.isAllDay,
      ResourceID: resourceDetails.resourceData.GroupID,
      GroupID: resourceDetails.resourceData.Id
    };
    const groupIndex = cellData.groupIndex;
    console.log("groupIndex from onTreeDragStop", groupIndex);
    if (
      this.scheduleObj.isSlotAvailable(
        eventData.StartTime as Date,
        eventData.EndTime as Date,
        groupIndex as number
      )
    ) {
      console.log("Slot is available");
      this.scheduleObj.openEditor(eventData, "Add", true);
    } else {
      args.cancel = true;
      alert("Slot isn't available");
    }
  }
}

Vengatesh Maniraj · Answer

Hi Anais, 

Thanks for the update.  

We have validated your reported issue with your shared codes and we could reproduce the issue. So we have considered this as a defect and logged the bug report at our end. The fix will be available in our weekly release on April 21, 2020.  We would appreciate your patience until then. 

Feedback: https://www.syncfusion.com/feedback/13208/getgroupindexfromevent-is-not-return-the-proper-result-when-the-resource-has 

Regards, 
Vengatesh

Anais Miltenberger · Answer

Hello VangateshIt works great in the new release ! Thank you very much.

Vengatesh Maniraj · Answer

Hi Anais, 

You are most welcome. 

Please get in touch with us if you need any further assistance. 

Regards, 
Vengatesh