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:

   C#

   	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.

   C#

   	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.

   C#

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

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

   C#

   	@(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.

   JavaScript

   	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.

   C#

   	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