Query |
Response | |
|
The edit template feature , render and destroy the element in every edit action. So we need to set the value in column.edit.write method. Please find the code example for your reference.
Note : when use column edit template feature, the default style appearance and default functionality (get the existing value/ read the value from text area) is not applied.
| |
|
We have validated the provided code example , we need to set base 64 string for “Image” column when success read from “reader.readAsDataURL” method. We have achieved your requirement by using workaround as follows.
@Html.EJS().Grid("Grid").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").UpdateUrl("/Home/Update").InsertUrl("Home/Add").RemoveUrl("Home/Remove").Adaptor("UrlAdaptor"); }).Columns(col =>
{
. . .
col.Field("Image").HeaderText("Image").Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Width("150").Add();
}).AllowPaging(true).QueryCellInfo("queryCellInfo").ActionBegin("actionBegin").DataBound("dataBound").ActionComplete("actionComplete").EditSettings(edit => { edit.AllowAdding(true).AllowEditing(true).AllowDeleting(true).Mode(Syncfusion.EJ2.Grids.EditMode.Dialog); }).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel" }).Render()
</div>
<script>
var uploadObj, strm;
var elem, file, txtEle;
var filt64String = [];
var targetCell;
function queryCellInfo(args) {
if (args.column.field === "Image") {
args.cell.setAttribute('aria-label', 'image')
args.cell.innerText = '';
var img = new Image();
img.src = args.data.Image;
args.cell.appendChild(img);
}
}
// image uploader
function create(args) {
// create target element
elem = document.createElement('input');
return elem;
}
function write(args) {
uploadObj = new ej.inputs.Uploader({
asyncSettings: {
saveUrl: 'http://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl: 'http://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
},
success: onUploadSuccess,
failure: onUploadFailure
});
uploadObj.appendTo(elem)
}
function destroy() {
uploadObj.destroy();
}
function read(args) {
return strm;
}
function onUploadSuccess(args) {
if (args.operation === 'upload') {
strm = getBase64(args.file.rawFile);
}
}
function onUploadFailure(args) {
console.log('File failed to upload');
}
function getBase64(file) {
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function () {
strm = reader.result;
};
reader.onerror = function (error) {
console.log('Error: ', error);
};
}
</script> |