We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

State value used just on second selection of grid


I have a DataGrid with selection event and set the state variable in the selection event (functional component).

A "details" view is showing the on the right side with detailed information of the selected item:

ex: grid -> column with a referenced item name, details -> combobox with all possible values

Everything is nearly just working as expected but the combobox(es) is just showing the selected item on the second selection of a row in the grid.

The value of the combobox is bind to "selectedItem.dataId" (selectedItem is the state property).

Maybe you have a hint what I am doing wrong?



Attached is the complete functional component...

Attachment: LookUpTable_1967c446.7z

5 Replies 1 reply marked as answer

BP Bernd Parchmann March 2, 2023 07:13 AM UTC

Short update:

I found a solution. If I remove the 'allowCustom' attribute, the combobox is working as expected! But this is not what I expect from the element. With 'allowCustom={false}' I am expecting a "more save handling"...

Is this a bug?

JC Joseph Christ Nithin Issack Syncfusion Team March 7, 2023 10:01 AM UTC

Hi Brend,

  Greetings from Syncfusion support.

   Before proceeding with the solution, kindly share the below details.

  • Explain the issue you are facing in detail.
  • Simple sample to replicate the issue you are facing.
  • Video demo of the issue you are experiencing.
  • Syncfusion package version you are using.


Joseph I.

BP Bernd Parchmann March 7, 2023 02:38 PM UTC


in general the problem is, that if the attribute 'allowCustom' is set to false, the value to identify the selected item in the datasource is not found after initialization.

As I dont want to allow custom entries, I have set allowCustom to false. But then the combobox hasnt shown the selected item although the value was set!

After I have removed the attribute or set it to true, the selected item was visible as expected.

I am using the latest version packages: 20.4.49-52 (depending of the element) - I update nearly every week / two weeks.

Do you need more details?

BP Bernd Parchmann March 16, 2023 03:31 PM UTC

I have done some other tests and I recognized that the rowDeselected event is fired after I select a row...

It seems that the state change of my selected item state is triggering a rerender and deselection of the selected row

To avoid that I could use a useMemo const for the grid. Is there another way that the grid component isn't rerendering?

Marked as answer

JC Joseph Christ Nithin Issack Syncfusion Team March 21, 2023 10:15 AM UTC


   In your update you have mentioned that the state change is triggering re render of the grid. By default, in react, when a state property is changed all the child components will be re rendered. This is the reason for the reported behaviour. As you have figured out using a useMemo will prevent grid from re rendering. This way you can prevent the re rendering of the grid component.

Live Chat Icon For mobile
Up arrow icon