如何从剑道网格中的剑道下拉列表中获取选定的值？

Question

我有一个启用了批处理编辑的剑道网格，其中包含一个下拉列表。我可以在尝试保存批处理信息时读取网格的其他字段，但很难读取下拉列表的选定值。这是我的网格代码：

  $(document).ready(function () {
            $("#grid").kendoGrid({
                dataSource: datasource,
                navigatable: true,
                pageable: true,
                height: 430,
                sortable: true,
                editable: true,
                selectable: "multiple row",
                groupable: true,
                navigatable: true,
                filterable: true,
                toolbar: ["create", "cancel"],
                columns: [

                    { field: "EmployeeID", title: "Employee ID", width: 110 },
                    { field: "EmployeeName", title: "Employee Name", width: 110 },
                    { field: "Category", title: "Category", editor: categoryDropDownEditor, width: 50 },

                    { command: "destroy", title: "Delete", width: 90 }
                ],



            });
        });

这是下拉列表的代码：

 function categoryDropDownEditor(container, options) {
            $('<input required data-text-field="CategoryName" data-value-field="CategoryID" data-bind="value:' + options.field + '" id="test"/>')
                .appendTo(container)
                .kendoDropDownList({
                    dataTextField: "EmployeeName",
                    dataValueField: "EmployeeID",
                    optionLabel: "Select",
                    autoBind: false,

                    //index: 0,
                    //change: onChange,
                    dataSource: new kendo.data.DataSource( {

                        transport: {
                            read: {
                                url: "/Home/Category",
                                type: "GET"
                            },
                            schema:{
                                model: {
                                    ID: "CategoryID",
                                    Value: "CategoryName"
                                }
                            }
                        }
                    })
                });
        }

这是我试图保存值的代码：

function Save() {


        var EmployeeInfo = { "EmployeeID": "", "EmployeeName": "", "CategoryID": "" };

        var CompanyInfo = { "CompanyID": "", "CompanyName": "", "Employee": [] };

        CompanyInfo.CompanyID = $("#CompanyID").val();
        CompanyInfo.CompanyName = $("#CompanyName").val();

        var drop = $("#test").data("kendoDropDownList");

        var GridData = $("#grid").data("kendoGrid");

        var data = GridData.dataSource.data();
        for (var i = 0; i < data.length; i++) {

            var item = data[i]; //Got the dropdown selected value & text here, just need to assign that value to the CategoryID attribute!
            EmployeeInfo.EmployeeID = item.EmployeeID;
            EmployeeInfo.EmployeeName = item.EmployeeName; 
            EmployeeInfo.CategoryID = item.CategoryID[0];  //Problem is here in assinging data!!
            CompanyInfo.Employee.push(EmployeeInfo);
            EmployeeInfo = { "EmployeeID": "", "EmployeeName": "" };


        }


        $.ajax({
            url: '/Home/Create',
            data: JSON.stringify(CompanyInfo),
            type: 'POST',
            contentType: 'application/json;',
            dataType: 'json'

        });
    };

如何获取下拉列表的选定值？另一个问题是，在下拉列表中选择一个项目后，当我移动到另一行网格时，下拉列表中的选定文本会发生变化，而是显示 [object, object]。请帮忙。谢谢。

Answer 1

问题是您试图从Save 函数访问 DropDownList，而input 很可能不再存在。您应该像访问其他字段一样简单地访问该字段。 editor 函数会更新字段，因为它是一个 可观察 对象。

尝试做：

for (var i = 0; i < data.length; i++) {
    var item = data[i];
    EmployeeInfo.EmployeeID = item.EmployeeID;
    EmployeeInfo.EmployeeName = item.EmployeeName; 
    EmployeeInfo.CategoryID = item.Category,
    CompanyInfo.Employee.push(EmployeeInfo);
    EmployeeInfo = { "EmployeeID": "", "EmployeeName": "" };
}

顺便说一句，我不确定在将数据发送到服务器之前要进行的处理，但通常人们在DataSource.transport 中使用create、update 和destroy。它用于简化您的开发并让您免于进行ajax 调用。

Answer 2

您可以通过使用 jquery 传递标签名称来获取选定的值。 试试这个

$('#grid select option:selected').val(); // for val


$('#grid select option:selected').text(); // for text

Answer 3

当从下拉列表中选择一个值时，在 select 事件中，我们可以得到如下选择的值，

@(Html.Kendo().DropDownList()
              .Name("booksDropDown")
              .HtmlAttributes(new { style = "width:37%" })
              .DataTextField("BookName")
              .DataValueField("BookId")
              .Events(x => x.Select("onSelectBookValue"))
              .DataSource(datasource => datasource.Read(action => action.Action("ReadBookDropDow", "PlanningBook").Type(HttpVerbs.Get)))
              .OptionLabel("Select"))

javascript函数如下，

      function onSelectBookValue(e) {    

                    var dataItem = this.dataItem(e.item.index());
                    var bookId = dataItem.BookId;
//other user code
    }

我相信这会对某人有所帮助

谢谢