在Kendo网格中获取下拉列表选定的值

3

需求: 如何在更新记录时获取kendo网格中选定的下拉框值

通过使用kendo编辑器,我已经在网格列中实现了下拉框,并且我想要保存datavaluefiled值

数据源 ID:1,兴趣名称:板球 Id:2,兴趣名称:足球 在提交时,我只需要保存值i:e Id

    <html>
<head>
    <title></title>
</head>
<body>
    <div id="grid-container"></div>

    @*Scripts*@
    <script type="text/javascript">
        $(document).ready(function () {
            debugger
            var gridDataSource = new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/KendoGrid/GetStudents",
                        dataType: "json"
                    },

                    update: {
                        url: "/KendoGrid/CreateOrUpdate",
                        dataType: "json"
                    },
                    create: {
                        url: "/KendoGrid/CreateOrUpdate",
                        dataType: "json"
                    },
                    destroy: {
                        url: "/KendoGrid/DeleteDetails",
                        dataType: "json"
                    },
                    parameterMap: function (options, operation) {
                        debugger
                        if (operation !== "read" && options) {
                            return options;
                        }


                    }
                },

                pageSize: 5,
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Id: { editable: false, nullable: true },
                            Name: { editable: false, validation: { required: true } },
                            FatherName: { type: "text", validation: { required: true, min: 1 } },
                            DateOfBirth: { type: "date" },
                            Address: { type: "text", validation: { min: 0, required: true } },
                            Email: { type: "email", validation: { min: 0, required: true } },
                            Phone: { type: "text", validation: { min: 0, required: true } },
                            StudnetInterest: { type: "text", validation: { min: 0, required: true } }
                        }
                    },

                    parse: function (data) {
                        debugger
                        if (!data.success && typeof data.success !== 'undefined') {
                            //notifier.logixNotifier("notifyError", data.message);
                            gridDataSource.read();
                        }

                        if (data.success) {
                            //notifier.logixNotifier("notifySuccess", data.message);
                            gridDataSource.read();
                        }

                        return data;
                    }

                }

            });

            $("#grid-container").kendoGrid({
                dataSource: gridDataSource,
                height: 550,
                groupable: true,
                sortable: true,
                toolbar: ["create"],
                pageable: {
                    refresh: true,
                    pageSizes: true,
                    buttonCount: 5,

                },
                columns: [
                    {
                        field: "Name",
                        title: "Name",
                        editable: false
                    },
                    {
                        field: "FatherName",
                        title: "Father Name",
                    },
                    {
                        field: "DateOfBirth",
                        title: "Date Of Birth",
                        format: "{0:MM/dd/yyyy}"
                    },
                    {
                        field: "Address",
                        title: "Address",
                    },
                    {
                        field: "Email",
                        title: "Email",
                    },
                    {
                        field: "Phone",
                        title: "Phone",
                        attributes: { hideMe: true }
                    },
                    {
                        field: "StudnetInterest",
                        title: "Student Interest",
                         editor: interestsDropdown,
                        values: interestsDropdown
                    },
                    { command: ["edit", "destroy"], title: "&nbsp;", width: "250px" }
                ],
               // editable: "inline"
                editable: "popup"


            });
        });
        @*drop down Data Source*@
        var dropDownDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    dataType: "json",
                    url: "/KendoGrid/GetInterest",
                },

            }
        });
        function interestsDropdown(container, options) {
            debugger
            $('<input required name="' + options.field + '" id="dropintrest" onchange="drop(this)"/>')
                .appendTo(container)
                .attr('data-bind', 'value:Id')
                .kendoDropDownList({
                    autoBind: false,
                    dataTextField:"InterestName",
                    dataValueField:"Id",
                    dataSource: dropDownDataSource,

                });

        }
        function drop(event) {
            debugger
      var data=   $("#dropintrest").data("kendoDropDownList");


        }


    </script>
</body>
</html>

我认为你可以在 parameterMap 中实现这个功能,但我现在无法测试它。如果你能够创建一个 dojo.telerik.com 的示例就太好了。 - DontVoteMeDown
1个回答

2

我认为你可能在模型上绑定了错误的属性。另外,请尝试将您下拉列表的valuePrimitive属性设置为true

        $('<input required data-bind="value:' + options.field + '" name="' + options.field + '" id="dropintrest" onchange="drop(this)"/>')
            .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataTextField:"InterestName",
                dataValueField:"Id",
                dataSource: dropDownDataSource,
                valuePrimitive: true
            });

根据文档:
如果设置为true,则视图模型字段将使用所选项目值字段更新。 如果设置为false,则视图模型字段将使用所选项目进行更新。
希望这有所帮助。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接