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
<div id="contents">
<div id="gridMain" ></div>
:
</div>
* colModel
{ 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' />";
},
},