【问题标题】:Get selected dropdown value in inside kendo grid在剑道网格内获取选定的下拉值
【发布时间】:2018-07-08 01:45:16
【问题描述】:

要求:更新记录时如何在剑道网格中获取选定的下拉值

通过使用剑道编辑器,我在网格列中实现了下拉,我想保存 datavaluefiled 值

数据源 ID:1,兴趣名称:cricket 编号: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 示例,那就太好了。

标签: javascript kendo-ui kendo-grid


【解决方案1】:

我认为您可能绑定到模型上的错误属性。另外,尝试将下拉列表的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,View-Model 字段将使用选定的项目值字段进行更新。如果设置为 false,View-Model 字段将使用所选项目进行更新。

希望这会有所帮助。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-07-14
    • 2014-07-09
    • 2013-09-15
    • 2014-01-29
    • 1970-01-01
    • 1970-01-01
    • 2012-07-14
    • 1970-01-01
    相关资源
    最近更新 更多