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?
- 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. - 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:
-
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;
-
In the Index controller action, the
.docx
file is loaded in aRadFlowDocument
by using theDocxFormatProvider
class. Then the content of the document is exported to an HTML string by using theHtmlFormatProvider
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(); }
-
In the Index view, the Editor loads its value from the ViewBag field.
@(Html.Kendo().Editor() .Name("editor") .Value(ViewBag.editorValue) )
-
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")) )
-
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!'); } ); }
-
On the server, the encoded string that was sent is decoded. Then its value is loaded in a
RadFlowDocument
by usingHtmlFormatProvider
. The document is then exported (saved) on the server by usingDocxFormatProvider
.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); }