Reputation: 225
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>
Upvotes: 0
Views: 624
Reputation: 12304
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>
Upvotes: 1