Jquery 剑道UI网格阻止更新图像列

我正在尝试一个

剑道UI

网格实现，它有一个图像列，如下所示：

$("#grid").kendoGrid({
    dataSource: dataSource,
    sortable: true,
    pageable: true,                
    pageSize: 10,
    height: 400,
    toolbar: [{ name: "create"}],
    columns: [{
        field: "ImageData", title: "Select Photo", width: 50, 
        template: '<img id="img_${PersonnelId}" src="/Admin/GetPersonnelImage?personnelId=${PersonnelId}" />' },
                    { field: "Name", title: "Name", width: 80 },
                    { field: "SurName", title: "Surname", width: 80 },
                    { field: "isActive", title: "Active", width: 40 },
                    { command: ["edit", "destroy", { name: "Photo", text: "Photo", click: Photo }], title: " ", width: "130px"}],
        editable: "inline",
        remove: function (e) {
             // remove  
        },            
        save: function (e) {
                //save
            }
        });
    }
});

如上所示，有一个名为

Photo

的自定义命令按钮，用户可以在模式窗口中选择图像文件。当用户单击模式窗口上的此

submitPhoto

按钮时，以下jQuery函数正在运行：

var wnd, uploadTemplate, dataItem;

function Photo(e) {
    e.preventDefault();
    dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    wnd.content(uploadTemplate(dataItem));

    $("#imgfile").change(function (evt) {
        var f = evt.target.files[0];
        var reader = new FileReader();

        if (!f.type.match('image.*')) {
            alert("Selected file does not appear an image file! Please check your selection");
            return;
        }

        reader.onload = function (e) { $('#preview').attr('src', e.target.result); };
        reader.readAsDataURL(f);
    });

    // Updates the src attribute of the grid image column
    $("#submitPhoto").click(function (e) {
        var pid = dataItem.PersonnelId;
        var imgPtr = "#img_" + String(pid);
        var v = $('#preview').attr('src');
        $(imgPtr).attr('src', v);
    });

        wnd.center().open();
    }

网格列的

src

属性将在上述函数结束时更新

到目前为止一切正常。但是，当模式窗口关闭时，grid会立即向action方法发出

GET

请求，并导致丢失新图像选择

我希望在用户编辑数据时阻止

GET

请求。我不知道我做错了什么。任何建议都会非常完美

提前谢谢

var wnd, uploadTemplate, dataItem;

function Photo(e) {
    e.preventDefault();
    dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    wnd.content(uploadTemplate(dataItem));

    $("#imgfile").change(function (evt) {
        var f = evt.target.files[0];
        var reader = new FileReader();

        if (!f.type.match('image.*')) {
            alert("Selected file does not appear an image file! Please check your selection");
            return;
        }

        reader.onload = function (e) { $('#preview').attr('src', e.target.result); };
        reader.readAsDataURL(f);
    });

    // Updates the src attribute of the grid image column
    $("#submitPhoto").click(function (e) {
        var pid = dataItem.PersonnelId;
        var imgPtr = "#img_" + String(pid);
        var v = $('#preview').attr('src');
        $(imgPtr).attr('src', v);
    });

        wnd.center().open();
    }