我如何从选定的剑道网格行填充表格

Question

我有以下代码来从选定的Kendo网格填充表格，该网格是可选的，我该如何修复才能使其正常工作？

<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

我在您的代码中看到的最大问题是您尚未命名select事件并在网格中引用了它。如果要使用反射样式方式：

...
.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>