如何在我的剑道网格中添加其他表格的下拉菜单

Question

所以我想下拉其他表中存在的项目，并且我希望使用 asp.net Mvc 将它们放在我的剑道网格中，那么我该怎么做？

我尝试从绑定另一个表的下拉列表的另一个模型中获取主模型中的 2 列名称

Answer 1

@型号列表;

@section Scripts {
    <script>
        $(document).ready(function () {
            var dataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/Grid/Getall",
                        dataType: "json"
                    },
                    create: {
                        url: "/Grid/Add",
                        type: "post",
                        dataType: "json"
                    },
                    update: {
                        url: "/Grid/Update",
                        type: "post",
                        dataType: "json"
                    },
                    destroy: {
                        url:function(data){
                            return "/Grid/Delete/"+data.c_id
                        },
                        type: "post",
                        dataType: "json"

                    }
                },

                pageSize: 10,
                schema: {
                    model: {
                        id: "c_id",
                        fields: {
                            c_id: { type: "number", editable: false },
                            c_name: { type: "string" },
                            c_image: { type: "string" },
                            c_skill: { type: "string" },
                            c_date: { type: "string" },
                            c_gender: { type: "string" },
                            c_cityid: { type: "number" },

                        }
                    }
                }
            });

            $('#grid').kendoGrid({
                dataSource: dataSource,
                columns: [
                    { field: "c_id", title: "Id" },
                    { field: "c_name", title: "Name" },
                    {
                        field: "c_image",
                        title: "City Photo",
                        editor: imgEditor,
                        template:"<img src='#: c_image #' alt='Image' style='max-width:100px; max-height:100px;' />"
                    },

                        { 
                            field: "c_skill", 
                            title: "Skill" ,
                            editor: skillEditor
                          
                        },
                    { 
                        field: "c_date", 
                        title: "Date" ,
                        template: "#= kendo.toString(kendo.parseDate(c_date), 'yyyy-MM-dd') #",
                        editor:dateEditor
                    },

                    { 
                        field: "c_gender", 
                        title: "Gender" ,
                        editor:genderEditor
                    },

                    { 
                        field: "c_cityid",
                        title: "City",
                        editor:cityEditor
                    },


                    { command: ["edit", "destroy"], title: "Action" }
                ],



                editable: "popup",
                toolbar: ["create"],
                pagable: true,
                sortable: true,
                filterable: true,
            });




            function imgEditor(container, options) {
            $('<input type="file" name="c_image" accept="Images/*" />').appendTo(container)
                .change(function () {
                    var file = this.files[0];
                    if (file) {
                        var reader = new FileReader();
                        reader.onload = function (e) {
                            options.model.c_image = file.name;
                            options.model.c_image = e.target.result;
                        };
                        reader.readAsDataURL(file);
                    }
                });
            }

            function dateEditor(container, options) {
            $('<input required name="' + options.field + '">')
                .appendTo(container)
                .kendoDatePicker();
            }

            function cityEditor(container, options) {
            $('<input required name="' + options.field + '">')
                .appendTo(container)
                .kendoDropDownList({
                    dataTextField: "c_cname",
                    dataValueField: "c_cid",
                    dataSource: {
                        transport: {
                            read: {
                                url: "/Grid/GetCities",
                                dataType: "json"
                            }
                        }
                    },
                    optionLabel: "--Select City--"
                });
            }  

            function skillEditor(container, options) {
            var checkboxWrapper = $('<div>').appendTo(container);

            checkboxWrapper.kendoCheckBoxGroup({
                items: [
                    { label: "Design", value: "Design" },
                    { label: "Develop", value: "Develop" }
                ],
                layout: "horizontal"
            });

            var checkboxGroup = checkboxWrapper.data("kendoCheckBoxGroup");
            checkboxGroup.value(options.model.c_skill.split(','));
            checkboxGroup.bind("change", function (e) {
                var selectedHobbies = e.sender.value().join(',');
                options.model.set("c_skill", selectedHobbies);
            });
            }

            function genderEditor(container, options) {
            $('<input type="radio" name="c_gender" value="Male" />Male<br/>')
                .add($('<input type="radio" name="c_gender" value="Female" />Female<br/>'))
                .appendTo(container);
            }

        });
    </script>
}