Angular2 MultiSelect not binding to the returned response

[yamaha]

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);
    }
}

[Alexander Valchev]

Hi,

Thank you for getting in touch with us.

Could you please confirm that the Model.CPTCodes contains array with objects? I read that you have examined the WebAPI response, but is there any chance that the server returns JSON string or objects wrapped inside a parent object? The MultiSelect will display its values only if the Model.CPTCodes contains array.

Also, did you checked the developer console for any errors or warnings that might give us a clue what exactly is going wrong?

Looking forward to your reply!

Regards,
Alexander Valchev
Telerik by Progress

[yamaha]

Hi Alexander,

 

    The developer console does not show any errors or warnings. I checked the Model response as you suggested and in there there we have CPTCodes array which looks like this.

{"Data":{"DivisionRequestId":2,"CPTCodes":[{"CPTId":2348,"Code":"12345     ","ShortDescription":"Test Data - 12345","LongDescription":"Test Data Long description - 12345","IsActive":true},{"CPTId":24465,"Code":"L1234     ","ShortDescription":"Short Desc test data","LongDescription":"Long desc test data","IsActive":true}]},"ResponseType":1,"Messages":[]}

 

Thanks,

Akshay

 

[Dimiter Topalov]

Hello Akshay,

The provided snippets suggest that the valueField of the MultiSelect component ('CptId') does not match the casing of the actual model field - "CPTId". When both fields have the same casing, the ngModel binding occurs as expected:

http://plnkr.co/edit/CQoGpBYQoLcV6zOZIYsJ?p=preview

I hope this helps, but if applying the necessary adjustments to your implementation does not resolve the issue, please send us a similar isolated runnable project where the undesired behavior can be observed, so we can inspect it further, and try determining what might be causing it. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[yamaha]

Hi Dimiter. Thanks for the reply. I was able to find the problem as well. It was same as you mentioned. The casing was not matching to the actual model. 

[Dimiter Topalov]

Hi Akshay,

I am glad to find out that the issue is resolved. This thread will be closed, but you can always reopen it, or start a new one, if you have any other questions.

Regards,
Dimiter Topalov
Progress Telerik