This is a migrated thread and some comments may be shown as answers.

Image Gallery, page postback

2 Answers 124 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Murat Co
Top achievements
Rank 1
Murat Co asked on 06 Aug 2009, 12:46 PM
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: 
<%@ 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>&nbsp;  
                                                    <asp:Label ID="labelImageName" runat="server"></asp:Label> 
                                                </div> 
                                                <div class="details">  
                                                    <strong>Resim Adı:</strong>&nbsp;  
                                                    <asp:Label ID="labelImageKeywords" runat="server"></asp:Label> 
                                                </div> 
                                                <div class="details">  
                                                    <strong>Açıklama:</strong>&nbsp;  
                                                    <asp:Label ID="labelImageComments" runat="server"></asp:Label> 
                                                </div> 
                                                <div id="divUpdateButton" class="details" style="margin-top: 5px; margin-left: 28px" runat="server">  
                                                    <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>&nbsp;  
                                                    <asp:TextBox ID="textImageName" runat="server" CssClass="detailsTxtBox"></asp:TextBox> 
                                                </div> 
                                                <div class="details">  
                                                    <strong>Resim Adı:</strong>&nbsp;  
                                                    <asp:TextBox ID="textImageKeywords" runat="server" CssClass="detailsTxtBox"></asp:TextBox> 
                                                </div> 
                                                <div class="details">  
                                                    <strong>Açıklama:</strong>&nbsp;  
                                                    <asp:TextBox ID="textImageComments" runat="server" CssClass="detailsTxtBox"></asp:TextBox> 
                                                </div> 
                                                <div class="details">  
                                                    &nbsp;<asp:LinkButton CssClass="editBtns" ID="UpdateButton" runat="Server" OnClick="UpdateButton_Click">OK</asp:LinkButton> <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

Sort by
0
Murat Co
Top achievements
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....  
}  
    } 
and this is server side code:

0
Fiko
Telerik team
answered on 07 Aug 2009, 02:28 PM
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.
Tags
Rotator
Asked by
Murat Co
Top achievements
Rank 1
Answers by
Murat Co
Top achievements
Rank 1
Fiko
Telerik team
Share this question
or