Help implementing ExportToDOCX in toolbar

4 posts, 1 answers
  1. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 22 Mar Link to this post

    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>
  2. Answer
    Rumen
    Admin
    Rumen avatar
    14070 posts

    Posted 26 Mar Link to this post

    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.
  3. Craig
    Craig avatar
    26 posts
    Member since:
    Jan 2019

    Posted 27 Mar in reply to Rumen Link to this post

    Exactly what I needed. Thanks Rumen!
  4. Rumen
    Admin
    Rumen avatar
    14070 posts

    Posted 27 Mar Link to this post

    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.
Back to Top