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

Help implementing ExportToDOCX in toolbar

3 Answers 19 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Craig
Top achievements
Rank 1
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">
 
    <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>
            </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

Sort by
0
Accepted
Rumen
Telerik team
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.
0
Craig
Top achievements
Rank 1
answered on 27 Mar 2019, 11:59 AM
Exactly what I needed. Thanks Rumen!
0
Rumen
Telerik team
answered on 27 Mar 2019, 12:21 PM
You are welcome, Craig.

Let me know if any other questions pop up!

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.
Tags
Editor
Asked by
Craig
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Craig
Top achievements
Rank 1
Share this question
or