dxSelectBox when store object as the value and not just key.
Indrajeetsing opened this issue · 3 comments
In HTML
<dx-select-box [items]="products" [value]="selectedItem" displayExpr="name" ></dx-select-box>
In component.ts
products = [ { name: 'TV', isAvailable: true, id: 1}, { name: 'Fridge', isAvailable: true, id: 2}, { name: 'Remote', isAvailable: false, id: 3} ];
selectedItem = { name: 'TV', isAvailable: true, id: 1};
it works when I pass reference to selectedItem for ex. selectedItem = this.products[0]
In Material they have compareWith to handle this. But I couldn't find anything in devextreme-angular.
Hi @Indrajeetsing,
You need to specify valueExpr for your select box to be able to use an ID to select an item. See: https://js.devexpress.com/Documentation/ApiReference/UI_Widgets/dxSelectBox/Configuration/#valueExpr
Hello @LexDX ,
Thing is I don't want to store id as value. I want to store the whole object as value.
In this case, it is necessary to use the approach you referenced in your initial answer. There is no other way to accomplish this task. Our control is intended to work with unique IDs, so when you do not specify a key, our control works with the entire item. And, since this specific scenario is not the main one in our control, our control does not have a way to compare items from different collections.