Editing grid with DropDown

[Raul Ramirez]

Hi all,

We are working in a GRID where we can edit in dropdown mode.

My question is : How can we pass the data master values to the component?

Thank you very much.

Regards.

[Raul Ramirez]

Hi all, 

I found the soluction here: https://ej2.syncfusion.com/react/documentation/grid/how-to/provide-custom-data-source-and-enabling-filtering-to-drop-down-list/ 

But I can't get it to work, I have this error.

Type 'DataManager' is not assignable to type 'number[] | string[] | DataManager | { [key: string]: Object; }[] | boolean[] | undefined'.

Type 'import(".../@syncfusion/ej2-data/src/query").Query' is not assignable to type 'import(".../@syncfusion/ej2-grids/node_modules/@syncfusion/ej2-data/src/query").Query'.ts(2322)

Thank you very much.

Regards.

[Rajapandi Ravi]

Hi Raul, 

Greetings from syncfusion support 

Based on your query we have prepared a sample in Grid which was same as your provided document and tried to reproduce the issue. But it works fine from our end.  

Please refer the below code example and sample for more information. 

 

class App extends Component<AppProps, AppState> { 

  public editOptions: EditSettingsModel = { allowAdding: true, allowDeleting: true, allowEditing: true  }; 

  public toolbarOptions: ToolbarItems[] = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 

  public countryParams : IEditCell = { 

    params:   { 

      actionComplete: () => false, 

      allowFiltering: true, 

      dataSource: new DataManager([ 

    { countryName: 'United States', countryId: '1' }, 

    { countryName: 'Australia', countryId: '2' }, 

    { countryName: 'India', countryId: '3' } 

  ]), 

      fields: { text: "countryName", value: "countryName"}, 

      query: new Query() 

    } 

  }; 

  public grid: Grid | null; 

  render() { 

    return ( 

            <div className='control-pane'> 

                <div className='control-section'> 

                    <GridComponent id='grid' dataSource={cascadeData} editSettings={this.editOptions} 

      toolbar={this.toolbarOptions} height={273} ref={g => this.grid = g}> 

                        <ColumnsDirective> 

                            .  .  .  .  .  .  .  .  .  .  

                            <ColumnDirective field='ShipCountry' headerText='Ship Country' width='150' editType= 'dropdownedit' edit={this.countryParams}></ColumnDirective> 

                        </ColumnsDirective> 

                        <Inject services={[Edit, Toolbar]} /> 

                    </GridComponent> 

                </div> 

            </div> 

    ); 

  } 

} 

render(<App />, document.getElementById('root'), document.getElementById('button') ); 

 

Sample: https://stackblitz.com/edit/react-tsx-grid-awvvu5?file=index.tsx 

If you still face the issue, please share the below details that will be helpful for us to provide better solution 

1)    Please share your package version. 

2)    Please share your complete Grid rendering code  

3)    If possible please replicate the issue with our above attached sample 

Regards,
Rajapandi R 

[Raul Ramirez]

Hello,

Thank you , I made it work by taking the type of class "IEditCell".

It's working fine.

Regards.

[Rajapandi Ravi]

Hi Raul, 

We are happy to hear our suggested solution was working with your end. 

 

Please get back to us if you need further assistance. 

 

Regards, 

Rajapandi R