Pre-Populate and Save Editor Data to DOCX Server-Side

Environment

Product

Progress® Telerik® UI Editor for ASP.NET MVC

Description

How can I implement the following requirements?

1. I need to pre-populate Editor with the data from a server-side .docx file. At the time of the initial loading, the widget data should come from a server-side file so that the widget gets pre-populated with data.
2. I need to place a simple button above the widget area&mdashh;for example, Save. On a button click, the Editor data should be sent and saved to a .docx file on the server.

Solution

Use the Telerik DocumentProcessing library. It ships as a part of the Telerik UI for ASP.NET MVC suite. Reference the Telerik.Windows.Documents.Core.dll and the Telerik.Windows.Documents.Flow.dll assemblies in your project.

To implement the approach:

1. Include the required libraries in the Controller class:

       using System.IO;
       using System.Web;
       using System.Web.Mvc;
       using Telerik.Windows.Documents.Flow.FormatProviders.Docx;
       using Telerik.Windows.Documents.Flow.FormatProviders.Html;
       using Telerik.Windows.Documents.Flow.Model;
   

2. In the Index controller action, the .docx file is loaded in a RadFlowDocument by using the DocxFormatProvider class. Then the content of the document is exported to an HTML string by using the HtmlFormatProvider class and is assigned to a filed in the ViewBag.

       public ActionResult Index()
       {
           string fileLocation = Server.MapPath("~/App_Data/SampleDocument.docx");
   
           DocxFormatProvider docxProvider = new DocxFormatProvider();
           HtmlFormatProvider htmlProvider = new HtmlFormatProvider();
           RadFlowDocument document = null;
   
           using (FileStream input = new FileStream(fileLocation, FileMode.Open))
           {
               document = docxProvider.Import(input);
           }
   
           string html = htmlProvider.Export(document);
           ViewBag.editorValue = html;
   
           return View();
       }
   

3. In the Index view, the Editor loads its value from the ViewBag field.

       @(Html.Kendo().Editor()
           .Name("editor")
           .Value(ViewBag.editorValue)
       )
   

4. To execute the save logic, use a button click handler.

       @(Html.Kendo().Button()
           .Name("button")
           .Content("Click to save changed contents")
           .Events(e => e.Click("onClick"))
       )
   

5. Send the encodedValue of the Editor to the server.

       function onClick() {
           var editorContents = $('#editor').data('kendoEditor').encodedValue();
   
           $.post('@Url.Action("Save", "Home")', {
                   data: editorContents
               },
               function (e) {
                   alert('Editor saved on server!');
               }
           );
       }
   

6. On the server, the encoded string that was sent is decoded. Then its value is loaded in a RadFlowDocument by using HtmlFormatProvider. The document is then exported (saved) on the server by using DocxFormatProvider.

       public ActionResult Save(string data)
       {
           string html = HttpUtility.HtmlDecode(data);
           string fileLocation = Server.MapPath("~/App_Data/SampleDocument.docx");
   
           HtmlFormatProvider htmlProvider = new HtmlFormatProvider();
           DocxFormatProvider docxProvider = new DocxFormatProvider();
           RadFlowDocument document = htmlProvider.Import(html);
   
           using (Stream output = System.IO.File.Create(fileLocation))
           {
               docxProvider.Export(document, output);
           }
   
           return new HttpStatusCodeResult(200);
       }
   

See Also

• Kendo UI Editor JavaScript API Reference
• Telerik DocumentProcessing Library