How to edit the column in Grid using the uploader control
The Uploader can be used as a Grid editor control by rendering it as a custom component in the Grid edit form. This is explained below,
We can use the cellEditTemplate feature of Grid to render the Uploader component to edit the column.
The cell edit template is used to add a custom component for a particular column by invoking the create, write, read, and destroy functions.
- create function is used to create the element at the time of initialization.
- write function is used to create a custom component or assign a default value at the time of editing.
- read function is used to read the value from the component at the time of save.
- destroy function is used to destroy the component
By using this feature, we rendered the EJ2 Uploader component to edit the Image field. The create, write, read, and destroy functions will be triggered each time Wwhen you are editing a row.
{field: 'Image', headerText: 'Order Image',width: 250, template: '#template',
edit: {
//cellEditTemplate
create: () => {
// Input element is created and returned for appending the Uploader control.
elem = document.createElement('input');
return elem;
},
read: () => {
//read function is used to read the value from the component at the time of save.
return strm;
},
destroy: () => {
// Uploader is destroyed on edit save/close action.
uploadObj.destroy();
},
write: args => {
//write function is used to create custom component or assign default value at the time of editing.
uploadObj = new Uploader({
asyncSettings: {
saveUrl:'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Save',
removeUrl:'https://aspnetmvc.syncfusion.com/services/api/uploadbox/Remove'
},
success: onUploadSuccess,
failure: onUploadFailure
});
uploadObj.appendTo(elem
}
}
}
If you want to upload the image file in the Grid, you can use the upload success event, in that for to updateing the image file in the Grid data source and back-end. The image file is converted to base64 string. This base64 string is stored in a global variable and returned in the edit’s read method as demonstrated in the above code snippet.
This is demonstrated below,
// Uploader’s success event handler function onUploadSuccess(args) { if (args.operation === 'upload') { // Raw file of the uploaded image is retrieved var file = args.file.rawFile; // File reader is initialized, and the raw file is read as URL var reader = new FileReader(); reader.readAsDataURL(file); // The base64 result is retrieved on load success // This value is stored in global variable and returned in the read function of the cell edit template reader.onload = function () { strm = reader.result; }; reader.onerror = function (error) { console.log('Error: ', error); }; } } |
Output
You can find the samples here:
Documentation:
Cell Edit Template feature of Grid: https://ej2.syncfusion.com/documentation/grid/edit/#cell-edit-template
EJ2 Uploader: https://ej2.syncfusion.com/documentation/uploader/getting-started/
