cellTemplate function.

[Jiuzhou Wu]

Hi,

I am using cellTemplate={cellTemplate}. I put a console.log function in that cellTemplate function. I Noticed that cellTemplate rendered twice for the table after adding groups here. Is there a way to make it load only once? Because when I am changing the events data, I can see events on the scheduler flicking during the loading period.

[Ashokkumar Karuppasamy]

Hi Jiuzhou Wu,

We created a sample with cellTemplate, and it is working properly. For your convenience, we have attached a sample below. If you still facing the issue, kindly provide the following  details, as they will greatly help us to understand and resolve the problem:

• Whether we have missed anything in the prepared sample
• Share all the code snippets related to the scheduler.
• In which scenarios you have changed schedule event data
• Replicate the issue in our shared sample

Regards,
Ashok

Attachment: Schedulecelltemplatesample_e320eb9d.zip

[Jiuzhou Wu]

Hi Ashok,

I have attached my simple example here. If you click on the switch button on the bottom, you should be able to see that cellTemplate rendered twice every time. Check the console. You will see the groupIndex printed for each cell.

Attachment: schedulercomponent_fa5ca870.zip

[Venkateshwaran Saravanakumar]

Hi Jiuzhou Wu,

Based on your query and after examining your sample, we would like to inform you that your React application is running in strict mode. Strict mode intentionally double-invokes some functions, including render methods, to help detect side-effects. This is a development-only feature and shouldn't affect the production build. Therefore, please check your sample by running it in the production build.

Reference: https://react.dev/reference/react/StrictMode

Regards,

Venkatesh

[Jiuzhou Wu]

Hi Venkatesh,

I am pretty sure it's not because of strict mode. Because it still happenning after I commented out strict mode tag. Steps to reproduce with my simple example:

1. commented out strict mode
2. start the app
3. after app loaded, clear the console
4. click on "switch" button on the bottom of the scheduler
5. check the console. You should be able to see what I posted here.     As you can see, in the image, the "loaded" is only printed out once. However, the groupIndex printed as "012012" twice. And groupIndex printing is nested in cellTemplate function. That's why I am saying the whole component only load once but this cellTemplate some how called twice.

[Ashokkumar Karuppasamy]

Hi Jiuzhou Wu,

You can resolve the reported behavior by maintaining the eventSettings property value in the useState and maintaining the cellTemplate value with useCallback, as shown in the code snippet below.

Please try the solution, and let us know if you need further assistance.

[Syncal.jsx]

 console.log('loaded ', localData)

  let scheduleRef = useRef(null);

  const [data, setData] = useState(localData);

  let onCreated = () => {

    scheduleRef.current.showHeaderBar = false;

  };

      selectedDate={new Date(2017, 5, 5)}

      eventSettings={data}

[App.jsx]

 const cellTemplate = useCallback((props) => {

    console.log(props.groupIndex);

    // Your other logic here

    return "";

  }, []);

 

Output:

Regards,

Ashok

[Jiuzhou Wu]

Hi Ashok,

I have tried what you said in my simple example. It does working fine there. However, in my real application it's still running twice, even tho I am using useCallback. Here is the screenshot of how I use the scheduleComponent. Do I need to add useCallback for all those functions involved?

I am putting a console.log function in this sortbuttonView function. And I can see that the templated is used twice.

Regards,

Jiuzhou Wu

[Ashokkumar Karuppasamy]

Hi Jiuzhou Wu,

We have reviewed the schedule codes you shared, and we have prepared a sample incorporating all your functions. We suggest utilizing useCallback in schedule templates. Moreover, you can maintain schedule property values by using useState and update the schedule accordingly. Please give it a try, and let us know if you need any further assistance.
 
Regards,
Ashok