带有listview的kendoGrid弹出编辑器

Question

新手与Kendo UI在这里，感谢您的帮助。在网格弹出编辑器窗口中遇到选定列表视图的问题。

它显示并且是可选择的，但是我无法将它选择发送到JSON字符串

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

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

我的代码，kendo-grid和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: "&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>

我可以通过输入文本

成功发送img_name数据

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

但是我无法用listview中的onChange函数来改变它

对此有何想法？