Angular: Change KendoDropdown Data Selected With Typescript

Question

Below is how to bind to remote Data in Kendo Angular.

How do I change the selected dropdown with accepted event that would change the input selected in Kendo dropdown?

https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/data-binding/

import { Component, OnInit, Inject } from '@angular/core';
import { DataService } from './data.service';
import { Product } from '../common/product.model';

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist [data]="listItems"
      [textField]="'ProductName'"
      [valueField]="'ProductID'"
      [defaultItem]="placeHolder" >
    </kendo-dropdownlist>
  `,
  providers: [DataService]
})
export class AppComponent implements OnInit {
    public listItems: Array<Product> = [];
    public placeHolder: Product = { ProductName: 'Select product...', ProductId: null };

    constructor (@Inject(DataService) private dataService: DataService) { }

    ngOnInit() {
      this.dataService.fetchData().subscribe(
        (data) => this.listItems = data
      );
    }
}

I want inject something like this above in typescript. Say IdSelected = 3,

My Code research

this.dataservice.currentMessage.subscribe(currentMessage => {
  this.valueField = currentMessage.IdSelected();
})

Can you elaborate it more? i didn't get what exactly you are trying to do. — Shreenil Patel
how do I change the value selected in a dropdown with typescript? so it then renders into screen? — user12250118

Shreenil Patel Shreenil Patel · Accepted Answer · 2019-11-08T10:11:48

You can use forms for binding value to the kendo control.

TS:

public selectedValue: number;
ngOnInit() {
   this.dataService.fetchData().subscribe(
     (data) => {
         this.listItems = data;
         this.selectedValue = data[0].productId;
        }
     );
 }

HTML:

<kendo-dropdownlist [data]="listItems"
  [(ngModel)]="selectedValue"  <!-- Here it is -->
  [textField]="'ProductName'"
  [valueField]="'ProductID'"
  [defaultItem]="placeHolder" >
</kendo-dropdownlist>

Angular: Change KendoDropdown Data Selected With Typescript

1 Answers