New to Kendo UI for jQuery? Download free 30-day trial

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

In this article