How to use Document Editor as an edit field in Data Grid
The Document Editor can be rendered as one of the editor controls in the Grid’s dialog editing through its Dialog Edit Template. This can be achieved by using the following steps,
Rendering other controls in the Grid’s Dialog template is documented in the following help link,
Render editors as components: https://ej2.syncfusion.com/javascript/documentation/grid/edit/#render-editors-as-components
Using this approach, the Document Editor control is rendered as explained in the following code snippet,
<script id="dialogtemplate" type="text/x-template">
<div>
.
.
<div class="form-row">
<div class="form-group col-md-12">
<div class="e-float-input e-control-wrapper" style="position:absolute">
<div id='container'></div>
</div>
</div>
</div>
</div>
</script>
<script>
// Grid’s actionComplete event handler
function onActionComplete(args) {
if (args.requestType === "beginEdit" || args.requestType === "add") {
// Initialize DocumentEditor component.
var documenteditor = new ej.documenteditor.DocumentEditor({
isReadOnly: false,
enableSelection: true,
enableEditor: true,
enableEditorHistory: true,
enableSfdtExport: true,
enableTextExport: true,
enableWordExport: true,
created: documenteditorCreated
});
//Documenteditor control rendering starts
documenteditor.appendTo(args.form.querySelector('#container'));
}
}
</script>
Here, one of the row data is set as the content for the Document Editor. So, for this the cell data has been retrieved and stored in a global variable from the Grid’s actionComplete event handler when the requestType is ‘beginEdit’ and ‘add’. Also, to properly display the Document Editor, the edit dialog’s height and width has been increased and the document editor’s resize method is called here. This is explained in the following code snippet,
// Grid’s actionComplete event handler
function onActionComplete(args) {
if (args.requestType === "beginEdit" || args.requestType === "add") {
args.form.closest(".e-dialog").style.width = "90%";
args.form.closest(".e-dialog").style.height = "90%";
// Data to be appended to the document editor is stored in a global variable
documentData = (args.requestType === "beginEdit") ? args.rowData["DocumentData"] : "";
// Document Editor instance used here is stored from its Created event which is explained in the next step
docEditor.resize();
}
}
Then, in the Document Editor’s created event, its instance is retrieved and stored in a global variable. In this created event handler, the stored row data value from the global variable is set as the content to the Document Editor. This is explained in the following code snippet,
// Document Editor’s created event handler
function documenteditorCreated() {
docEditor = document.getElementById("container").ej2_instances[0];
// The stored data from edited row data is set as its content
docEditor.editor.insertText(documentData);
}
Finally, since the modified Document Editor data needs to be updated to the Grid’s data source, it is retrieved and assigned to the data received in the actionBegin event handler’s arguments when the requestType is ‘save’. This is explained in the following code snippet,
// Grid’s actionBegin event handler
function actionBegin(args) {
if (args.requestType == "save") {
var docEditorInst = document.getElementById("container").ej2_instances[0];
// Document Editor data is selected and text is retrieved
docEditorInst.selectionModule.selectAll();
var newDocumentData = docEditorInst.editor.selection.text;
// Document Editor content is assigned to its corresponding grid column field
args.data["DocumentData"] = newDocumentData;
}
}
Styles for adjusting the add or edit Dialog based on the Document Editor,
<style>
.form-group.col-md-3 {
width: 350px;
}
#container {
display: block;
}
.e-edit-dialog .form-row.custom-style1 {
margin-left: 13%;
}
</style>
Output
You can find the samples here:
