Hi everybody.
In customer's address information view, there are drop down lists showing Country and State (yellow). I extended this view adding a new drop down list that shows cities' names as aditional information (red).
Within the HTML that I created for this extension the select tag has the following attributes:
<select id="CitiesId"
data-bind="options: _cities,
optionsText: 'cityname',
optionsValue: 'citycode',
value: CitiesValue,
optionsCaption: 'Select the City',
attr: { 'title': 'City' }">
</select>
In typescript, I can easily bind this control declaring a variable as
public CitiesValue: Observable<string> // CitiesValue as the select tag value property
And later, in the constructor of the typescript class:
this.CitiesValue= ko.observable("");
this.CitiesValue.subscribe((newValue: string): void => {
this._addOrUpdateExtensionProperty("CitiesId", <ProxyEntities.CommercePropertyValue>{ StringValue: newValue }); // CitiesId as the select tag id. _addOrUpdateExtensionProperty sample pos extension method.
// Do wathever I want
});
In this way I can detect any change in the City drop down list to set in the City field the code of the City.
But I can't perform this for the standard control drop down list State to set a county code in the County field.
The state control has the following html tag.
My question is: how can I bind the control using an Observable to detect the changes?
I can detect changes adding a listener to the control but in this way, the data is not saved.
My typescript class extends AddressAddEditCustomControlBase.