如何访问Kendo UI Grid DropDown-Editor的选定文本/值?

时间:2015-03-31 13:08:05

标签: user-interface kendo-ui kendo-grid

我有一个带可编辑字段的网格。如果我添加新记录,我会将所选条目视为[对象对象]。但我想要的是"文本"的条目。怎么做到这一点?

  <!DOCTYPE html>
  <html>
  <head>
      <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css">
      <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css">
      <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
      <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
  </head>
  <body>
    <h3>Kendo UI Grid DropDown-Editor: How to access the selected text/value?</h3>
    <div id="grid"></div>
    <script>
       function nameDropDownEditor(container, options) {
           $('<input data-text-field="nameText" data-value-field="nameValue" data-bind="value:' + options.field + '"/>')
               .appendTo(container)
               .kendoDropDownList({
                   dataSource: [
                       { nameText: "Jane",  nameValue: 100 },
                       { nameText: "Mike",  nameValue: 200 },
                       { nameText: "Harry", nameValue: 300 }
                   ],
               });
       }

      $("#grid").kendoGrid({
        toolbar: ["create"],
        columns: [
          { field: "id" },
          { field: "name", editor: nameDropDownEditor },
          { field: "age" }
        ],
        dataSource: [
          { id: 3030, name: "Jane", age: 30 },
          { id: 5353, name: "Harry", age: 53 }
        ],
        editable: "popup"
      });
    </script>
  </body>
  </html>

此屏幕截图显示了选择后的结果: http://i.imgur.com/PEhRt47.png

1 个答案:

答案 0 :(得分:0)

您是否尝试过为下拉列表提供id并绑定到save事件:

...网格标记

.Events(events => events.Save("Grid_Save")

并在保存事件中

function Grid_Save(e) {
    var nameValue = $("#dropdownName").data().kendoDropDownList.value();
      //do something with the value
}