We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: JavaScript - EJ 2 |
Control: 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 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>
    // 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


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 


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 


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 
            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, 

    .form-group.col-md-3 {
        width: 350px;
    #container {
        display: block;
    .e-edit-dialog .form-row.custom-style1 {
        margin-left: 13%;



Document editor in Grid's edit dialog


You can find the samples here: 

JavaScript (ES5) sample

ASP.NET MVC sample

You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile