I am building an Angular2 application where on one of the pages we have MultiSelect component. Upon typing minimum of 3 characters it makes web service call and starts to show possible matches. When we select items in MultiSelect and save; I am saving ID's of the selected items in a table which is there just to save selected id's from the multiselect. To retrieve the data back in my web api call I am returning the object type which has all the information to display what I had save earlier in MultiSelect which includes Code as well as rest of supporting fields in CPTdata
My problem is when I browse to the page where I have MultiSelect control the selected value does not bind/display to the control. I looked at the web api response and validate that the selected values along with supporting fields are present there. Is there some other step I need to complete in order to display the saved values that I had selected earlier ?
Here is my html code:
<
kendo-multiselect
id
=
"txtCptCode"
#CptCodemultiselect
[filterable]="true"
(filterChange)="handleCptFilter($event)"
[data]="CPTdata"
[textField]="'Code'"
(valueChange)="CptValueChange($event)"
[valueField]="'CptId'"
[(ngModel)]="Model.CPTCodes">
</
kendo-multiselect
>
Here is handleCptFilter
handleCptFilter
(value: any) {
if
(value
.length
>=
3
) {
this
.cptRequest
.value
= value;
this
._surgeryRequestFormService
.getCPTByCodeOrDesc1
(
this
.cptRequest
)
.subscribe
(
data => {
this
.CPTdata
= data;
},
error => {
console
.log
(
"Error"
, error);
}
)
}
else
{
console
.log
(
"Do nothing"
);
}
};
Here is CptValueChange
public
CptValueChange
(value: any):
void
{
var _this =
this
;
var model =
new
surgeryReservationModel
();
if
((
this
.CPTdata
!= null) && (value != null || undefined ||
""
)) {
for
(let entry of
this
.CPTdata
) {
for
(let selectedCPT of value) {
if
(entry
.Code
== selectedCPT
.Code
) {
var CPTDescription;
if
(_this
.Model
.CPTDescription
!= null)
{
CPTDescription = _this
.Model
.CPTDescription
;
_this
.Model
.CPTDescription
= (CPTDescription +
"\n"
+ entry
.ShortDescription
);
}
else
if
(_this
.Model
.CPTDescription
== null)
{
_this
.Model
.CPTDescription
= entry
.ShortDescription
;
}
// _this.surgeryReservationModel.CPTCodeId = entry.CptId;
console
.log
(
"CPT Description is "
+
""
+ _this
.Model
.CPTDescription
);
break
;
}
}
}
console
.log
(
"valueChange"
, value);
}
}