Undesirable toolbar icon when Sorting Grid

[Marlos Augustus Maciel Damasceno]

Hi there,

I am using React Grid in a project and when trying to add the option to Sort option in the columns it creates an undesirable toolbar icon as well.

This is the grid before sorting.

Then, when I add the properties allowSorting={true} and <Inject services={[Sort]} />, it works as expected, besides this toolbar icon.Why is this happening?

This is what shows when inspecting the element.

To conclude, if I click in the icon, it gives an error:

Does anyone could help me with that?

Best regards,

[Vasanthakumar K]

Hi Marlos Augustus Maciel Damasceno,

Greetings from Syncfusion support.

Query: I am using React Grid in a project, and when enabling sorting (allowSorting={true} with <Inject services={[Sort]} />), an unexpected toolbar icon appears. Clicking this icon results in an error: "Cannot set properties of undefined (setting 'isCustomDialog')". Why is this happening, and how can I fix it?

This issue occurs due to an improper combination of grid settings, specifically:

• enableAdaptiveUI={false} (Adaptive UI is disabled)
• rowRenderingMode='Vertical' (Vertical row rendering is enabled)

These settings conflict, causing the toolbar icon to appear unexpectedly and triggering the error when clicked.

How to Fix It?

Ensure proper configuration based on enableAdaptiveUI

• If Adaptive UI is disabled (false), avoid setting rowRenderingMode='Vertical'.
• If Adaptive UI is enabled (true), rowRenderingMode='Vertical' works correctly.

Please refer to the below documentation, screenshot and issue replicated improper configuration sample for more details.

Reference:

• Vertical Row Rendering Documentation
• Issue Replicated Sample (Incorrect Configuration): StackBlitz Demo
• Screenshot:

Next Steps:

If the issue persists after adjusting the configuration, please:

1. Provide your complete Grid configuration, including:

• Column definitions
• Features enabled (sorting, toolbar, rowRenderingMode, enableAdaptiveUI etc.)
• All property settings

2. Confirm your Syncfusion package version and ensure it's updated *.
3. Reproducing the issue in our provided StackBlitz sample with your above suggested proper grid settings.
4. Share a hosted link or sample project for further investigation.

Regards,

Vasanthakumar K

[Marlos Augustus Maciel Damasceno]

Hi Vasanthakumar,

Thanks for the reply, indeed when adding the flag enableAdaptiveUI the error when clicking is not happening anymore. Many thanks!

Best regards,

Marlos Damasc

[Vasanthakumar K]

Hi Marlos Augustus Maciel Damasceno,

We are glad to hear that our provided solution with documentation references have effectively helpful to resolve grid script error issue at your application end.

If you have any further questions or need additional assistance regarding this thread query, please don’t hesitate to reach out. As always, we’re here to help and happy to assist you.

Regards,

Vasanthakumar K