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

4 posts, 1 answers
  1. Bill
    Bill avatar
    31 posts
    Member since:
    Mar 2013

    Posted 27 Jan Link to this post

    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
                    });
                },

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 29 Jan Link to this post

    Hello Bill,

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

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Bill
    Bill avatar
    31 posts
    Member since:
    Mar 2013

    Posted 29 Jan in reply to Alexander Valchev Link to this post

    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 ???
  5. Answer
    Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 02 Feb Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready