如何从选定的 Kendo Grid 行中填充表单

Question

我有以下代码从选定的剑道网格中填充表单，网格是可选择的，我该如何修复以使其工作？

<script>
    $(function () {
        var grid = $("#AddressGrid").data("kendoGrid");
          fillForm(grid.dataItem);

      var fillForm = function(dataItem) {
        var columns = $("#AddressGrid").data("kendoGrid").options.columns;
        var form = $("form");

        for (var i = 0; i < columns.length; i++) {
          var field = columns[i].field;
          form.find("#" + field).val(dataItem[field]);
        }
      }
    });
</script>

这是我的表单的样子

<form>

    <label>ID:</label><br />
    <input type="text" id="AddressLine2" /><br />
    <label>Name:</label><br />
    <input type="text" id="City" /><br />
    <label>Last Name:</label><br />
    <input type="text" id="AddressID" />
</form>

Answer 1

我在您的代码中看到的最大问题是您没有命名选择事件并在您的网格中引用它。如果你想用反射风格的方式来做：

...
.Selectable(s => s.Mode(GridSelectionMode.Single))
.Events(events => events.Change("onSelect"))
...

您将定义 js：

<script type="text/javascript">

    function fillForm(dataItem) {
        var columns = $("#AddressGrid").data("kendoGrid").options.columns;
        var form = $("form");

        for (var i = 0; i < columns.length; i++) {
          var field = columns[i].field;
          form.find("#" + field).val(dataItem[field]);
        }
    }

    function onSelect() {
        var grid = $("#AddressGrid").data("kendoGrid");
        fillForm(grid.dataItem);
    }

</script>