selected value not working in kendo-dropdownlist

[Chau]

I have this plunker setup with the columns 'FileId Selected' (showing the selected value from the dropdownlist) and 'File Lists' (dropdownlist).

https://plnkr.co/edit/8dhH14k9HTwgdAA4fXsb?p=preview

I would expect to see the first row of the grid 'Hospital A' to show the value "1111 file" highlighted in the dropdownlist on initial rendering, but it does not. Could someone tell me if I missed some setting?

Thanks!

[Dimiter Topalov]

Hi Chau,

The observed undesired behavior is caused by a discrepancy in the DropDownList's value binding. Binding the DropDownList as a form control would require an actual form and proper binding for the form fields (either a template or model driven (reactive) one), as demonstrated in the Grid editing online demos, e.g.:

https://www.telerik.com/kendo-angular-ui/components/grid/editing/custom-reactive-editing/

... and in the HowTo example for rendering editing UI in the Grid cell templates:

https://www.telerik.com/kendo-angular-ui/components/grid/how-to/render-editors-in-cell-template/

Here is the updated example with the "name" attribute of the DropDownList set to reflect the respective field:

https://plnkr.co/edit/3MNCCzkeSvY7524TY1H1?p=preview

You can also utilize the DropDownList's built-in value binding mechanism and do not use forms at all:

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

Using the component's value property seems to yield the desired behavior too:

https://plnkr.co/edit/4zB8kncp2o3lAY96h9xD?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[John]

Unfortunately the plnkr links no longer work, in future, it would be useful to paste some of the important bits  of code here, so the answer is still useful, thanks.

[Dimiter Topalov]

Hello John,

Indeed some outdated examples are no longer runnable, but typically the code from the older plunkr demos can be copied and pasted in a working Stackblitz demo (open a runnable demo from the respective component's examples from our documentation site and replace the app.component.ts and other relevant code).

Here are the demos from the above post with the code transferred to Stackblitz:

- Here is the updated example with the "name" attribute of the DropDownList set to reflect the respective field:
https://stackblitz.com/edit/angular-rvxkvf-itsbd4?file=app%2Fapp.component.ts

 

- Using the component's value property seems to yield the desired behavior too:

https://stackblitz.com/edit/angular-rvxkvf-shapkw?file=app%2Fapp.component.ts

 

[John]

Thanks very much Dimiter, that's really helpful, really appreciate it!