RenderCell method not updating on a state update

[Srihari Murthy]

I am setting te latestEvents in the onDataBound. I want to renderCell based on the updatedLatestEvents state. But the latest events state is not using the updated value in the renderCell method. It uses the initial state. It seems it doesn't get refresh or recreated after the state updates. 
I am using resource grouping with timeline view.

​const​onDataBound​=​() => {

if (scheduleObj.current) {

// Update the latest events

setLatestEvents(scheduleObj.current.getEvents());

}

}

const renderCell = (args) => {

if (scheduleObj.current && args.element.classList.contains('e-work-cells')) {

const resourceDetails = scheduleObj.current.getResourcesByIndex(args.groupIndex);

if (resourceDetails.resource.field === 'resourceId') {

const filteredEvents = latestEvents.filter((event) => { //This should get updated when

latestEvents changes

const eventStartDate = new Date(event.StartTime).toDateString();

const cellDate = new Date(args.date).toDateString();

return (

event.resourceId === resourceDetails.groupData.resourceId &&

eventStartDate === cellDate

);

});

}

}

};

[Ashokkumar Karuppasamy]

Hi Srihari Murthy,

The renderCell event is triggered for the schedule cells, resource cells, and header cells that are rendered. If you are using this event to customize the cells but are not receiving events or not re-rendering schedule events to update state values, we suggest trying to obtain change event details by using the actionBegin and actionComplete events. By utilizing these events, you can get the updated event details and customize them according to your needs. Please refer to the attached code snippet and sample demonstration for a solution. Let us know if you need any further assistance.

Sample: https://stackblitz.com/edit/schedule-events-mtsykb?file=index.js

    const onActionBegin = (args) => {

        if (args.requestType === 'eventCreate') {

            console.log('Befor Event Creating');

        } else if (args.requestType === 'eventChange') {

            console.log('Befor Event eventChange');

        } else if (args.requestType === 'eventRemove') {

            console.log('Befor Event eventRemove');

        }

 

    }

 

    const onActionComplete = (args) => {

        if (args.requestType === 'eventCreated') {

            console.log('eventCreated');

        } else if (args.requestType === 'eventChanged') {

            console.log('eventChanged');

        } else if (args.requestType === 'eventRemoved') {

            console.log( eventRemoved');

        }

    };

    return (

        <div className="schedule-control-section">

            <div className="col-lg-12 control-section">

                <div className="control-wrapper">

                    <ScheduleComponent

                        ref={scheduleObj}

                        cssClass="timeline-resource-grouping"

                        width="100%"

                        height="650px"

                        selectedDate={new Date(2023, 0, 4)}

                        actionComplete={onActionComplete}

                        actionBegin={onActionBegin}

                        currentView="TimelineWeek"

                        workDays={workDays}

                        eventSettings={{ dataSource: data }}

                        group={{ resources: ['Projects', 'Categories'] }}

                    >

 

Furthermore, if there is a possibility that we misunderstood your requirement, we would greatly appreciate it if you could provide us with further information about your scenario. This will help us align our understanding with your expectations and provide you with the best possible assistance.

Regards,
Ashok

[Srihari Murthy]

Thank you for the assitance Ashokkumar ,

My requirement is that I want to be able to rerender the cell based on the latest current events displayed on the scheduler.
My cellRender method uses latest events on the scheduler and accordingly applies custom styling to cells based on latest eventsData. I would want the cells to rerender whenever my events change on the scheduler. I tried upating the state of the datasource with updated events using action complete/ actionBegin but it didn't rerender the cells.

[Subalakshmi Ramachandran]

Hi Srihari,

 

The issue you're facing is due to the closure behavior of JavaScript. The renderCell function captures the latestEvents state at the time of its creation and doesn't get the updated state value in subsequent calls.

 

To solve this issue is to use a ref to store the latestEvents state. ref is not just for DOM references, but can be used to hold any mutable value. The value stored in ref will persist for the full lifetime of the component.

 

[index.js]

 

const latestEventsRef = useRef();

 

const onDataBound = () => {

    if (scheduleObj.current) {

        const latestEvents = scheduleObj.current.getEvents();

        setLatestEvents(latestEvents);

        latestEventsRef.current = latestEvents;

    }

}

 

Sample link:  schedule-events (forked) - StackBlitz

 

please get back to us if you need any further assistance

 

Regards,

Suba R