Articles in this section
Category / Section

How to use Document Editor as an edit field in Data Grid

2 mins read

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

Document editor in Grid's edit dialog

 

You can find the samples here: 

JavaScript (ES5) sample

ASP.NET MVC sample

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied