Load RadPdfViewer dynamically in asp:PlaceHolder asp.net

[Hazim]

Am trying to change old PdfViewer with Telerik control

This built as the following :

1. main Page (Attachment.aspx) load -> usercontrol (TransactionArchiving.ascx) //TransactionArchiving to deal with business

2. usercontrol (TransactionArchiving.ascx) load -> usercontrol (InboundArchive.ascx) //InboundArchive to deal with business

3. usercontrol (InboundArchive.ascx) load -> usercontrol (Archiving.ascx)  //Archiving usercontrol should support different type of attachments and should dynamically load the attachment (PdfViewer ,TextArea, Templates, Word and .....) each type built into different usercontrol

 

On bellow HTML for Archiving usercontrol 

<asp:Repeater ID="archivedTabs" runat="server" OnItemDataBound="archivedTabs_ItemDataBound">
         <ItemTemplate>
             <div id='<%#this.ClientID + "_viewT" + Container.ItemIndex.ToString() %>' class="tabContainer noBorder">

                 <div class="col-sm-12 lntext-Hdr">
                 </div>
                 <asp:HiddenField ID="hdnUniqueId" runat="server" />
                 <asp:HiddenField ID="hdnIndex" runat="server" Value='<%#Container.ItemIndex.ToString()%>' />
                 <asp:PlaceHolder ID="dynamicControlsPlaceHolder" runat="server"></asp:PlaceHolder>
                 <div class="rowF noRowColor noBorder" style="text-align: center">
                     <div class="col8">
                         <asp:Button ID="saveBtn" OnClick="saveBtn_Click" OnClientClick="return true;" CssClass="btn btnGreen loadingData" runat="server" meta:resourcekey="saveBtn" />
                         <asp:Button ID="deleteBtn" CausesValidation="false" OnClick="deleteBtn_Click" OnClientClick="return true;" CssClass="btn btnGreen" runat="server" meta:resourcekey="deleteBtn" />
                         <asp:Button ID="sendBtn" CausesValidation="false" Visible="false" CssClass="btn btnGreen" runat="server" meta:resourcekey="sendBtn" />
                         <asp:Button runat="server" ID="eibtnBackToDirectorateTray" OnClick="eibtnBackToDirectorateTray_Click" Style="display: inline;" meta:resourcekey="eibtnBackToDirectorateTrayResource1" class="btn btnGreen" CausesValidation="false" />
                         <asp:Button runat="server" ID="eibtnBackToOutboundDraftTray" OnClick="eibtnBackToOutboundDraftTray_Click" Style="display: inline;" meta:resourcekey="eibtnBackToOutboundDraftTrayResource1" class="btn btnGreen" CausesValidation="false" />
                     </div>
                 </div>
             </div>
         </ItemTemplate>
     </asp:Repeater>

I think the issue cuz of repeater and PlaceHolder (dynamicControlsPlaceHolder)

This is the C# code for the same userControl

PlaceHolder dynamicControls = item.FindControl("dynamicControlsPlaceHolder") as PlaceHolder;
PDFViewer ucPDFViewer = LoadControl("~/VIP/UserControls/ArchivingPDF/PDFViewer.ascx") as PDFViewer;
    ucPDFViewer.ID = "archivingControl_" + hdnUniqueId;
    ucPDFViewer.IsFromDirectorate = this.IsFromDirectorate;
    ucPDFViewer.CallDelete += new EventHandler(DeleteFromViewer);


    if (this.IsForManifest)
    {
        ucPDFViewer.loadManifest(record);
    }
    else
    {
        ucPDFViewer.loadData(record);
    }

    dynamicControls.Controls.Add(ucPDFViewer);

 

On bellow PDFViewer.ascx code

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<link href='<%# Page.ResolveUrl("~/UserControls/ArchivingPDF/css/styles.css") %>' rel="stylesheet" />

<%--<form id="form1" runat="server">--%>
    <%--    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />--%>
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript">
        window.pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.worker.js';

        function pageLoad(app, args) {
            var upload = $find('<%= RadAsyncUpload1.ClientID %>');
            $(upload.get_element()).find("input[type='file']").attr("accept", ".docx, .rtf, .html, .txt, .xlsx, .csv");
        }
        function fileUploaded(sender, args) {
            $find('<%= RadAjaxManager1.ClientID %>').ajaxRequest();
        }
    </script>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" EnablePageHeadUpdate="false">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadAsyncUpload1" />
                    <telerik:AjaxUpdatedControl ControlID="RadPdfViewer1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadLabel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>

    <div class="demo-container size-wide" runat="server">
        <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server"
            OnClientFileUploaded="fileUploaded" OnFileUploaded="RadAsyncUpload1_FileUploaded"
            AllowedFileExtensions=".docx,.rtf,.html,.txt,.xlsx,.csv" HideFileInput="true"
            AutoAddFileInputs="false" Localization-Select="Upload And Convert" EnableInlineProgress="false"
            MultipleFileSelection="Disabled" />
        <telerik:RadLabel ID="RadLabel1" runat="server" Text="Displayed Document: <b>Document.pdf</b>"
            Style="float: left;">
        </telerik:RadLabel>
        <telerik:RadLabel ID="RadLabel2" runat="server" Text="Supported formats: <b>.docx / .rtf / .html / .txt / .xlsx / .csv</b>"
            Style="float: right;">
        </telerik:RadLabel>
        <br />
        <br />
        <br />
        <telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" Height="600px" Width="100%" Scale="0.9">
            <%--<PdfjsProcessingSettings File='<%# Page.ResolveUrl("~/EmptyText.txt") %>'></PdfjsProcessingSettings>--%>
        </telerik:RadPdfViewer>
    </div>
<%--</form>--%>

 

PdfViewer C# code

protected void Page_Load(object sender, EventArgs e)
{
    int maxSize = 10 * 1024 * 1024; // 10MB

    RadAsyncUpload1.MaxFileSize = maxSize;
    RadPdfViewer1.MaxSerializerLength = maxSize;

    RadPdfViewer1.PdfjsProcessingSettings.File = Page.ResolveUrl("~/EmptyDoc.pdf");
}
protected void RadAsyncUpload1_FileUploaded(object sender, FileUploadedEventArgs e)
{
    byte[] renderedBytes = null;
    string extention = Path.GetExtension(e.File.FileName);

    // RadFlow Documents
    if (Regex.IsMatch(extention, ".docx|.rtf|.html|.txt"))
    {
        IFormatProvider<RadFlowDocument> provider = null;
        RadFlowDocument document = null;

        switch (extention)
        {
            case ".docx": provider = new DocxFormatProvider(); break;
            case ".rtf": provider = new RtfFormatProvider(); break;
            case ".html": provider = new HtmlFormatProvider(); break;
            case ".txt": provider = new TxtFormatProvider(); break;
            default: provider = null; break;
        }

        document = provider.Import(e.File.InputStream);

        Telerik.Windows.Documents.Flow.FormatProviders.Pdf.PdfFormatProvider pdfProvider = new
       Telerik.Windows.Documents.Flow.FormatProviders.Pdf.PdfFormatProvider();

        using (MemoryStream ms = new MemoryStream())
        {
            pdfProvider.Export(document, ms);
            renderedBytes = ms.ToArray();
        }
    }

    // Workbook Documents
    else if (Regex.IsMatch(extention, ".xlsx|.csv"))
    {
        IWorkbookFormatProvider provider = null;
        Workbook document = null;

        switch (extention)
        {
            case ".xlsx": provider = new XlsxFormatProvider(); break;
            case ".csv": provider = new CsvFormatProvider(); break;
            default: provider = null; break;
        }

        document = provider.Import(e.File.InputStream);

        Telerik.Windows.Documents.Spreadsheet.FormatProviders.Pdf.PdfFormatProvider pdfProvider = new
      Telerik.Windows.Documents.Spreadsheet.FormatProviders.Pdf.PdfFormatProvider();

        using (MemoryStream ms = new MemoryStream())
        {
            pdfProvider.Export(document, ms);
            renderedBytes = ms.ToArray();
        }
    }

    RadLabel1.Text = "Displayed Document: <b>" + e.File.FileName + "</b>";

    RadPdfViewer1.PdfjsProcessingSettings.FileSettings.Data = Convert.ToBase64String(renderedBytes);
}

 

So the first image its the consol error (Capture01)

I have tried to update the code as the following (Capture02) // i think updated it wrong way

After code update (Capture03) 

This is the first time for me to implement telerik controls and i could not find fully document for all features needed (Custom buttons, Add png to the attached like signature).

[Eyup]

Hi Hazim,

 

I suggest that we go step by step to resolve the issue. I've created a new working RadPdfViewer web site sample where the viewer is placed inside a UserControl. You can run the Web site by following these steps:

1. Open Visual Studio
2. File menu
3. Open option
4. Select Web site and target the web site folder.
5. Include a Bin folder with the Telerik dll assemblies. Both from the Bin 45 folder and Additional Libraries -> 45 folder in your installation path:
https://docs.telerik.com/devtools/aspnet-ajax/installation/included-assemblies

Once you verify that this configuration is working properly on your side, too, then we can pass to adding the Repeater control.

 

Regards,
Eyup
Progress Telerik

[Hazim]

Dear Eyup,

 

As you know, My other ticket about convert another types to pdf with Arabic Language, will check after other case solution.

Regards,

Hazim Tafour.

[Eyup]

Hi Hazim,

 

I am afraid there is no workarounds or solutions for this case.

 

Regards,
Eyup
Progress Telerik