Custom React component in Grid Toolbar does not rerender

[Edwin]

Hello,

I am trying to render a custom React component inside the Grid Toolbar. I am using the template function of the Grid Item to achieve this, as suggested here.

I am able to render the component, but when I update the React state in the parent component, my custom component in the toolbar disappears.

Requirement:

I need to render a custom React component inside the toolbar and the component should rerender correctly when the parent component is rerendered (through setState).

Reproduction scenario:

Please consider the following Codesandbox for the reproduction scenario: 

Example 1: https://codesandbox.io/s/syncfusion-toolbar-rerender-bug-in-grid-21c2u

When clicking the 'Click me' button in the center of the toolbar, it disappears.

I expect it to rerender with the updated count.

Further information:

As you can see in the Codesandbox, I am using a function to get the toolbar options (this.getToolbarOptions).

If I use a class variable instead of a function, then the button does not disappear, but it is also not rerendered.

Example 2: https://codesandbox.io/s/example-2-syncfusion-toolbar-rerender-bug-in-grid-fu3px

Thanks,

Edwin

[Edwin]

Is there any update on this issue?

We are currently evaluating SyncFusion and we are investigating how well SyncFusion works with the best practises for React.

If SyncFusion can not handle rerendering components after a simple state update, this will be a red flag for us.

Kind regards,

Edwin

[Rajapandiyan Settu]

Hi Edwin, 

Thanks for your patience. 

Query :  I am using a function to get the toolbar options (this.getToolbarOptions). If I use a class variable instead of a function, then the button does not disappear, but it is also not rerendered. 

We are facing some issue when trying to resolve your problem at our end. currently we have forwarded that issue to the concerned team and they logged that as “Toolbar items not refreshed properly” bug. The fix for this defect will be included in our volume 2 SP release which is expected to roll out by the end of July.   

Feedback: https://www.syncfusion.com/feedback/16128/toolbar-refresh-method-is-not-working-properly  

After the issue fix we will provide the solution. Until then we appreciate your patience. 

Regards, 

Rajapandiyan S

[Thiyagu Subramani]

Hi Edwin, 

Sorry for the delay. 

We are glad to announce that our Essential Studio 2020 Volume 3 Release v18.3.0.35  is rolled out and is available for download under the following link. 

https://www.syncfusion.com/forums/158306/essential-studio-2020-volume-3-release-v18-3-0-35-is-available-for-download 

In this release, the reported defect toolbar refresh method is not working properly has been resolved at our end. Kindly upgrade your version to v18.3.35 to avail of this fix. 

Release notes : https://ej2.syncfusion.com/documentation/release-notes/18.4.31/?type=all ( latest version) 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

Regards, 

Thiyagu S