How to Preview uploaded image using telerik RadAsyncUpload and RadBinaryImage in ASP Update Panel? - image

I have a web form in asp.net contains a RadAsyncfileupload and a RadBinaryImage inside an Asp Update Panel like following
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<div>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server">
</telerik:RadAsyncUpload>
<telerik:RadBinaryImage ID ="RadBinaryImage1" runat ="server" Width= "100px" Height="100px"/>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
in code behind
protected void RadAsyncUpload1_FileUploaded(object sender, Telerik.Web.UI.FileUploadedEventArgs e)
{
if (RadAsyncUpload1.UploadedFiles.Count == 1)
{
byte[] image;
long fileLength = RadAsyncUpload1.UploadedFiles[0].InputStream.Length;
image = new byte[fileLength];
RadAsyncUpload1.UploadedFiles[0].InputStream.Read(image, 0, image.Length);
RadBinaryImage1.DataValue = image;
}
}
but in runtime program controller does not fire RadAsyncUpload1_FileUploaded event
I have searched the Telerik forum and found that I should do something to script manager but I need some help on how to do it the reason is that in order to fire this event whole page should post back anyway some scripts can help me or any other ways!
mention that I need byte array of the image to save it in DB.
Thanks in advance
Saeed Soleimanifar

http://demos.telerik.com/aspnet-ajax/asyncupload/examples/persistuploadedfiles/defaultvb.aspx?#qsf-demo-source
I just added the same functionality by using this , if you find any problem let me know...
OR
Here is the part that does the magic
Page Source :
<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function updatePictureAndInfo() {
__doPostBack('btnImgUpload', 'RadButton1Args');
}
</script>
</telerik:RadScriptBlock>
<telerik:RadBinaryImage runat="server" ID="imgBinaryPhoto" ImageUrl="~/Images/default-profile-pic.png"
Width="100px" Height="100px" ResizeMode="Fit" AlternateText="No picture available"
CssClass="preview"></telerik:RadBinaryImage>
<br />
<telerik:RadAsyncUpload ID="upldPhoto" runat="server" AllowedFileExtensions=".jpg,.png,.gif,jpeg,.tiff"
MaxFileInputsCount="1" MultipleFileSelection="Disabled">
</telerik:RadAsyncUpload>
<asp:Button ID="btnImgUpload" runat="server" Text="Upload" CssClass="button" OnClientClick="updatePictureAndInfo(); return false;" />
Code Behind:
Protected Sub FileUploaded() Handles upldPhoto.FileUploaded
Dim bitmapImage As Bitmap = ResizeImage(upldPhoto.UploadedFiles(0).InputStream)
Dim stream As System.IO.MemoryStream = New System.IO.MemoryStream()
bitmapImage.Save(stream, System.Drawing.Imaging.ImageFormat.Bmp)
imgBinaryPhoto.DataValue = stream.ToArray()
End Sub

Related

Access Div tag in Page from Masterpage codebehind

I need access div in a page.
page.aspx
<asp:Content ID="Content" ContentPlaceHolderID="ContentPlaceHolderBody1" runat="server">
<div class="table-responsive">
<div class="card card-authentication1 mx-auto my-5" id="div_Payment" runat="server"></div>
</div
</asp:Content>
masterpage
protected void Admin_Load(object sender, EventArgs e)
{
HtmlControl control = (HtmlControl)Page.FindControl("ContentPlaceHolderBody1").FindControl("div_Payment");
HtmlControl control = (HtmlControl)Master.FindControl("ContentPlaceHolderBody1").FindControl("div_Payment");
control.Style.Add("display", "none");
}
no luck.
This should work:
Markup:
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
<asp:Label ID="Label1" runat="server" Text="This is fun"></asp:Label>
<div class="table-responsive">
<div class="card card-authentication1 mx-auto my-5" id="div_Payment" runat="server">xxxx</div>
</div>
</asp:Content>
code behind on master page:
System.Web.UI.WebControls.Label MyLabel1 =
(System.Web.UI.WebControls.Label)MainContent.FindControl("Label1");
Debug.Print("Value of Lable 1 on child page = " + MyLabel1.Text);
HtmlGenericControl MyDiv = (HtmlGenericControl)MainContent.FindControl("div_Payment");
Debug.Print("Inner text = " + MyDiv.InnerText);
so, you don't have to "find" the first "content" control - that will exist.
(you could, but it not required).
I found it
HtmlControl MyDiv = (HtmlControl)Page
.Master
.FindControl("ContentPlaceHolderBody1")
.FindControl("Panel1");

Only one instance of a ScriptManager can be added

Why do I get this error message: Only one instance of a ScriptManager can be added to the page?
I haven't been using HTML comment to hide an ASP.NET server tag and there is no other ScriptManager in the entire project.
Markup:
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
</div>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="lblCount" CssClass="LikeCount" Text='<%#Eval("LikeCount") %>' runat="server"></asp:Label>
<asp:LinkButton ID="lbAddOne" CssClass="LikeAddOne" Text="+1" runat="server" OnClick="lbAddOne_Click" CommandArgument='<%#Eval("ReviewID") %>'></asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
Code-behind:
protected void lbAddOne_Click(object sender, EventArgs e)
{
LinkButton _sender = (LinkButton)sender;
string ReviewID = _sender.CommandArgument;
int UserID = ((User)Session["LoggedInUser"]).UserID;
lblCount.Text = (int.Parse(lblCount.Text) + 1).ToString();
CategoryAccess.AddLikeReview(ReviewID, UserID);
}
just add a reference to scriptmanager in the masterpage, then it will be available to any page referencing the master. this will be easier to maintain in the long run rather than adding references to individual pages.

How to set width in percents for Telerik RadChart for Asp.Net Ajax?

How can I resize the RadChart of Telerik for asp ajax to the full width of the screen?
I found on the Telerik forum someone who opens a popup full screen containing your RadChart.
Look at the end, there is some code available : Telerik Forum
This is what I came up with and it works fine for me
C# code on the server
public void buttonUpdate_Click(object sender, EventArgs args)
{
this.radChart1.Visible = true;
this.radChart1.Width = Int32.Parse(this.hiddenFieldWidthInPixels.Value);
}
html and javascript on the client
<asp:UpdatePanel runat="server" ID="updatePanel" OnLoad="wtf" UpdateMode="Conditional">
<ContentTemplate>
<panel>
<asp:Button runat="server" ID="buttonUpdate" style="width:80%; height:10%; visibility: collapse; " Text="This is the update button and should not be visible" OnClick="buttonUpdate_Click" />
<asp:HiddenField runat="server" ID="hiddenFieldWidthInPixels" />
<telerik:RadChart runat="server" ID="radChart1" Visible="false" />
</panel>
</ContentTemplate>
</asp:UpdatePanel>
<script type="text/javascript">
function getASPElm(nm) {
if ($get(nm)) return $get(nm);
var e = document.getElementsByTagName('*');
for (var i = 0; i < e.length; i++) {
if (e[i].id) {
if (e[i].id.indexOf(nm) != -1) return e[i];
}
}
return null;
//http://forums.asp.net/t/1107047.aspx/1
}
var buttonUpdate = getASPElm('buttonUpdate');
var hiddenField = getASPElm('hiddenFieldWidthInPixels');
hiddenField.value = buttonUpdate.style.pixelWidth;
buttonUpdate.click();
</script>
And I also found this link on Telerik's site with another approach
link
LaGrandMere, thanks for the help, but the provided link did not really address mu issue.

ASP.NET Button Inside Repeater Inside UpdatePanel Won't Fire!

ASP.NET 3.5 SP 1 / Visual Studio 2008 V 9.x RTM
I am trying to get a button inside a repeater inside an updatepanel to fire.
I't won't. I have tried adding a trigger outside the ContentTemplate and inside
the UpdatePanel to no avail:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="BtnAddStatus" EventName="Click" />
</Triggers>
In fact, the AsyncPostBackTrigger's ControlID is always red and tells me "Cannot Resolve Symbol". This seems to be the case no matter where on the page I put the trigger.
I have read posts that have solved this problem by putting the button outside
of the UpdatePanel but then, graphically speaking, the button will not be in the
correct spot. It needs to be DIV with the ID of btnDiv.
So... how do I get the below button to fire?
<asp:Button ID="BtnAddStatus" CssClass="small button Detail" Text="Share" runat="server" />
ASPX code as follows:
<asp:Content ContentPlaceHolderID="ContentCenter" runat="server">
<asp:UpdatePanel ID="UpdatePanel1" UpdateMode="Always" runat="server">
<ContentTemplate>
<asp:Label ID="lblMessage" runat="server"></asp:Label>
<asp:Repeater ID="repFilter" runat="server"
onitemcommand="RepFilterItemCommand">
<HeaderTemplate>
<div class="UIComposer_Box">
<span class="w">
<asp:TextBox class="input" ID="txtStatusUpdate" TextMode="MultiLine" Columns="60"
name="txtStatusUpdate" Style="overflow: hidden; height: 40px; color: rgb(51, 51, 51);"
runat="server"></asp:TextBox>
</span>
<br clear="all">
<div id="btnDiv" style="padding: 10px 5px; height: 30px;" align="left">
<span style="float: left;"> PHP, Codeigniter, JQuery, AJAX Programming +
Tutorials ( <a href="http://www.x.info" target="_blank" style="color: rgb(236, 9, 43);">
www.x.info</a> ) </span>
<asp:Button ID="BtnAddStatus" CssClass="small button Detail" Text="Share" runat="server" />
</div>
</div>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="Label1" Text='<%# ((Alert)Container.DataItem).Message %>' runat="server"></asp:Label>
</ItemTemplate>
<FooterTemplate>
<br class="clear" />
</FooterTemplate>
</asp:Repeater>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
AND MY PAGE LOAD CODE:
protected void Page_Load(object sender, EventArgs e)
{
_presenter = new DefaultPresenter();
_presenter.Init(this);
}
AND THE BtnStatusClick Method:
protected void BtnAddStatusClick(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
var su = new StatusUpdate
{
CreateDate = DateTime.Now,
AccountId = _userSession.CurrentUser.AccountId,
Status = "" //txtStatusUpdate.Text
};
_statusRepository.SaveStatusUpdate(su);
_alertService.AddStatusUpdateAlert(su);
_presenter = new DefaultPresenter();
_presenter.Init(this);
}
}
Thanks again.
Have you tried setting the click event in the button instead of handling it from the code behind?
<asp:Button OnClick="BtnAddStatusClick" ID="BtnAddStatus" CssClass="small button Detail" Text="Share" runat="server" />

Button command firing twice with ButtonField inside GridView inside UpdatePanel with FireFox

I have an update panel which contains a GridView, inside which is a ButtonField. Whenever I press the button I see Firefox doing two POST's (via Firebug). One gets aborted right away, but does reach the server. This causes problems on my server side code as the command (a copy) gets executed twice.
IE6 and IE8 do not exhibit this behavior.
Anyone know what's causing this or what I can do about it?
I've managed to reproduce the problem to its bare minimum on this page:
<form id="form1" runat="server">
<asp:XmlDataSource ID="XmlDataSource1" runat="server">
<Data>
<bla>
<wibble wobble="1" />
</bla></Data>
</asp:XmlDataSource>
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:Label runat="server" ID="Counter" Text="0"></asp:Label>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="XmlDataSource1" onrowcommand="GridView1_RowCommand">
<Columns>
<asp:BoundField DataField="wobble" HeaderText="wobble"
SortExpression="wobble" />
<asp:ButtonField HeaderText="wobble" CommandName="IncrementWobble"
SortExpression="wobble" ButtonType="Image" ImageUrl="icons/page_copy.png" Text="increment" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</form>
While making this small version, I noticed that the problem only occurs with ButtonType="Image" and not with ButtonType="Button".
For completeness, the event handler:
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "IncrementWobble")
{
int count = Int32.Parse(Counter.Text) + 1;
Counter.Text = count.ToString();
}
}
From here, I found a workaround:
Replacing the ButtonField with a TemplateField containing an ImageButton works around the problem. Good enough for me, but still seems like a bug in either ASP .NET or FireFox.

Resources