React: How to set selectedValue of AutoComplete in FlexGridCellTemplate?

Posted by: yutaka.oda on 12 January 2020, 4:17 am EST

    • Post Options:
    • Link

    Posted 12 January 2020, 4:17 am EST

    Hi, I implemented AutoComplete in FlexGrid using template.

    I’m trying to get selectedValue and set it back to React State (or itemsSource).

    Should I do it in the initialized of FlexGrid or changehandler?

    I’m using Wijmo 5 and React 16. Here is the code:

    
                <wjGrid.FlexGrid itemsSource={this.state.data} initialized={this.flexInitialized.bind(this)} >
                    <wjGridFilter.FlexGridFilter />
                    <wjGrid.FlexGridColumn binding="id" header="ID" >
                      <wjGrid.FlexGridCellTemplate cellType="CellEdit" 
                        template={(context) => {
                          return <wjInput.AutoComplete 
                            itemsSource={this.state.map} 
                            id="id" 
                            displayMemberPath="label" 
                            //selectedIndexChanged={this.changehandler} 
                            selectedItem={this.state.map.find(o => o.id === context.item.id)}
                            />
                        }} />
                    </wjGrid.FlexGridColumn>
                  </wjGrid.FlexGrid>
    
    
  • Posted 12 January 2020, 6:12 pm EST

    Hi Yutaka,

    You can directly handle the selectedIndexChanged event of the AutoComplete and set the value of the current cell as well as the react state in this anonymous function. Please refer to the sample link below for reference:

    https://stackblitz.com/edit/react-nb2dab

    Regards,

    Ashwin

  • Posted 13 January 2020, 6:40 am EST

    Thank you!! The part below is what I needed the most.

    context.value = ac.selectedItem.id;
    
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels