CODEWITHSUNDEEP
angularkendo-ui
Tom
Tom

Reputation: 8701

Angular Kendo-dropdownlist error data.map is not a function

I am implmenting a Kendo dropdownlist in angular 7 application. I am trying to bind the object FundClass to the dropdown. I passing the fundclass object from parent conponent to child component and binding that data to dropdown in the child component. The data does get bound and can see the data in the drop down control but When I select a dropdown item, I get the error below

data.map is not a function
    at DropDownListComponent.push../node_modules/@progress/kendo-angular-dropdowns/dist/es/dropdownlist.component.js.DropDownListComponent.findDataItem (dropdownlist.component.js:949)

The json structure of the data that I am binding

"[{"FundClassId":13714,"FundClass":"Class D"},{"FundClassId":13717,"FundClass":"Class B"},{"FundClassId":13713,"FundClass":"Class A"},{"FundClassId":13716,"FundClass":"Class B1"},{"FundClassId":13715,"FundClass":"Class C"}]"

Parent Component

The data object here contains FundClass object.

getManagerStrategyFunds() {
        this.strategyService.getManagerStrategyFunds(this.ManagerStrategyId, this.ValueDate)
            .subscribe((data: any) => {
                this.ViewModel = data;
               this.GridOptions.rowData = data.SummaryPerformance;
               this.FundPerformance = data.SummaryPerformance;
            },
            err => {
                this.Error = 'An error has occurred. Please contact BSG';
            },
            () => {
            });
    }

Parent Component html. Passsing the object ftr.FundClass

 <div class="panel panel-default">
        <div class="panel-heading product-heading">
            <span style="font-size: 14px; font-weight: bold;">Performance Track Record and Statistics</span>
        </div>
        <div  *ngIf ="ViewModel.FundPerformance">
            <div class="panel-body" style="width:100%">
                <div *ngFor="let ftr of ViewModel.FundPerformance">
                    <fund-statistics [fundStatistics]="ftr.FundStatistics"  [fundTrackRecord]= "ftr.TrackRecord" [fundName]="ftr.FundName" 
                                     [benchMark1Name]="ftr.BenchmarkName1" [benchMark2Name]="ftr.BenchmarkName2" [fundclass]="ftr.FundClass" ></fund-statistics>
                </div>
            </div>
        </div>   
    </div>

Child component

@Input() fundclass: any;

    flashClassChanged(e) {

    }

Child compoenent html

 <kendo-dropdownlist style="width:170px" [data]="fundclass" [filterable]="false"
            [(ngModel)]="fundclass" textField="FundClass" (valueChange)="flashClassChanged($event)"
            valueField="FundClassId"></kendo-dropdownlist>

Upvotes: 1

Views: 1192

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115282

The problem lies in the model binding you are using the same property to the element while binding(used for data). Change it to something else otherwise, when you changing the value the selected value will be set as fundclass property value but dropdown data should be an array. Within plugin, they are expecting an array and map function will only work with an array but when you select a value data value updated to an object.

Template :

<kendo-dropdownlist style="width:170px" [data]="fundclass" [filterable]="false"
        [(ngModel)]="fundclassSelected" textField="FundClass" (valueChange)="flashClassChanged($event)"
        valueField="FundClassId"></kendo-dropdownlist>

TS : 

@Input() fundclass: any;

fundclassSelected:any;

flashClassChanged(e) {

}

Upvotes: 1

Related Questions