kendoGrid popup editor with listview - kendo-ui

Question

Newbie with Kendo UI here, thanks for the help. Having a problem with a selected listview inside a grid popup editor window.
It displays and is selectable, but I can't get it to send the selected listview data to the JSON string
the json string sent to the server:
{"blog"=>{"id"=>"", "title"=>"New title", "content"=>"New content", "published"=>"", "img_name"=>""}}
My code, kendo-grid and kendo-listview:
<script type="text/x-kendo-tmpl" id="image_template">
<div class="product">
<img src="/assets/blog/${img_name}" width="100" />
</div>
</script>
<!-- popup editor template -->
<script id="popup_editor" type="text/x-kendo-template">
<form class="form-horizontal">
<div class="control-group">
<label class="control-label" for="title">Title</label>
<div class="controls">
<input type="text" id="title" name="Title" data-bind="value:title">
</div>
</div>
<div class="control-group">
<label class="control-label" for="published">Published</label>
<div class="controls">
<input type="checkbox" id="published" data-bind="checked: published" />
</div>
</div>
<textarea id="editor" name="content" data-bind="value:content"></textarea>
<div id="listView"></div>
<div class="control-group">
<label class="control-label" for="img_name">Image Name</label>
<div class="controls">
<input type="text" id="img_name" name="img_name" data-bind="value: img_name"/>
</div>
</div>
</form>
</script>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "/posts";
var blogimages = [
{ "img_name": "image_one.jpg"},
{ "img_name": "image_two.jpg"},
{ "img_name": "image_three.jpg"},
{ "img_name": "image_four.jpg"},
{ "img_name": "image_five.jpg"}
];
imageSource = new kendo.data.DataSource({
data: blogimages
});
imageSource.read();
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl,
dataType: "json"
},
update: {
url: function(posts) {
return crudServiceBaseUrl + "/" + posts.id;
},
dataType: "json",
contentType: "application/json",
type: "PUT"
},
destroy: {
url: function(posts) {
return crudServiceBaseUrl + "/" + posts.id
},
dataType: "json",
type: "DELETE"
},
create: {
url: crudServiceBaseUrl,
dataType: "json",
contentType: "application/json",
type: "POST"
},
batch:false,
parameterMap: function(posts, type) {
if (type === "create") {
return JSON.stringify({ post: posts });
}
else if(type === "update") {
return JSON.stringify({ post: posts }, replacer);
}
}
},
pageSize: 10,
schema: {
model: {
id: "id",
fields: {
title: { editable: true, defaultValue: "New title" },
content: { editable: true, defaultValue: "New content" },
published: {editable: true},
img_name: {editable: true}
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
editable: true,
navigatable: true,
sortable: {
mode: "single",
allowUnsort: false
},
pageable: true,
selectable: "row",
height: 490,
toolbar: ["create"],
editable: {
mode: "popup",
template: $("#popup_editor").html()
},
edit: function(e) {
$("#editor").kendoEditor({
tools: [
"bold",
"italic",
"underline",
"justifyLeft",
"justifyCenter",
"justifyRight",
"justifyFull"
]
});
$("#listView").kendoListView({
dataSource: imageSource,
selectable: "multiple",
change: onChange,
template: kendo.template($("#image_template").html())
}).data("kendoGrid");
},
save: function(e) {
},
columns: [
{ field: "title",title:"Title", width: "25%" },
{ field: "created_at", title:"Created", width: "20%" },
{ field: "updated_at", title:"Updated", width: "20%" },
{ field: "published", title:"Published", width: "10%" },
{ command: ["edit", "destroy"], title: " ", width: "20%" }]
});
function onChange() {
var index = this.select().index();
var dataItem = this.dataSource.at(index);
$('#img_name').val(dataItem.img_name);
}
replacer = function(key, value){
if (key=="id"||key=="created_at"||key=="updated_at"){
return undefined;
}else{
return value;
}
}
});
</script>
<style scoped>
.product
{
float: left;
width: 100px;
height: 60px;
margin: 5px;
padding: 5px;
border: 1px solid #cccccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-image: none;
cursor: pointer;
overflow: hidden;
}
.product img
{
float: left;
width: 100px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.k-listview:after
{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.k-listview
{
border: 0;
padding: 0 0 20px 0;
min-width: 0;
}
</style>
I can successfully send img_name data through the input text
<input type="text" id="img_name" name="img_name" data-bind="value: img_name"/>
But I can't get it to change with onChange function in the listview
Any thoughts on this?