hi...
i have a problem with Rad rotator (image gallery).
When i click an image, at first the page post back and then the image is seen above.
But in your example when i click the image, image is seen above without page doesn't post back.
the same thing happens when i click "ok" button for update the image's detail.
the client side code:
i have a problem with Rad rotator (image gallery).
When i click an image, at first the page post back and then the image is seen above.
But in your example when i click the image, image is seen above without page doesn't post back.
the same thing happens when i click "ok" button for update the image's detail.
the client side code:
| <%@ Page Title="" Language="C#" MasterPageFile="homepage.master" AutoEventWireup="true" CodeFile="photo.aspx.cs" Inherits="pages_photo" %> |
| <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> |
| <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> |
| <link type="text/css" rel="Stylesheet" href="../ClientFiles/css/gallery.css" /> |
| <style type="text/css"> |
| .itemTemplate |
| { |
| text-align:center; |
| padding:20px; |
| border: solid 1px #dddddd !important; |
| } |
| </style> |
| </asp:Content> |
| <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"> |
| <table width="100%" cellpadding="0" cellspacing="0"> |
| <tr> |
| <td> |
| <table width="100%"> |
| <tr> |
| <td> |
| <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="LoadingPanel1"> |
| <AjaxSettings> |
| <telerik:AjaxSetting AjaxControlID="thumbRotator"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="imagePreview" /> |
| <telerik:AjaxUpdatedControl ControlID="detailsPanel" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| <telerik:AjaxSetting AjaxControlID="UpdateButton"> |
| <UpdatedControls> |
| <telerik:AjaxUpdatedControl ControlID="detailsPanel" /> |
| </UpdatedControls> |
| </telerik:AjaxSetting> |
| </AjaxSettings> |
| </telerik:RadAjaxManager> |
| <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" Skin="Default" Transparency="30" |
| BackColor="#E0E0E0"> |
| <img src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' |
| alt="Loading..." style="border: 0;" /> |
| </telerik:RadAjaxLoadingPanel> |
| <table id="tblGallery" width="683" cellpadding="0" cellspacing="0" border="0" runat="server" > |
| <tr> |
| <%--<td style="height: 22px"> |
| <img src="../ClientFiles/resimler/imagegallery/White.gif" height="22" width="60" alt="" style="float: left;" /> |
| </td>--%> |
| <td style="height: 22px"> |
| <img src="../ClientFiles/resimler/imagegallery/cornerLeftTop.gif" height="22" width="50" alt="" style="float: left;" /> |
| </td> |
| <td style="height: 22px"> |
| <img src="../ClientFiles/resimler/imagegallery/topLeft.gif" height="22" width="292" alt="" style="float: left;" /> |
| </td> |
| <td style="height: 22px"> |
| <img src="../ClientFiles/resimler/imagegallery/topRight.gif" height="22" width="280" alt="" style="float: left;" /> |
| </td> |
| <td style="height: 22px"> |
| <img src="../ClientFiles/resimler/imagegallery/cornerRightTop.gif" height="22" width="62" alt="" style="float: left;" /> |
| </td> |
| </tr> |
| <tr style="vertical-align:middle;"> |
| <%--<td> |
| <img src="../ClientFiles/resimler/imagegallery/whiteMiddle.gif" height="243" width="60" alt="" style="float: left;" /> |
| </td>--%> |
| <td> |
| <img src="../ClientFiles/resimler/imagegallery/leftFrame.gif" height="243" width="50" alt="" style="float: left;" /> |
| </td> |
| <td class="previewPane" style="vertical-align:top;"> |
| <div style="margin-top: 20px"> |
| <%--<asp:Image ID="imagePreview2" runat="server" ImageUrl="../ClientFiles/resimler/imagegallery/spacer.gif" Height="192px" |
| Width="272px" AlternateText="preview" BorderWidth="0"> |
| </asp:Image>--%> |
| <img id="imagePreview" name="imagePreview" runat="server" onclick="window.open(imagePreview.src);" src="../ClientFiles/resimler/imagegallery/spacer.gif" height="192" |
| width="272" title="preview" style="border-width:0"/> |
| </div> |
| </td> |
| <td class="infoPane" style="vertical-align:top;"> |
| <div class="infoPaneBg" runat="server" id="detailsPanel"> |
| <div class="imageDetailsHeader"> |
| Resim detayları: </div> |
| <div id="viewPanel"> |
| <div class="details"> |
| <input type="hidden" ID='hdnImageID' runat="server" /> |
| </div> |
| <div class="details"> |
| <strong>İsim:</strong> |
| <asp:Label ID="labelImageName" runat="server"></asp:Label> |
| </div> |
| <div class="details"> |
| <strong>Resim Adı:</strong> |
| <asp:Label ID="labelImageKeywords" runat="server"></asp:Label> |
| </div> |
| <div class="details"> |
| <strong>Açıklama:</strong> |
| <asp:Label ID="labelImageComments" runat="server"></asp:Label> |
| </div> |
| <div id="divUpdateButton" class="details" style="margin-top: 5px; margin-left: 28px" runat="server"> |
| <a href="javascript:buttonEditClicked();"> |
| <img style="border-top-style: none; border-right-style: none; border-left-style: none; |
| border-bottom-style: none" height="21" alt="" src="../ClientFiles/resimler/imagegallery/editBtn.gif" width="60" /></a> |
| </div> |
| </div> |
| <div style="display: none" id="editPanel"> |
| <div class="details"> |
| <strong>İsim:</strong> |
| <asp:TextBox ID="textImageName" runat="server" CssClass="detailsTxtBox"></asp:TextBox> |
| </div> |
| <div class="details"> |
| <strong>Resim Adı:</strong> |
| <asp:TextBox ID="textImageKeywords" runat="server" CssClass="detailsTxtBox"></asp:TextBox> |
| </div> |
| <div class="details"> |
| <strong>Açıklama:</strong> |
| <asp:TextBox ID="textImageComments" runat="server" CssClass="detailsTxtBox"></asp:TextBox> |
| </div> |
| <div class="details"> |
| <asp:LinkButton CssClass="editBtns" ID="UpdateButton" runat="Server" OnClick="UpdateButton_Click">OK</asp:LinkButton> <a class="editBtns" |
| href="javascript:buttonCancelClicked();">Cancel</a> |
| </div> |
| </div> |
| </div> |
| </td> |
| <td> |
| <img src="../ClientFiles/resimler/imagegallery/rightFrame.gif" height="243" width="62" alt="" style="float: left;" /> |
| </td> |
| </tr> |
| <tr> |
| <%--<td> |
| <img src="../ClientFiles/resimler/imagegallery/whiteShadow.gif" height="117" width="60" alt="" /> |
| </td>--%> |
| <td> |
| <img src="../ClientFiles/resimler/imagegallery/left.gif" id="img_left" height="117" width="50" alt="" style="cursor: pointer" /> |
| </td> |
| <td colspan="2" class="thumbsViewer"> |
| <telerik:RadRotator ID="thumbRotator" runat="server" RotatorType="ButtonsOver" Width="572" |
| Height="118px" ItemHeight="118" ItemWidth="145" FrameDuration="1" |
| ScrollDirection="Left,Right" OnItemClick="ShowImage"> |
| <ItemTemplate> |
| <div class="itemTemplate"> |
| <img src='<%# DataBinder.Eval(Container.DataItem, "Image") %>' width='90px' alt='gallery image' |
| class="RotatorImage" /><br /> |
| <%# DataBinder.Eval(Container.DataItem, "Name")%> |
| </div> |
| </ItemTemplate> |
| <ControlButtons LeftButtonID="img_left" RightButtonID="img_right" /> |
| </telerik:RadRotator> |
| </td> |
| <td> |
| <img src="../ClientFiles/resimler/imagegallery/right.gif" id="img_right" height="117" width="62" alt="" style="cursor: pointer" /> |
| </td> |
| </tr> |
| </table> |
| <telerik:RadCodeBlock ID="rcb1" runat="Server"> |
| <script type="text/javascript"> |
| function buttonEditClicked() |
| { |
| var panelViewImage = $get("viewPanel"); |
| panelViewImage.style.display = "none"; |
| var panelEditImage = $get("editPanel"); |
| panelEditImage.style.display = "block"; |
| } |
| function buttonCancelClicked() |
| { |
| var panelViewImage = $get("viewPanel"); |
| panelViewImage.style.display = "block"; |
| var panelEditImage = $get("editPanel"); |
| panelEditImage.style.display = "none"; |
| } |
| </script> |
| </telerik:RadCodeBlock> |
| <%--<div id="divPagePhoto" runat="server"></div>--%> |
| </td> |
| </tr> |
| </table> |
| </td> |
| </tr> |
| </table> |
| </asp:Content> |
2 Answers, 1 is accepted
0
Murat Co
Top achievements
Rank 1
Rank 1
answered on 06 Aug 2009, 12:56 PM
| using System; |
| using System.Collections.Generic; |
| using System.Data; |
| using System.Linq; |
| using System.Web; |
| using System.Web.UI; |
| using System.Web.UI.WebControls; |
| using Telerik.Web.UI; |
| public partial class pages_photo : System.Web.UI.Page |
| { |
| ........ |
| [Serializable()] |
| private struct fileInfo |
| { |
| public string filename; |
| public string ID; |
| public string name; |
| public string alttext; |
| public string description; |
| } |
| private List<fileInfo> imagesArray |
| { |
| get { return (List<fileInfo>)ViewState["imagesArray"]; } |
| set { ViewState["imagesArray"] = value; } |
| } |
| protected void Page_Load(object sender, EventArgs e) |
| { |
| #region Değişkenler |
| ...... |
| #endregion |
| #region Kullanıcı Kontrol |
| ..... |
| if (.......) |
| { |
| divUpdateButton.Visible = false; |
| } |
| #endregion |
| if(......) |
| { |
| tblGallery.Visible = false; |
| } |
| if (!IsPostBack) |
| { |
| if (strAlbumID != "") |
| { |
| ResimleriYukle(strAlbumID); |
| } |
| } |
| } |
| protected void ResimleriYukle(string pstrAlbumID) |
| { |
| string strImageSQL = " SELECT * FROM ....."; |
| DataTable dtImage = ............. |
| imagesArray = new List<fileInfo>(); |
| if (dtImage.Rows.Count > 0) |
| { |
| for (int i = 0; i < dtImage.Rows.Count; i++) |
| { |
| fileInfo fInfo = new fileInfo(); |
| fInfo.name = dtImage.Rows[i]["ImageName"].ToString(); //"Images/" + fileName.Substring(fileName.LastIndexOf("\\") + 1); |
| fInfo.ID = dtImage.Rows[i]["ID"].ToString(); |
| fInfo.filename = dtImage.Rows[i]["Path"].ToString(); |
| fInfo.alttext = dtImage.Rows[i]["AltText"].ToString(); |
| fInfo.description = dtImage.Rows[i]["Description"].ToString(); |
| imagesArray.Add(fInfo); |
| } |
| } |
| RebindRotator(); |
| } |
| private fileInfo FindFileInfo(string filePath) |
| { |
| string fileName = filePath.Replace(".jpg", "s.jpg"); |
| foreach (fileInfo tempInfo in imagesArray) |
| { |
| if (tempInfo.filename == fileName) |
| return tempInfo; |
| } |
| return new fileInfo(); |
| } |
| private void RebindRotator() |
| { |
| DataTable rotatorData = new DataTable(); |
| rotatorData.Columns.Add("Image"); |
| rotatorData.Columns.Add("Name"); |
| foreach (fileInfo tempInfo in imagesArray) |
| { |
| rotatorData.Rows.Add(new string[] { tempInfo.filename, tempInfo.name }); |
| } |
| thumbRotator.DataSource = rotatorData; |
| thumbRotator.DataBind(); |
| } |
| protected void ShowImage(object sender, RadRotatorEventArgs e) |
| { |
| fileInfo fInfo = imagesArray[e.Item.Index]; |
| //imagePreview.ImageUrl = fInfo.filename.Replace("s.jpg", ".jpg"); |
| imagePreview.Src = fInfo.filename.Replace("s.jpg", ".jpg"); |
| //set the image information |
| labelImageComments.Text = fInfo.description; |
| labelImageKeywords.Text = fInfo.alttext; |
| labelImageName.Text = fInfo.name; |
| hdnImageID.Value = fInfo.ID; |
| textImageComments.Text = fInfo.description; |
| textImageKeywords.Text = fInfo.alttext; |
| textImageName.Text = fInfo.name; |
| } |
| protected void UpdateButton_Click(object sender, EventArgs e) |
| { |
| if (imagePreview.Src != "../spacer.gif") |
| { |
| //fileInfo fInfo = FindFileInfo(imagePreview.ImageUrl); |
| fileInfo fInfo = FindFileInfo(imagePreview.Src); |
| int index = imagesArray.IndexOf(fInfo); |
| imagesArray.Remove(fInfo); |
| fInfo.name = textImageName.Text; |
| fInfo.ID = hdnImageID.Value; |
| fInfo.alttext = textImageKeywords.Text; |
| fInfo.description = textImageComments.Text; |
| labelImageComments.Text = fInfo.description; |
| labelImageKeywords.Text = fInfo.alttext; |
| labelImageName.Text = fInfo.name; |
| imagesArray.Insert(index, fInfo); |
| RebindRotator(); |
| string strUPDATESQL = " UPDATE ... SET ImageName='" + fInfo.name + "',AltText='" + fInfo.alttext + "',Description='" + fInfo.description + "' WHERE ID='" + fInfo.ID + "' "; |
| .... ..Update database process.... |
| } |
| } |
0
Hello Murat,
I prepared a very simple application by using the provided code but I was not able to reproduce any problem. Could you please rework the attached project and send it back? I will check it and do my best to provide a working solution.
Best wishes,
Fiko
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
I prepared a very simple application by using the provided code but I was not able to reproduce any problem. Could you please rework the attached project and send it back? I will check it and do my best to provide a working solution.
Best wishes,
Fiko
the Telerik team
Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.