Angular2 MultiSelect not binding to the returned response

6 posts, 0 answers
  1. yamaha
    yamaha avatar
    7 posts
    Member since:
    Sep 2015

    Posted 22 May 2017 Link to this post

    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);
        }
    }
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 24 May 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. yamaha
    yamaha avatar
    7 posts
    Member since:
    Sep 2015

    Posted 24 May 2017 in reply to Alexander Valchev Link to this post

    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

     

  4. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1205 posts

    Posted 26 May 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. yamaha
    yamaha avatar
    7 posts
    Member since:
    Sep 2015

    Posted 01 Jun 2017 Link to this post

    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. 
  6. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    1205 posts

    Posted 02 Jun 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top