how to identify deleteOccurence vs deleteSeries and editOccurence vs editSeries

[mohamed bachali]

hi, I am trying to override the default CRUD operations and I use RTK queries. so I am action on actionBegin level and execute my own CRUD. i have twomain issues: 

2/ when an event is in series, how to know the type of operation selected: delete event, delete entire series, and same for editing. is there a variable to capture the selection made by the user? currently, i use the following:

at popupopen, i capture if the event has a recurrencID to differentiate between a single event or an event in a series. but later, i use 

args.changedRecords.length === 1 &&

          args.deletedRecords.length === 0

which apparently is the same for occurence or series operations so I am  unable to differentiate between deleteOCcurence and deleteSeries

3/ i have the following error whilecompleting some of the CRUD operations:

util.js:411 Uncaught TypeError: nameSpace.indexOf is not a function

    at DataUtil.getObject (util.js:411:1)

    at JsonAdaptor.remove (adaptors.js:476:1)

    at JsonAdaptor.batchRequest (adaptors.js:262:1)

    at DataManager.saveChanges (manager.js:480:1)

    at Observer.<anonymous> (crud.js:627:1)

    at Observer.notify (observer.js:105:1)

    at ComponentBase.trigger (component-base.js:258:1)

    at Crud.processDelete (crud.js:594:1)

    at Crud.deleteEvent (crud.js:297:1)

    at QuickPopups.dialogButtonClick (quick-popups.js:985:1)

thanks

[mohamed bachali]

I am using this variable to differentiate between occurence or series operations:

Object.keys(args.data[0]).length >2 && eventType === "recurrent"

 for occurence operations we have two objects in data[0] ===2: occurence and parent and in series operations, we have a singloe object with all its key:values (>2)

an i already identify from popupopen if the event is part of a series or not (recurrencID presence). 

that is the way to differentiate between single events, occurence in a series and entire series operations.

is it this approach reliable or is there a straight forward way to capture a variable when selecting in the alert window...

[mohamed bachali]

now i have an issue that when i edit a single event (in serie or standalone) the editor is ok, but when i select series editing, the editor opens and immediately closes. how can i capture the selection on the editingalert to know the choioce made and act accordingly. thanks 

this is my code: 

const onPopupOpen = (args) => {

    //prevent opening the quickinfo on a new cell, we need double click to open the full editor

    if (args.type === "QuickInfo" && !args.data.Subject) {

      args.cancel = true;

    }

//check if event is part of series or not

    if (!args.data.RecurrenceID) {

      setEventType("notRecurrent");

    } else {

      setEventType("recurrent");

    }

   

   

    args.data.id ? setParentId(args.data.id) : setParentId(""); // we selected an event an d not an empty

   

    //capture the start date of the event to be used in teh exception

    eventStartTime = args.data.StartTime;

    if (args.type === "Editor") {

            const formElement = args.element.querySelector(".e-schedule-form");

      // Remove the default title and location row

      const titleLocationRow = formElement.querySelector(

        ".e-title-location-row"

      );

      if (titleLocationRow) {

        titleLocationRow.remove();

      }

      // Create a new custom row for "Subject" and "Location"

      let customRow = formElement.querySelector(".custom-field-row");

      if (!customRow) {

        customRow = createElement("div", { className: "custom-field-row" });

        formElement.insertBefore(customRow, formElement.firstElementChild);

      }

   

      // Initialize dropdown fields with their existing selected values if available

      const createDropdownField = (

        name,

        placeholder,

        dataSource,

        textField,

        valueField

      ) => {

        const container = createElement("div", {

          className: "custom-field-container",

        });

        const inputEle = createElement("input", {

          className: "e-field",

          attrs: { name },

        });

        container.appendChild(inputEle);

        customRow.appendChild(container);

        // Initialize dropdown with existing value or leave blank if none

        const dropDownList = new DropDownList({

          dataSource,

          fields: { text: textField, value: valueField },

          // value: args.data[name] || null,  // Use the existing value if it exists,

          value:

            name === "school" ? args.data.school?._id : args.data[name] || null, // Adjust for the school because of the data structure

          floatLabelType: "Always",

          placeholder,

          change: (event) => {

            if (name === "sessionType") {

              updateDropdownsBasedOnSessionType(event.value);

            }

          },

        });

        dropDownList.appendTo(inputEle);

        inputEle.setAttribute("name", name);

      };

      // Clear previous dropdowns if they exist

      const clearDropdown = (name) => {

        const existingField = customRow.querySelector(`input[name="${name}"]`);

        if (existingField) {

          existingField.parentNode.remove();

        }

      };

      // Update dropdowns based on session type

      const updateDropdownsBasedOnSessionType = (sessionType) => {

        clearDropdown("school");

        clearDropdown("Subject");

        clearDropdown("classroom");

        clearDropdown("animator");

        switch (sessionType) {

          case "School":

            createDropdownField(

              "school",

              "School Name",

              schoolsList.filter(

                (school) => school.schoolName !== "FirstSteps"

              ),

              "schoolName",

              "id"

            );

            createDropdownField(

              "Subject", //"subject",

              "Subject",

              SCHOOL_SUBJECTS,

              "label",

              "value"

            );

            break;

          case "Nursery":

            createDropdownField(

              "school",

              "School Name",

              [{ schoolName: "First Steps", id: "6714e7abe2df335eecd87750" }],

              "schoolName",

              "id"

            );

            createDropdownField(

              "Subject", //"subject",

              "Subject",

              NURSERY_SUBJECTS,

              "label",

              "value"

            );

            createDropdownField(

              "classroom",

              "Classroom",

              classroomsList,

              "classroomLabel",

              "id"

            );

            createDropdownField(

              "animator",

              "Animator",

              employeesList,

              "userFullName",

              "employeeId"

            );

            break;

          case "Drop":

            createDropdownField(

              "school",

              "School Name",

              schoolsList.filter(

                (school) => school.id !== "6714e7abe2df335eecd87750"

              ),

              "schoolName",

              "id"

            );

            createDropdownField(

              "animator",

              "Animator",

              employeesList,

              "userFullName",

              "employeeId"

            );

            createDropdownField(

              "Subject", //"subject",

              "Subject",

              ["Drop"],

              "label",

              "value"

            );

            break;

          case "Collect":

            createDropdownField(

              "school",

              "School Name",

              schoolsList.filter(

                (school) => school.id !== "6714e7abe2df335eecd87750"

              ),

              "schoolName",

              "id"

            );

            createDropdownField(

              "animator",

              "Animator",

              employeesList,

              "userFullName",

              "employeeId"

            );

            createDropdownField(

              "Subject", //"subject",

              "Subject",

              ["Collect"],

              "label",

              "value"

            );

            break;

        }

      };

      // Create the Session Type dropdown

      createDropdownField(

        "sessionType",

        "Session Type",

        ["School", "Nursery", "Drop", "Collect"],

        "label",

        "value"

      );

      // Pre-populate other dropdowns based on the current session type, if any/////added this to test editing with viewing alreadys elcted

      if (args.data.sessionType) {

        updateDropdownsBasedOnSessionType(args.data.sessionType);

      }

    }

  };

[Swathi Ravi]

Hi mohamed bachali,

Thank you for reaching out with your queries. I’m here to assist you.

Query 1: Identifying the type of operation (e.g., delete occurrence vs. delete series) and editing options in a recurring event.

To capture the user’s selection (e.g., editing or deleting a specific occurrence versus the entire series), you can use the popupOpen and actionBegin events. These events allow you to identify the type of action in progress:

    const onPopupOpen = (args) => {

      if(args.type == "Editor") {

        console.log("Current Action is:" ,scheduleObj.current.currentAction);

      }

    };

    const onActionBegin = (args) => {

      if(args.requestType == 'eventCreate' || args.requestType == 'eventChange' || args.requestType == 'eventRemove') {

        console.log("Current Action is:", scheduleObj.current.currentAction);

      }

    };

  <ScheduleComponent width='100%' height='650px' selectedDate={new Date(2021, 1, 20)} ref={scheduleObj} eventSettings={eventSettings} popupOpen={onPopupOpen} actionBegin={onActionBegin}>

Sample: https://stackblitz.com/edit/react-g7xuxu-pfbsfu?file=index.js
Video: Attached as a zip file.

Query 2: Error when performing certain CRUD operations.

For guidance on handling CRUD actions effectively, please refer to the Syncfusion documentation on CRUD operations in the Scheduler component: CRUD Operations in Scheduler. This resource provides detailed information to help resolve any errors related to data management.

Query 3: Issue with series editing where the editor closes unexpectedly.

To investigate this further, could you share a video that demonstrates the issue?  A visual reference would help us understand the exact behavior and identify a solution. And share the entire Scheduler related code snippets.

Please don’t hesitate to reach out if you need more assistance with these scenarios.

Regards,

Swathi Ravi

Attachment: Screen_Recording_20241104_190651_d079d57d.zip

[mohamed bachali]

hi Swathi Ravi,

thanks for your assistance.

i will definitely use your code.

for question 3, i figured out that the state update block was causing the immediate closure of the editor. as soon as i removed it, it was workign fine.

if (!args.data.RecurrenceID) {

      setEventType("notRecurrent");

    } else {

      setEventType("recurrent");

    }

kind regards

[Swathi Ravi]

mohamed bachali,

You're welcome! We're happy to hear that our solution was helpful and that you were able to resolve query 3 on your own.