This is a migrated thread and some comments may be shown as answers.

Multi select binding to complex object

4 Answers 594 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Paul
Top achievements
Rank 2
Iron
Veteran
Iron
Paul asked on 25 Mar 2019, 04:43 PM

I have an object 

 

export class NameGroup {

    nameGroupId: number;
    nameGroupString: string;
    sequence: number;
    creationDate?: Date;
    lastModifiedDate?: Date

}

and a component that has 

public nameGroups: Array<NameGroup> = [];
public selectedNameGroups: Array<NameGroup> = [];

 

the component template is as follows: 

<kendo-multiselect
    #nameGroupList
    [data]="nameGroups"
    [(ngModel)]="selectedNameGroups"
    textField="nameGroupString" 
    valueField="nameGroupId"
    [valuePrimitive]="false"
    name="nameGroupList"
></kendo-multiselect>

 

The object binding is not working. Will not show what values are selected in the input box even though the dropdown has them selected when it opens.

What am I doing wring? I know in previous versions of progress for angular you had to give the dropdown a function that could compare the objects. Is this still true?

 

4 Answers, 1 is accepted

Sort by
0
Paul
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 25 Mar 2019, 07:28 PM

So I figured it out...

1) changed array type to any for selected items.

    public selectedNameGroups: any[] = [];

2) Changed the way I was loading the data...

instead of adding NameGroup objects to the array. just load data straight from return of data service call ex.. nameGroups = [...data]

 

Not sure why I could not load name group objects into array or why this breaks the multiselect?

 

 

 

 

0
Svet
Telerik team
answered on 27 Mar 2019, 07:57 AM
Hi Paul,

I am not sure what caused the reported behavior. But it looks like a typescript related issue.

I further tried to reproduce the issue, but I could not. Check the following example:
https://stackblitz.com/edit/angular-y6tdsn?file=app/app.component.ts

Let me know in case I can provide any further assistance about this case.

Regards,
Svetlin
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Paul
Top achievements
Rank 2
Iron
Veteran
Iron
answered on 27 Mar 2019, 12:40 PM

After seeing your post, I was able to get it to work with the type safe array. I think the problem was actually solved by installing a couple of packages that were missing. One of which was @telerik/kendo-dropdowns-common and the other was @progress/kendo-angular-resize-sensor. However since I had made the above changes and installing the missing packages, it was working that way as well. 

 

Thanks, 

 

Paul

0
Svet
Telerik team
answered on 28 Mar 2019, 10:07 AM
Hi Paul,

To add a bit more about this case, if we follow the installation part of any Kendo UI for Angular component, all required dependencies will be automatically added. Check for example the installation of the DropDowns:
https://www.telerik.com/kendo-angular-ui/components/dropdowns/#toc-installation

Let me know in case any further assistance is require for this case.

Regards,
Svetlin
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Tags
MultiSelect
Asked by
Paul
Top achievements
Rank 2
Iron
Veteran
Iron
Answers by
Paul
Top achievements
Rank 2
Iron
Veteran
Iron
Svet
Telerik team
Share this question
or