State value used just on second selection of grid

[Bernd Parchmann]

Hi,

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?

Greetings,

Bernd

Attached is the complete functional component...

Attachment: LookUpTable_1967c446.7z

[Bernd Parchmann]

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?

[Joseph Christ Nithin Issack]

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.

Regards,

Joseph I.

[Bernd Parchmann]

Hi,

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?

[Bernd Parchmann]

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?

[Joseph Christ Nithin Issack]

Brend,

   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.