Foreign-Key Columns

You can implement a foreign-key column in the Kendo UI Grid wrapper for Vue.

The following example demonstrates how to define a foreign-key column through the CategoryID key field which hosts a custom DropDownList editor for data editing. Use the column definition to set the key field as field property. The values property points to the source data for the items displayed in the drop-down list editor of that column. The values of the editor items have to be of the same type as the key field.

<div id="vueapp" class="vue-app">
    <kendo-grid :data-source="localDataSource"
                :editable="true"
                :toolbar="['create', 'save', 'cancel']">
        <kendo-grid-column :field="'ProductName'" :width="180"></kendo-grid-column>
        <kendo-grid-column :field="'UnitPrice'"
                           :title="'Unit Price'"
                           :width="120"
                           :format="'{0:c}'"></kendo-grid-column>
        <kendo-grid-column :field="'CategoryID'"
                           :title="'Category'"
                           :width="180"
                           :values="categories"></kendo-grid-column>
        <kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>
        <kendo-grid-column :command="['destroy']"
                           :title="'&nbsp;'"
                           :width="100"></kendo-grid-column>
    </kendo-grid>
</div>
Vue.use(GridInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            categories: [
                { "value": 1, "text": "Beverages" },
                { "value": 2, "text": "Condiments" },
                { "value": 3, "text": "Confections" },
                { "value": 4, "text": "Dairy Products" },
                { "value": 5, "text": "Grains/Cereals" }
            ],
            localDataSource: {
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: { editable: false, nullable: true },
                            ProductName: { validation: { required: true } },
                            UnitPrice: { type: 'number', validation: { required: true, min: 1 } },
                            CategoryID: { field: "CategoryID", type: "number", defaultValue: 1 },
                            Discontinued: { type: 'boolean', defaultValue: false }
                        }
                    }
                },
                data: [{
                    "ProductID": 1,
                    "ProductName": "Chai",
                    "UnitPrice": 18,
                    "UnitsInStock": 39,
                    "Discontinued": false,
                    "CategoryID": 1
                },
                {
                    "ProductID": 4,
                    "ProductName": "Chef Anton",
                    "UnitPrice": 22,
                    "UnitsInStock": 53,
                    "Discontinued": false,
                    "CategoryID": 2
                },
                {
                    "ProductID": 5,
                    "ProductName": "Chef Gumbo Mix",
                    "UnitPrice": 21.35,
                    "UnitsInStock": 0,
                    "Discontinued": true,
                    "CategoryID": 2
                },
                {
                    "ProductID": 6,
                    "ProductName": "Boysenberry Spread",
                    "UnitPrice": 25,
                    "UnitsInStock": 120,
                    "Discontinued": false,
                    "CategoryID": 3
                }]
            }
        }
    }
})

In this article