Autocomplete valueField

Hello, Parag,

The AutoComplete returns only text value as it is usually connected to text-only searches.

In this case, we have two suggestions:

1) Based on the text value, loop the original data to find the ID.

2) Use a ComboBox component which also allows AutoComplete like typing and returns the entire data object in its change event:

https://www.telerik.com/kendo-react-ui/components/dropdowns/combobox/suggestions/#toc-suggestions

I hope this is helpful.

Regards,
Stefan
Progress Telerik

Hi Stefan,

Thanks for the quick reply. I tried with combo box and it is working fine.

Currently I am trying some different scenario in which I have added autocomplete control inside the drop down and trying to save the value on change. When I edit the values in autocomplete control and try to save it fails. Can you please help? below is the code

 

onChange = (event) => {
this.props.onChange({
dataItem: this.props.dataItem,
field: this.props.field,
syntheticEvent: event.syntheticEvent,
value: event.value
});
const value1 = event.target.value;
  this.setState({
data: this.filterData(value1),
value: value1
});

}

 

itemChange(event) {
const value = event.value;
const name = event.field;
if (!name) {
return;
}
const updatedData = this.state.data.slice();
const item = this.update(updatedData, event.dataItem);
item[name] = value;
  if ( value !=undefined) {
  this.save(item);
}
this.setState({
data: updatedData
});
}

Hello, Parag,

I can assume that the issue may occur as the parameters from the AutoComplete and the DropDown events are different.

Could you please provide more details for the error and where it occurs?

I can also suggest checking if the values are as expected by placing a debugger in the itemChange event and checking the individual values.

Regards,
Stefan
Progress Telerik

Hi,

 

Below is the code

 

   itemChange(event) {
        const value = event.value;
        const name = event.field;
        if (!name) {
            return;
        }
        const updatedData = this.state.data.slice();
        const item = this.update(updatedData, event.dataItem);
        item[name] = value;
        console.log("itemchange",event)
        if ( value !=undefined) {
            console.log("Save",value);
            this.save(item);
        }
        this.setState({
            data: updatedData
        });
    }

 

    onChange = (event) => {
        console.log("On change",event);
        this.props.onChange({
dataItem: this.props.dataItem,
            field: this.props.field,
            syntheticEvent: event.syntheticEvent,
            value: event.value
        });
        const value1 = event.target.value;
        console.log("value",value1);
        this.setState({
            data: this.filterData(value1),
            value: value1
        });

    }

 

render() {
        return (
            <td>
                <div>
                    <AutoComplete
                    data={this.state.data}
                        placeholder="e.g.Parag Pathari"
                        value={this.props.dataItem["FullName"]}
                        textField="FullName"
                        onChange={this.onChange}
                        style={{ width: "200px" }} />
                </div>
            </td>
        );
    }

Hello, Parag,

Thank you for the provided code.

I tried replicating the case, but there was not error when editing:

https://stackblitz.com/edit/react-yzj19z?file=app/main.js

Please try replicating the error using the example as a starting point.

Regards,
Stefan
Progress Telerik