How to display thumbnail in cell after image file selection?

[ohbayashi]

If you output the same source to html, it will be displayed.
I tried refresh etc. but it will not be reflected on the screen.

* html

Code: [Select]

    <div id="contents">
        <div id="gridMain" ></div>
        :
    </div>

* colModel

Code: [Select]

{ title: "file select", dataIndx: "file", editable: false, sortable: false, minWidth: 300, align: "center",
    render: function (ui) {
        return "<input type='file' id='file_select' accept='image/jpeg,image/png' />";
    },
    postRender: function (ui) {
        var grid = this,
            rData = ui.rowData;
        // $("#fileupload").on("change", function(e) {
        $("#file_select").on("change", function(ev) {
            var file = ev.target.files[0];
            if (!file) return;

            var src = window.URL.createObjectURL(file);     // blob file
            resizeImage(src, function (canvas) {
                // rData.file_image = url;
                rData.thumbnail_url = canvas.toDataURL(file.type);
                // rData.thumbnail = canvas;
                rData.thumbnail = "<img src='" + rData.thumbnail_url + "' width='200px' ></img>";
                // $("#contents").append(canvas);
                $("#contents").append("<img src='" + rData.thumbnail_url + "' width='200px' ></img>");
                grid.refreshCell({ rowIndx: ui.rowIndx, dataIndx: "thumbnail" });
            });
        });
    }
},
{ dataIndx: "thumbnail_url", hidden: true },
{ title: "thumbnail", dataIndx: "thumbnail", dataType: "html", editable: false, sortable: false, minWidth: 210, align: "center",
    render: function (ui) {
        var rData = ui.rowData,
            thumbnail_url = rData.thumbnail_url;
        if (!!thumbnail_url) { return ""; }

        return "<img src='" + thumbnail_url + "' width='200px' />";
    },
},


[ohbayashi]

Was self resolved.
The cause was "checkEditable" of "addRow".

* before

Code: [Select]

    var rowIndx = grid.addRow({ newRow: newRowData, rowIndx: data.length, checkEditable: false });

* after

Code: [Select]

    var rowIndx = grid.addRow({ newRow: newRowData, rowIndx: data.length, checkEditable: true });