How can i populate form from selected Kendo Grid row

Question

I have the following code to populate form from selected Kendo Grid, the grid is selectable, how can i fix to make it work?

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

Here is my form looks like

<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

The big problem I see with your code is you have not named the select event and referenced it in your grid. If you want to do it the reflection style way:

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

You would define the 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>