I'm currently utilizing Devextreme within my Angular application, and I have three dx-selectbox elements in the component. I am attempting to clear all three dropdown selections when clicking a "clear" button. Unfortunately, I am unable to find a way to reset or clear the selectboxes.
[HTML]
<dx-box direction="row" width="90%" style="padding-top: 3vw">
<dxi-item [ratio]="1">
<dx-select-box [dataSource]="shipToData" (onValueChanged)="onShipToChanged($event)" [stylingMode]="'underlined'" style="width: 20vw"></dx-select-box>
</dxi-item>
<dxi-item [ratio]="1">
<dx-select-box [dataSource]="poData" (onValueChanged)="onPOChanged($event)" [stylingMode]="'underlined'" style="width: 20vw"></dx-select-box>
</dxi-item>
<dxi-item [ratio]="1">
<dx-select-box [dataSource]="salesOrderData" (onValueChanged)="onSalesOrderChanged($event)" [stylingMode]="'underlined'" style="width: 20vw"></dx-select-box>
</dxi-item>
</dx-box>
Additionally, in my component, I have the following code:
[TypeScript]
onShipToChanged(e) {
this.selectedShipTo = e.value;
.......
e.value = "";
}
onPOChanged(d) {
this.selectedPO = d.value;
......
d.value = "";
}
onSalesOrderChanged(g) {
this.selectedSO = g.value;
........
g.value = "";
}
clear() {
debugger;
this.selectedSO = "";
this.selectedPO = "";
this.selectedShipTo = "";
}
onValueChanged(s: any) {
}