Will Telerik Document Processing Library work with JavaScript? - c#

Right now I have an application that is currently using PrinceXML to make PDFs in our application, but we would like to move towards using Telerik as a solution. The only problem I could foresee is that it expects all the rendering to be done on the markup prior to calling it. For example, a form might have some JavaScript on the page that needs to run when the page loads to fully layout the form correctly. If Telerik's component can't handle that (meaning the form has to be fully rendered server-side prior to) then that's going to be a problem. I'm having a hard time finding documentation on whether the Telerik Document Processing Library handles this.

Telerik offers another solution for client-side export, e.g.
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<div class="demo-container size-medium">
<div class="buttonsContainer">
<telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicked="exportPDF" Text="Export page to PDF" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>
<telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicked="exportImage" Text="Export page to Image" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>
<telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicked="exportSVG" Text="Export page to SVG" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>
</div>
<telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
</telerik:RadClientExportManager>
</div>
<script>
var $ = $telerik.$;
function exportPDF() {
$find('<%=RadClientExportManager1.ClientID%>').exportPDF($("#main"));
}
function exportImage() {
$find('<%=RadClientExportManager1.ClientID%>').exportImage($("#main"));
}
function exportSVG() {
$find('<%=RadClientExportManager1.ClientID%>').exportSVG($("#main"));
}
</script>
Please take a look at the following demos:
https://demos.telerik.com/aspnet-ajax/client-export-manager/functionality/export-whole-pages/defaultcs.aspx
https://demos.telerik.com/kendo-ui/pdf-export/index and https://demos.telerik.com/kendo-ui/pdf-export/page-layout

Related

asp elements not displaying from my aspx page hosted on Amazon s3

I have created a mail app using an aspx page. When testing on a local machine all the asp elements display correctly, I am now storing the file on an Amazon s3 server but when I go to the page none of the asp elements render I only get html elements rendering. Here is the markup from my aspx page
<div id="content-main">
<div class="padding">
<form id="policy" runat="server">
<asp:Button ID="getpolicy" runat="server" UseSubmitBehavior="false" OnClick="getpolicy_Click" Text="Start using" />
<asp:HiddenField ID="security" runat="server" />
<h3>Message Security:</h3>
<asp:DropDownList ID="encryptionlevel" runat="server"></asp:DropDownList>
<h3>Description:</h3>
<div id="description"></div>
<asp:Button ID="reload" runat="server" Text="Reload" UseSubmitBehavior="false" OnClientClick="return false;" />
</form>
</div>
</div>
This markup works when testing but when it's on the Amazon s3 server the asp elements do not display.
What have I forgotten to do?
Thanks in advanced
I think more help regarding run asp.net application in amazon s3 access below URl
https://aws.amazon.com/articles/.NET/3592

Page scrolling on selecting value from drop down menu

i have successfully completed my web application for an organization and it works up to expectations but i noticed one problem and tried to cure it via searching on Google and asking seniors but none of these helped much.
Problem:
I have multiple drop downs lists on page, in which selecting value in one drop down triggers the loading of another drop down i.e. Country > cities situation, problem is that whenever i click any value it scrolls page to the top and i have to scroll back again then again and again which realy looks bad and unprofessional. Please help me.
Code:
<asp:UpdatePanel ID="updGridViewSMS" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<br />
<asp:Panel ID="pnlBoxesDropDowns" runat="server">
<label style="width:400px">Relevant Region</label>
<asp:DropDownList ID="ddlRegions" runat="server" CssClass="DropDown_Width" Width="147px" OnSelectedIndexChanged="ddlRegions_SelectedIndexChanged" AppendDataBoundItems="True" AutoPostBack="true" >
<asp:ListItem Value="-1" Selected="True">-Select-</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqFieldValidatorRegions" runat="server"
ControlToValidate="ddlRegions" ErrorMessage="Region is Required" InitialValue="-1"
ForeColor="Red" ValidationGroup="Complaints">Region is Required</asp:RequiredFieldValidator>
<label style="width:400px">Relevant District</label>
<asp:DropDownList ID="ddlDistricts" runat="server" CssClass="DropDown_Width" Width="147px" OnSelectedIndexChanged="ddlDistricts_SelectedIndexChanged" AutoPostBack="true">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqFieldValidatorDistricts" runat="server"
ControlToValidate="ddlDistricts" ErrorMessage="Region is Required" InitialValue="-1"
ForeColor="Red" ValidationGroup="Complaints">District is Required</asp:RequiredFieldValidator>
<label>Relevant P.Station</label>
<asp:DropDownList ID="ddlPoliceStations" runat="server" Width="147px" CssClass="DropDown_Width">
</asp:DropDownList>
<asp:RequiredFieldValidator ID="ReqFieldValidatorPoliceStations" runat="server"
ControlToValidate="ddlPoliceStations" ErrorMessage="Police Station is Required" InitialValue="-1"
ForeColor="Red" ValidationGroup="Complaints">Police Station is Required</asp:RequiredFieldValidator>
<label>Priority</label>
<asp:DropDownList ID="ddlPriority" runat="server">
<asp:ListItem Text="Top" Value="1"></asp:ListItem>
<asp:ListItem Text="Normal" Value="2"></asp:ListItem>
</asp:DropDownList>
</asp:Panel>
<br />
<br />
<asp:Timer runat="server" Interval="60000" ID="RefreshSmsComplaints" OnTick="RefreshSmsComplaints_Tick" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="RefreshSmsComplaints" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>
help please.
The core issue here is that you are posting back to the server on every dropdown select. This means that the web page reloads, because it is your webserver that updates the HTML versus the more modern way to do things which is to have javascript do it on the client. Here is a hacky, imperfect, but quick solution:
In the browser, inspect your html DOM. Each of your dropdown ASPX tags should have been replaced with something along the lines of
<select id="ctl000$ddlDistricts"...
You can use url hashtags to scroll to that area by appending #ctl000$ddlDistricts to the url. Since the server knows which control was posted, it can get the control's client-side ID, and write it into the following javascript (preferably at the bottom of the page).
<script type="text/javascript">
location.href='#' + <%=PostedControl.ClientID %>
</script>
Why is this imperfect? Because it will scroll your page to a point where the dropdown is at the top edge of the browser. This means that if a user selects the dropdown with it halfway down the page, once the page reloads, that will be at the top. At the very least, however, your dropdowns will then be within view.
Your original question indicated that you wanted the page to look "professional" and while this gets the job done, it is imperfect, as will all solutions be when you are dealing with classic ASPX webforms-style postbacks. Specifically, your dropdowns have something that looks like this:
OnSelectedIndexChanged=MyFunction
What this tells the ASPX form is, in essence, "when you render this dropdown control into HTML, add something into the tag like onChange="postMyFormBackToServerCausingReloadAndPageScroll. What you really want, perhaps, is to have it do onChange=GetNewDropdownFromServerAndReplaceOnPageWithoutReload. That involves more knowledge than I can add to an already long answer, but here are some helpful links:
http://www.codeproject.com/Articles/691298/Creating-AJAX-enabled-web-forms (a bit old but probably a good stepping stone)
http://www.codedigest.com/Articles/jQuery/318_Doing_AJAX_with_jQuery_in_ASPNet.aspx (a slightly more modern way to do it, but you do more yourself with this method as opposed to relying on .NET)
Lastly, the fully modern way to do things that involves completely rewriting your page
http://www.codeproject.com/Articles/575397/An-Absolute-Beginners-Tutorial-on-ASP-NET-MVC-for (not sure if this is the right article for you, just google for ".NET MVC")

Design Advice using Master Pages

Master Page
<div id="header" style="height: 150px; width: 750px;">
<asp:Label ID="Label3" runat="server" Text="LoggedInUser:"></asp:Label>
<asp:Label ID="lblLoggedInUser" runat="server" Text=""></asp:Label>
</div>
<div id="leftMenu" class="leftmenu">
<br />
<asp:DropDownList ID="ddlFamilyMembers" runat="server"
style="height: 25px; width: 125px" DataTextField="FullName"
DataValueField="MembershipGen"
onselectedindexchanged="ddlFamilyMembers_SelectedIndexChanged"
AutoPostBack="True" >
</asp:DropDownList>
<br /><br />
<asp:Image ID="imageMember" class="space" runat="server" Height="150px" Width="125px" />
<br /><br /><br />
<asp:Label ID="Label1" runat="server" class="space" Text="MembershipID:"></asp:Label>
<asp:Label ID="lblMembershipID" runat="server" Text=""></asp:Label>
<br />
<asp:Label ID="Label2" runat="server" class="space" Text="Name:"></asp:Label>
<asp:Label ID="lblMemberName" runat="server" Text=""></asp:Label>
<br /><br /><br />
<asp:LinkButton ID="lbInformation" class="space" runat="server" onclick="lbInformation_Click">Member Information</asp:LinkButton><br />
<asp:LinkButton ID="lbAddress" class="space" runat="server"
onclick="lbAddress_Click">Member Address</asp:LinkButton>
</div>
<div id="divRight" class="divright">
<asp:ContentPlaceHolder ID="CPHMain" runat="server">
</asp:ContentPlaceHolder>
</div>
I posted my masterpage code so you can better understand my issue. Since these controls are in my master page I needed to create public properties for all the controls in my masterpage to databind my content pages. Maybe I am approaching this wrong but this is how I was planning on achieving this.
ContentPage
Default.aspx page_load event would call my method to retrieve the data and set the dropdownlist, image, 2 label fields. On selected index change of dropdownlist it would grab the new values from another method and populate those controls accordingly.
To access these controls in my master page i read you can do it a couple of different ways one is to <%#MasterType VirtualPath="~/Member.Master" %> and then create a strongly typed connection. Or you could create a loosely type connection.
My problem with these ways as I am going to have over 15 content pages and I would hate to have to rebind the DropDownList every time one of the content pages is called. Also I would have to reinstantiate the controls in every method of my content pages which I assume I am doing this wrong.
Can someone give me some advice on what is the proper way to achieve this without so much repetitive code?
You've got the right idea, trying to decouple the parent from the child, but I think the way you want to do it may be clunky.
Assuming you can do this, what I'd do is as follows:
Make a public method BindFamilyMembers(string parameter) on the Master page's code-behind.
From the child page, pass necessary unique parameters to this BindFamilyMembers Master method.
This way you don't need to expose the controls themselves, you expose a method that modifies those controls based on parameters.
edit
You want to notify the child page that the DDL SelectedIndex has changed. This is a great case for custom events.
You can configure an event on the Master page that the child page listens for. When DDL.SelectedIndex changes, you can fire the custom event (and pass the selected information) via the custom event, and any child page that is listening can handle that event.
There are a lot of examples of custom events online. Here's one you can start with: http://www.marten-online.com/csharp/simple-custom-event-handling.html

how do I show a webpage in a modal popup?

I'm having surprisingly bad luck finding a decent resource for this. But What I'm doing is creating a list of tickets using a ListView. One of the controls in the item template is a link button that shows the header of the ticket. When the user clicks the link button, I want to open a modal window that shows the ticket in readable format. To get the ticket, I'll be passing that page a variable and it'll do the rest; nothing complicated. The page will have 3 buttons and the windows needs to close when you click one of them.
Now, I figured out how to use the ModalPopupExtender from the Ajax tookit more or less. You create the panel in it's own div which stays hidden. I created a click event that basically uses a webclient to download the html from the page and insert it into that div's innerHtml. This seems to work the first time. But as soon as you click a different link, the page pukes and says something about it being in an illegal state.
I'm not sure if I'm going about this wrong, and I can't find any decent examples of how to do this. Well there's one, but the english is hard to understand and it's in VB instead of C#. Any help?
<%# Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<form id="form1" runat="server">
<div>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<br />
<asp:ModalPopupExtender
DropShadow="true"
OkControlID="btnOk"
CancelControlID="btnClose"
runat="server"
PopupControlID="Panel1"
id="ModalPopupExtender1"
TargetControlID="Button1" />
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" style="display:none;">
This is basic modal popup.
<br /><br />
<asp:Button ID="btnOk" runat="server" Text="Ok" />
<asp:Button ID="btnClose" runat="server" Text="Close Me" />
<iframe src="http://www.google.com"></iframe>
</asp:Panel>
<asp:Button ID="Button1" runat="server" Text="First Modal Popup" />
</div>
</form>
Try this it should work.

How can i automatically update a user control without updating the whole asp.netpage

How can i automatically update a user control after a specific time without updating the whole aspx page. I haven't done it before. Any ideas would be appreciated.
i suppose you are using asp.net ajax and it has timer control.
check this example : http://ajax.net-tutorials.com/controls/timer-control/ and this video : http://www.asp.net/ajax/videos/how-do-i-use-the-aspnet-ajax-timer-control .
If you have the AJAX extension installed, you can use an UpdatePanel and the ContentTemplate to only refresh that region of your webpage when performing a Postback. You can put any content here, as a self created Usercontrol.
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Label ID="Label1" runat="Server"></asp:Label>
<br />
<asp:UpdatePanel ID="UpdatePanel1" runat="Server">
<ContentTemplate>
<asp:Label ID="Label2" runat="server"></asp:Label>
<br />
<br />
<asp:Button ID="Button2" runat="server" Text="Click Me Again" OnClick="Button2_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
The idea would then be to use a Timer to perform a Postback of that UpdatePanel, as someone else has suggested a link for that.
I'm not really sure what you mean when you say "updating" but if you take a look at the life cycle of an active server page you will see that the whole page will be "refreshed" by the web server.
When the web server responds to a client request the entire content will be transformed to a page displayable by a browser and send to the client.

Categories