Our pure JavaScript Scheduler component


[REACT] Manually trigger event rerender (because load() is not triggering rerender)

Post Reply

Post by mcarner5 »

First off, I don't think I have things wired up the "bryntum way" which is why i'm running into this issue. In my event, I have an array of objects representing information related to pushing the events to a google calendar. Based on this object, I want to add an icon in a label to the event on the appropriate resource row

{
  "$PhantomId": null,
  "id": "934586fa-c905-4cbc-a81b-59433a2a25ef",
  "startDate": "2024-02-28T14:00:00",
  "endDate": "2024-02-28T15:00:00",
  "eventType": "appointment",
  "iconCls": "b-fa ",
  "customerName": null,
  "customerContact": null,
  "customerType": null,
  "addressLine1": "",
  "addressLine2": "",
  "city": "City",
  "state": "",
  "zip": "",
  "name": "Event 6",
  "eventColor": "#E91E63",
  "desc": "Description for Event 6",
  "resourceIds": [
    "4",
    "5",
    "6"
  ],
  "allDay": false,
  "draggable": true,
  "resizable": true,
  "duration": 1,
  "durationUnit": "HOUR",
  "cls": "",
  "recurrenceRule": null,
  "exceptionDates": [],
  "externalPushMappings": [
    {
      "externalId": "vjfculsl30cpegurioteittdsg",
      "employee": {
        "id": "4",
        "role": "INSPECTOR",
        "name": "Jim Davies",
        "cellPhone": "",
        "email": "email@gmail.com",
        "googleAuthStatus": "AUTHORIZED",
        "calendarId": null,
        "calendarIdIsValid": null
      },
      "externalPushStatus": "COMPLETE",
      "lastPushAt": "2024-02-28T10:53:51.829357",
      "failedUpdateAttempts": null
    },
    {
      "externalId": null,
      "employee": {
        "id": "5",
        "role": "INSPECTOR",
        "name": "Inspector 2",
        "cellPhone": null,
        "email": null,
        "googleAuthStatus": "NOT_STARTED",
        "calendarId": null,
        "calendarIdIsValid": null
      },
      "externalPushStatus": "NEEDS_GOOGLE_AUTH",
      "lastPushAt": null,
      "failedUpdateAttempts": null
    },
    {
      "externalId": null,
      "employee": {
        "id": "6",
        "role": "INSPECTOR",
        "name": "Inspector 3",
        "cellPhone": null,
        "email": null,
        "googleAuthStatus": "NOT_STARTED",
        "calendarId": null,
        "calendarIdIsValid": null
      },
      "externalPushStatus": "NEEDS_GOOGLE_AUTH",
      "lastPushAt": null,
      "failedUpdateAttempts": null
    }
  ]
}

The user will right click an event and execute a "push event" function. This makes an API call to the server and then triggers a crudManager.load() to get any updates to the eventRecord.data which would include the result of the push attempt status.

What I'm seeing is that after the load() is called, it doesnt trigger a rerender on the events. I think this is because I haven't set up the ExternalPushMapping object as a property in my EventModel. I figure I have two options:

  • Set up the EventModel
    Somehow trigger a rerender on the event (maybe by trigger "drop" event?)

I have tried updating my EventModel to include the ExternalPushMappings object, but it does not update the event after I call load():

export type AppEventModelConfig = EventModelConfig & {
    desc: string
    eventType: string
    externalPushMappings: ExternalPushMapping[] // Defined elsewhere
}

export class SchedulerEventModel extends EventModel {

static get $name() {
    return 'SchedulerEventModel';
}

static get fields() {
    return [
        // { name: "desc", type: "string", defaultValue : ""},
        // { name: "name", type: "string", defaultValue : ""},
        'name',
        'desc',
        'eventType',
        'startDate',
        'endDate',
        { name: "resourceIds", persist: true},
        { name: "externalPushMappings", persist: true}
    ];
}

// public desc: string | undefined;
// public eventType: string | undefined;

constructor(config: Partial<AppEventModelConfig>) {
    super(config);
}

}

Post by tasnim »

Hi,

CrudManager.load should trigger the event renderer. Would it be possible for you to provide a runnable test case so we can check what's wrong and give you advise according to that?

You could use https://bryntum.com/products/scheduler/docs/api/Grid/view/GridBase#function-refreshRows to trigger the eventRenderer

scheduler.refreshRows();

Best of luck :),
Tasnim

Post Reply