Can't get Dropdown to show up in Grid Add/Edit mode.

[Spyros]

Hello,

I'm reaching out because I can't manage to get a dropdown to work while adding an entry in Grid.

I'm using React with functional components.

I have defined the editType attribute in my Grid column and also made an object with parameters for the "edit" attribute like in the examples shown here, although I keep getting error when clicking the Grid's Add button.

The error I get is:

Uncaught TypeError: col.edit.create is not a function

    at EditRender.getEditElements (edit-renderer.js?4820:220)

    at EditRender.addNew (edit-renderer.js?4820:30)

    at Observer.eval (normal-edit.js?e95e:524)

    at Observer.notify (observer.js?811a:102)

    at GridComponent.ComponentBase.trigger (component-base.js?c9da:209)

    at InlineEdit.NormalEdit.addRecord (normal-edit.js?e95e:516)

    at InlineEdit.addRecord (inline-edit.js?94a9:32)

    at Edit.addRecord (edit.js?aa15:175)

    at GridComponent.Grid.addRecord (grid.js?9c37:2834)

    at Observer.eval (toolbar.js?e09d:354)

My Grid's column is:

<ColumnDirective field='TeamDescr' headerText='Team' textAlign='Left' editType='dropdownedit' edit={teamParams} validationRules={{ required: true }} />

And the props function for the "edit" property is:

const teamParams = {

params: {

actionComplete: () => false,

allowFiltering: true,

dataSource: new DataManager([

{ TeamDescr: 'Team 1', id: '1' },

{ TeamDescr: 'Team 2', id: '2' },

{ TeamDescr: 'Team 3', id: '3' }

]),

fields: { text: "TeamDescr", value: "id" },

query: new Query()

}

}

If I remove the "edit" property, Dropdown is shown without options and it makes a request in the background to the remote datasource for the Grid's data.

I am trying for hours to debug this but I have not had any luck, I would really appreciate some help.

Thank you in advance.

Best regards!

[Vignesh Sivagnanam]

Hi Spyros 

  

Greetings from Syncfusion support. 

  

Based on your query you are facing script error when you render the dropdown in edit state with params. We checked your code example and prepared a sample, but we did not able to reproduce the reported issue at our end. 

  

Please refer the below sample and screenshot for your reference, 

  

Sample : https://stackblitz.com/edit/react-efwemn?file=index.js 

  

 

  

If you still faced the reported issue at your end, please share the below details to validate further on the issue, 

  

1. Full grid rendering code. 

  

2. If possible, replicate the issue in the above sample or share the issue reproduced sample. 

  

3. Syncfusion Package version. 

  

Regards 

Vignesh Sivagnanam  

[Spyros]

Dear Vignesh Sivagnanam,

Thank you for your reply.

Indeed your example project worked great, and I did create another one myself to have a clear playground since I could not find what the differences were between your implementation and mine. It worked great, but I was still not able to get it to work in my main application where the issue occurred.

After several hours of debugging I found out that issue was caused because grid was refreshing a couple times due to changes in React state.

I really don't know why the grid refreshing could cause this issue, although once I eliminated the reason of the Grid refresh by using React.memo, dropdown was populated without any errors.

I guess this is how I'm going to use it from now on, every grid will be by itself in a separate component that would use React.memo so that it won't be affected by React state changes.

If I'm missing something and there is some more optimal way of achieving the same result, please let me know!

Best regards,

Spyros 

[Vignesh Sivagnanam]

Hi Spyros 

  

Thanks for the update 

  

Based on your update you have mentioned that the grid is refreshing multiple times due to changes in React State. To validate the issue at our end, please share below details. 

  

1. Complete Grid rendering code. 

 

2. Code example of changing state value. 

  

3. If possible please replicate the issue on our provided sample or share the issue reproduced sample. 

  

4. Syncfusion package version. 

  

Regards 

Vignesh Sivagnanam 

[Spyros]

Dear Vignesh Sivagnanam,

The use of React.memo was suggested by a colleague of yours in this thread.

There are attached sample projects there, with and without the use of React.memo, so that you can see for yourself how they work.

This approach does work and solves the issues with grid refreshing when there is any change in React's state.

Although it's not optimal because we need to create separate components for every single grid in our application and then import them while using React.memo.

So, if there is any better option, perhaps with the combination of some Grid methods I'm not aware of, so that we can achieve the same result without having to make so many new components, I would like to know about it!

Thank you.

Best regards!

[Joseph Christ Nithin Issack]

Hi Spyros, 

 

Thanks for the update. 

 

By default, in React functional component if we change the state means does not only mean that the render function of the component will be called, but also that all its subsequent child components will re-render, regardless of whether their props have changed or not. 

 

To avoid this, we need to wrap the component in React.memo so it will only re-render if the props are changed. If you need to avoid the import from the other file, we suggest you wrap the grid component in React.memo within the same file. 

 

Please download the modified sample from the below link, 

 

Sample: https://www.syncfusion.com/downloads/support/forum/165862/ze/GRID-R~11215237199 

 

For more information, please refer the general documentations 

 

https://felixgerschau.com/react-rerender-components/#when-does-react-re-render 

 

https://aheadcreative.co.uk/articles/avoiding-react-component-re-renders-with-react-memo/ 

 

Regards, 

Prasanna Kumar N.S.V 

[Lucas Ruiz]

Good afternoon.

I've found the same error as detailed above and followed the same steps (even changed the component to use React.memo) but I still have the same error. Taking a look at the included .zip file I noticed that the example does not make use of the 'dropdownedit' cell, instead, it passes the data directly to the GridComponent.

Do you have further insights on how this could work? I'm on react 16.

[Sujith Kumar Rajkumar]

Hi Lucas, 

 

Before proceeding with the query please share us the following information to understand your use case better, 

 

• Let us know the structure of how you are rendering multiple Grid components in your application.
• Let us know where you are updating the state values which is causing the Grid component to refresh.
• In the previous update you had mentioned that the solution suggested in this forum helped resolve your problem. So please confirm us if that solution is currently working fine or if it also causes problems with dropdown edit.
• If you are facing any errors then please share us the same.

 

Regards, 

Sujith R