Kendo ui 带有listview的kendoGrid弹出式编辑器

这里有剑道UI的新手，谢谢你的帮助。网格弹出编辑器窗口中选定的listview出现问题

它显示并可选择，但我无法让它将所选listview数据发送到JSON字符串

发送到服务器的json字符串：

{"blog"=>{"id"=>"", "title"=>"New title", "content"=>"New content", "published"=>"", "img_name"=>""}}   

我的代码、剑道网格和剑道列表视图：

<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: "&nbsp;", 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>

标题
出版
图像名称
$（文档）.ready（函数（）{
var crudServiceBaseUrl=“/posts”；
变量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=新的kendo.data.DataSource({
数据：博客图片
});
read（）；
dataSource=新建kendo.data.dataSource({
运输：{
阅读：{
url:crudServiceBaseUrl，
数据类型：“json”
},
更新：{
url:函数（帖子）{
返回crudServiceBaseUrl+“/”+posts.id；
},
数据类型：“json”，
contentType:“应用程序/json”，
类型：“PUT”
},
销毁：{
url:函数（帖子）{
返回crudServiceBaseUrl+“/”+posts.id
},
数据类型：“json”，
类型：“删除”
},
创建：{
url:crudServiceBaseUrl，
数据类型：“json”，
contentType:“应用程序/json”，
类型：“职位”
},
批次：假，
parameterMap：功能（职位、类型）{
如果（类型==“创建”）{
返回JSON.stringify（{post:posts}）；
}
否则如果（类型==“更新”）{
返回JSON.stringify（{post:posts}，replacer）；
}
}
},
页面大小：10，
模式：{
型号：{
id:“id”，
字段：{
标题：{可编辑：true，defaultValue:“新标题”}，
内容：{可编辑：true，defaultValue:“新内容”}，
已发布：{可编辑：true}，
img_名称：{可编辑：true}
}
}
}
});
$（“#网格”）.kendoGrid({
数据源：数据源，
是的，
可导航：是的，
可排序：{
模式：“单身”，
allowUnsort:错误
},
pageable:对，
可选：“行”，
身高：490，
工具栏：[“创建”]，
可编辑：{
模式：“弹出”，
模板：$（“#弹出式编辑器”）.html（）
},
编辑：功能（e）{
$（“#编辑”）.kendoEditor({
工具：[
“粗体”，
“斜体”，
“下划线”，
“为左派辩护”，
“辩护中心”，
“正当权利”，
“充分证明”
]
});
$（“#列表视图”）.kendoListView({
数据源：imageSource，
可选：“多个”，
改变：一旦改变，
模板：kendo.template（$（“#图像_模板”）.html（））
}).数据（“kendoGrid”）；
},
保存：功能（e）{
},
栏目：[
{字段：“标题”，标题：“标题”，宽度：“25%”，
{字段：“已创建”，标题：“已创建”，宽度：“20%”，
{字段：“更新”，标题：“更新”，宽度：“20%”，
{字段：“已发布”，标题：“已发布”，宽度：“10%”，
{命令：[“编辑”、“销毁”]，标题：，宽度：“20%”]
});
函数onChange（）{
var index=this.select（）.index（）；
var dataItem=this.dataSource.at（索引）；
$（'img_name'）.val（dataItem.img_name）；
}
replacer=函数（键、值）{
if（key==“id”| | key==“在”| | key==“更新的”|处创建”）{
返回未定义；
}否则{
返回值；
}
}
});
.产品
{
浮动：左；
宽度：100px；
高度：60px；
保证金：5px；
填充物：5px；
边框：1px实心#中交；
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
背景图像：无；
光标：指针；
溢出：隐藏；
}
.产品img
{
浮动：左；
宽度：100px；
-webkit边界半径：3px；
-moz边界半径：3px；
边界半径：3px；
}
.k-listview：之后
{
内容：“.”；
显示：块；
身高：0；
明确：两者皆有；
可见性：隐藏；
}
.k-listview
{
边界：0；
填充：0 20px 0；
最小宽度：0；
}

我可以通过输入文本成功发送img_名称数据

<input type="text" id="img_name" name="img_name" data-bind="value: img_name"/>

但是我无法在listview中使用onChange函数来更改它

有什么想法吗