Questions on UI for ASP.NET AJAX Forum

3 answers

524 views

Load RadPdfViewer dynamically in asp:PlaceHolder asp.net

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>

</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 />

<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).

PdfViewer

answered on 02 Jul 2020

4 answers

373 views

telerik radpdfviewer render arabic letters in reverse

You can check your example :https://demos.telerik.com/aspnet-ajax/pdfviewer/applicationscenarios/dplintegration/defaultcs.aspx

This is my code:

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

<!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'>

<head runat="server">

<title>Telerik ASP.NET Example</title>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>

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

</head>

<body>

<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 />

<div dir="ltr" runat="server">

<telerik:RadPdfViewer runat="server" ID="RadPdfViewer1" Height="550px" Width="100%" Scale="0.9" Skin="Default" RenderMode="Lightweight">

<%--<PdfjsProcessingSettings File="../../Document.pdf"></PdfjsProcessingSettings>--%>

</telerik:RadPdfViewer>

</div>

</form>

</body>

</html>

using System;

using System.IO;

using System.Text.RegularExpressions;

using Telerik.Web.UI;

using Telerik.Windows.Documents.Common.FormatProviders;

using Telerik.Windows.Documents.Flow.FormatProviders.Docx;

using Telerik.Windows.Documents.Flow.FormatProviders.Html;

using Telerik.Windows.Documents.Flow.FormatProviders.Rtf;

using Telerik.Windows.Documents.Flow.FormatProviders.Txt;

using Telerik.Windows.Documents.Flow.Model;

using Telerik.Windows.Documents.Spreadsheet.FormatProviders;

using Telerik.Windows.Documents.Spreadsheet.FormatProviders.OpenXml.Xlsx;

using Telerik.Windows.Documents.Spreadsheet.FormatProviders.TextBased.Csv;

using Telerik.Windows.Documents.Spreadsheet.Model;

namespace MCS.Web

{

public partial class DefaultCS : BasePageClass

{

protected void Page_Load(object sender, EventArgs e)

{

int maxSize = 10 * 1024 * 1024; // 10MB

RadAsyncUpload1.MaxFileSize = maxSize;

RadPdfViewer1.MaxSerializerLength = maxSize;

}

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);

}

PdfViewer

answered on 02 Jul 2020

4 answers

543 views

Find Item Control in RadListView Client Side

Hi,

I want to find a check_box_list controls check_box count in Rad_list_view on client side. how can get it.
please provide solutions.
My code as follows

<telerik:RadListView runat="server" ID="RadListView1" BorderColor="White" onitemdatabound="RadListView1_ItemDataBound" BorderStyle="None" AllowPaging="True">

<ClientSettings></ClientSettings>

<ItemTemplate>

<div style="border-bottom:1px solid gray;padding-left:15px;">

<table cellpadding="2px" cellspacing="2px" border="0"

<tr

<td class="LabelWidth" style="margin-left:2%; vertical-align:middle;font-family: Georgia,serif;">

<asp:Label ID="Label4" runat="server" Text='<%# (DataBinder.Eval(Container.DataItem,"PermissionItemName")) %>'></asp:Label>

</td>

<td> </td>

<td valign="middle">

<asp:CheckBoxList ID="Listbox_Permission" CellSpacing="10" CellPadding="5" runat="server" RepeatDirection="Horizontal" CssClass="CheckboxList" AutoPostBack="false" >

</asp:CheckBoxList>

</td>

</tr>

</table>

</div>

</ItemTemplate>

</telerik:RadListView

>



Thanks,

Rahul

ListView

answered on 02 Jul 2020

2 answers

80 views

Turn a list item into a token with JS?

I need to manually select the first list matching item and turn it into a token.

Reading the documentation I think that the way to go would be within the example below:

var autoComplete = $find("<%= RadAutoCompleteBox1.ClientID %>");

var newEntry = autoComplete.createEntry('Text', 'Value');

var entries = autoComplete.get_entries();

entries.add(newEntry);

However instead to create newEntry manually I need to capture the first item in the list that matches user typing (text and value). Any idea?

Thanks!

AutoCompleteBox

answered on 01 Jul 2020

15 answers

689 views

Teleriik license

Hello,

my Telerik license has been renewed however when I logged in and try to download latest version it showing that I do not have license and cannot download any new version.

Please advise.

Thanks.

Vitaly.

General Discussions

answered on 01 Jul 2020

6 answers

530 views

How AuotCompltedBox postbax and get the selected item id on server side

Hi,
I want to do when i selected AutoCompleteBox item i want to do a postback and get the selected items id on server side.so provide solutions.
Thanks,
Rahul

AutoCompleteBox

answered on 01 Jul 2020

1 answer

174 views

Default context menu not visible

I found an issue with the context menu. I tried in the demo to right click on an empty area/on a word and expects that the default context menu should show up with copy/paste etc... Only the native browser (Chrome 83) menu shows up. Shouldn't this work by default?

In my code i have been using this to add a custom menu, but it doesnt work due to the above issue i guess.
Is there any documentation how to add items for all tags, in the code below I use *, and seen other examples with BODY

MyRadEditor.EnsureToolsFileLoaded();

var contextMenu = MyRadEditor.ContextMenus.FindByTagName("*");

var editorTool = new EditorTool("Toolname"); editorTool.ShowIcon = false; contextMenu.Tools.Add(editorTool);

Editor

answered on 01 Jul 2020

4 answers

689 views

RadGrid Column Background Color Change

Hello,

is there a way to accomplish the following task using the RadGrid client side API:

RadGridComparableAnalysis.MasterTableView.AutoGeneratedColumns[columnCounter].ItemStyle.BackColor =

Color.White;

As you can noticed from the following code, i'm able to get the object of target column but could not find a property which can allow me to change the background color. Please let me know what i'm missing here

//Define array of columns

var grdColumns = new Array(masterTable.get_columns().length);

//Get all columns
grdColumns = masterTable.get_columns();

//Navigate to all columns and chage background color for the required columns
for (var columnCounter = 0; columnCounter < masterTable.get_columns().length; columnCounter++) {

var remainder = (columnCounter % 2);

if (remainder == 0) {

var grdColumn = grdColumns[columnCounter];

//masterTable.getColumnByUniqueName(grdColumn.get_uniqueName()).backColor = "Blue";
//masterTable.autoGeneratedColumns[columnCounter].itemStyle.iackColor = "Blue";
}
}

Thanks

Grid