jquery - 剣道 UI グリッドが画像列を更新できない

Question

Kendo 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
            }
        });
    }
});

画像列テンプレートは、データベースから関連する画像にアクセスするためにGET、次のアクション メソッドにリクエストを行います。ASP.MVC

public FileContentResult GetPersonnelImage(int personnelId)
{
    Personnel p = personnelRepository.GetById(personnelId);
    if (p != null)
    {
        return File(p.ImageData, p.ImageMimeType);
    }

    return null;            
}

上記のように、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属性は、上記の関数の最後で更新されます。

これまでのところ、すべて正常に動作しています。ただし、グリッドはGET、モーダル ウィンドウが閉じられるとすぐにアクション メソッドに要求を行い、新しい画像の選択が失われる原因となります。

GETユーザーがデータを編集している間、リクエストを防止したいと考えています。ここで何が間違っているのかわかりません。どんな提案も本当に完璧です。

前もって感謝します