How to implement foreign Key dropdown in popup editor template using Angular

[Bill]

I'm stumped on how to implement a foreign Key dropdownlist in a custom popup editor template for a grid.  The scenario is quite common so I'm curious as to why I can't find an implementation of this.  For example, say you have an Orders table with an inter column called CustomerId.  This is a foreign key to a table called Customer, which also has the column CustomerName.  Now I build a grid for orders and I want to use a custom popup editor template because I want to change the layout.  How do I provide my user the ability to use a "Customer" dropdownlist that is populated with all the customers and id edit mode, is pre-selected to the current dataItems CustomerId?

I have tried creating a custom dropdown editor template with it's own datasource and it seems to work for the non-custom template, but it DOESN'T work for a custom one.  How do you bind this?   There does not appear to be an easy way to get to $scope to set the widget's datasource.

 Environment:  Kendo 2016.1.112,  AngularJS v1.3.15,  Windows 7 64bit,  Google Chrome Version 38.0.2125.111 m

            $scope.customers = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: 'api/customers',
                        dataType: 'json',
                        type: 'GET'
                    },
                },
                schema: {
                    model: {
                        id: "customerId",
                        fields: {
                            customerId: { type: "number" },
                            customerName: { type: "string" },
                        }
                    }
                },
                serverPaging: false,
            }),

            $scope.customerDropDownEditor = function customerDropDownEditor(container, options) {
                //specify the value field in the "data-bind" attribute
                $('<input required data-text-field="customerName" data-value-field="customerId" data-bind="value:customerId"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: $scope.customers
                });
            },

[Alexander Valchev]

Hello Bill,

This help topic shows how to create custom editor in a custom popup edit template.

Regards,
Alexander Valchev
Telerik

 

 

[Bill]

If you run the 'Preview' demo from your help topic link, you will see that the dropdown in the popup is NOT bound to the data.  Pick any item other than Chai and click Edit.  It is not bound.  The dropdown always displays Chai because it is the first item in the datasource.  This demo also doesn't fully capture the problem. The secondary datasoource (productNames in your example) should have an id column and bind to the grid's datasource by id and then display the value of ProductName. I would imagine this worked in the past so I'm wondering if a bug was introduced in an update ???

[Alexander Valchev]

Hi Bil,

There is a mistake in the documentation. Please accept my apology for the inconvenience caused.
In the template the developer has to use Kendo MVVM value binding, so instead of ng-model a data-bind="value: ProductName" should be used.

Here is a link to the updated example: http://dojo.telerik.com/oJOqe

The documentation will be updated shortly.

Regards,
Alexander Valchev
Telerik