This is a migrated thread and some comments may be shown as answers.

Help implementing ExportToDOCX in toolbar

3 Answers 63 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Craig asked on 22 Mar 2019, 06:10 PM

I'm trying to figure out how to make a custom button in the toolbar that will allow users to export the content. I have a custom button that does reach the code behind, but since it is tied to "fireAjaxRequest" I suspect that it isn't working since the export requires a full postback. Is there any way to implement an export button in the menu, or does it have to be a button external to the menu (asp button with ID "ExportDOCX2" in the snippet below)?

I suppose I could hide the asp button, and have the custom menubutton click that using javascript, but I'm hoping for something more elegant.

NOTE: Not sure if this changes anything, but the page containing the AJAX editor is being rendered inside of an IFrame so it can be integrated with our existing MVC application. The MVC version of the editor does not currently have all of the same functionality as the AJAX version (which is required for our situation), so we took this approach.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="StandardEditor.aspx.cs" Inherits="FIS.Presentation.EWAPPM.DocumentScreens.DocEditor" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns='http://www.w3.org/1999/xhtml'>

<script type="text/javascript">

function OnClientLoad(editor, args)

{

editor.fire("ToggleScreenMode");

}

</script>

<head runat="server">

<link href="../Content/Telerik/styles.css" rel="stylesheet" type="text/css" />

<link href="./Telerik/styles.css" rel="stylesheet" />

<title></title>

</head>

<body>

<form id="form1" runat="server"><asp:Button Text="Export to DOCX" runat="server" ID="ExportDOCX2" OnClick="ExportDocx_Click"/>

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="false" />

<div class="demo-containers">

<div class="demo-container">

<telerik:RadEditor RenderMode="Lightweight" Skin="MetroTouch" ID="theEditor" EnableTrackChanges="true" EnableComments="true" runat="server" Width="100%" ToolsFile="./EditorTools/StandardEditorTools.xml" EnableResize="False" ContentAreaMode="Div" DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd" ToolbarMode="RibbonBar" OnClientLoad="OnClientLoad" ContentFilters="DefaultFilters,PdfExportFilter">

<TrackChangesSettings CanAcceptTrackChanges="true" UserCssId="reU0"></TrackChangesSettings>

<ExportSettings OpenInNewWindow="false" FileName="EWAPPM_DOC">

<Docx DefaultFontName="Arial" DefaultFontSizeInPoints="12" HeaderFontSizeInPoints="8" PageHeader="Some header text for DOCX documents" />

<Pdf PageTitle="Some page title for PDF documents" />

</ExportSettings>

<ImageManager EnableAsyncUpload="true" >

</ImageManager>

<Content>

</Content>

<Modules>

<telerik:EditorModule Name="RadEditorHtmlInspector" Enabled="false" />

<telerik:EditorModule Name="RadEditorNodeInspector" Enabled="false" />

<telerik:EditorModule Name="RadEditorDomInspector" Enabled="false" />

<telerik:EditorModule Name="RadEditorStatistics" Enabled="false" />

</Modules>

</telerik:RadEditor>

<script type="text/javascript">

Telerik.Web.UI.Editor.CommandList["ExportPDF"] = function (commandName, editor, oTool)

{

fireAjaxRequest("ExportPDF");

}

Telerik.Web.UI.Editor.CommandList["ExportDOCX"] = function (commandName, editor, oTool)

{

fireAjaxRequest("ExportDOCX");

}

Telerik.Web.UI.Editor.CommandList["Save"] = function (commandName, editor, oTool)

{

fireAjaxRequest("Save");

}

Telerik.Web.UI.Editor.CommandList["Submit"] = function (commandName, editor, oTool)

{

fireAjaxRequest("Submit");

}

</script>

</div>

<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="ConfiguratorPanel1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="theEditor" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="ConfiguratorPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

<script type="text/javascript">

function fireAjaxRequest(operation)

{

var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");

ajaxManager.ajaxRequest(operation);

}

</script>

</telerik:RadScriptBlock>

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" Visible="False">

</telerik:RadAjaxLoadingPanel>

</form>

</body>

</html>

3 Answers, 1 is accepted

Accepted

answered on 26 Mar 2019, 04:30 PM

Hello,

There is an example with a custom export button in the following demo Editor - MS Word-like Experience that goes through __doPostBack().

Check out the scripts.js file:

Telerik.Web.UI.Editor.CommandList["SaveAsDocx"] =

Telerik.Web.UI.Editor.CommandList["SaveAsRtf"] =

Telerik.Web.UI.Editor.CommandList["SaveAsMarkdown"] =

Telerik.Web.UI.Editor.CommandList["SaveAsPDF"] = function (commandName, editor, args) {

__doPostBack("", commandName);

};

Best regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Help implementing ExportToDOCX in toolbar

3 Answers, 1 is accepted