[Solved] DropdownList - binding textField attribute to inner value of json object

[Martin]

I have problem with textField binding to value. My JSON looks like this and I need to bind name.value to textField attribute, but as it is shown below, its not working. How I can manage that?

{
  "id":"some_Id",

  "code":"some_code",
  "name":{
        "value": "Czech republic",
        "translations": []
   },
   etc....
}

<DropDownList
    data={this.props.headerData}
    textField={"name.value"}
    valueField={"id"}
    value={this.props.selectedImporter.id}
    className="dd-header"
    onChange={this.importerContextChanged} />
);

[Stefan]

Hello, Martin,

Thank you for the details.

Currently, the DropDown is working only with flat data structures.

In this case, I can suggest setting the data as a function which will take the data to make a flat textField property based on the nested structure and return the modified data:

flatData = (data) => {
    data.map(item => {item.textField = item.name.value})
    return data
}

<DropDownList
    data={this.flatData(this.data)}
    textField={'textField'}

I made an example demonstrating this:

https://next.plnkr.co/edit/dU57ZYEYOuYmFLjb

As we can agree that it will be beneficial to support this out of the box, we will discuss this enhancement of the component.

Regards,
Stefan
Progress Telerik

[Martin]

Hi,

yeah this is great example, didn't even think about it, it could be done like this. Thanks a lot.

Best regards,
Martin

[Stefan]

Hello, Martin,

I'm glad to hear that this is helpful.

We also agreed to log the enhancement which will eliminate the need to flat the data.

You can track its progress at:

https://github.com/telerik/kendo-react/issues/46

Regards,
Stefan
Progress Telerik