Question

作为kendo Vue的新用户，我使用下拉/组合框自定义了kendo弹出编辑编辑器。查看以下链接。希望会对需要此功能的人有所帮助。

我正在尝试将下拉列表和图像显示到编辑模板中无法正常工作，但代码不在此处。

https://stackblitz.com/edit/8qr6dx-sfuuei?file=index.js

OR

https://stackblitz.com/edit/8qr6dx-co9z61?file=index.js

添加必要的依赖项

new Vue({
el: '#vueapp',
data () {
    return {
      category: [
        { "CategoryID" : 1, "CategoryName": "Beverages"},
        { "CategoryID": 2, "CategoryName": "Condiments"},
        { "CategoryID": 3, "CategoryName": "Desserts, candies"},
      ],

        localDataSource: {
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        UnitPrice: { type: 'number', validation: { required: true, min: 1 } },
                        Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },
                        Discontinued: { type: 'boolean', defaultValue: false }
                    }
                }
            },
            data: [{
                "ProductID": 1,
                "ProductName": "Chai",
                "UnitPrice": 18,
                "UnitsInStock": 39,
                "Discontinued": false,
                "CategoryID": 1,

            },
            {
                "ProductID": 3,
                "ProductName": "Aniseed Syrup",
                "UnitPrice": 10,
                "UnitsInStock": 13,
                "Discontinued": false,
               "CategoryID": 3,

            },
            {
                "ProductID": 4,
                "ProductName": "Chef Anton",
                "UnitPrice": 22,
                "UnitsInStock": 53,
                "Discontinued": false,
                "CategoryID": 2,

            },
            {
                "ProductID": 6,
                "ProductName": "Boysenberry Spread",
                "UnitPrice": 25,
                "UnitsInStock": 120,
                "Discontinued": false,
                "CategoryID": 3,

            }]
        }
    }
},
methods: {
    categoryDropDownEditor: function(container, options) {
        $('<input required name="' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: true,
                dataTextField: "CategoryName",
                dataValueField: "CategoryID",
                dataSource:this.category
            });
    },

   getCategory: function(dataItem){
      let CatID = dataItem.CategoryID;
      let columns = this.category;   
       for (let i = 0; i <columns.length; i++) {
         if(columns[i].CategoryID == CatID ){
            return columns[i].CategoryName;
         }

       }
        return '';

    }
}

}）

`<div id="vueapp" class="vue-app">
<kendo-grid :height="600"
            :data-source="localDataSource"
            :editable="'popup'"
            :toolbar="['create', 'save', 'cancel']">
   <kendo-grid-column :command="['edit','destroy']"
                       :title="'&nbsp;'"
                       :width="100"></kendo-grid-column>
    <kendo-grid-column :field="'ProductName'"></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'"
                       :editor="categoryDropDownEditor"
                       :template="getCategory" 
                       :width="180"></kendo-grid-column>
    <kendo-grid-column :field="'Discontinued'" :width="120"></kendo-grid-column>

</kendo-grid>

`

使用Kendo Vue JS中的模板的带有下拉列表/组合框的网格弹出编辑器

0 个答案: