Rotator for images with both columns and rows

2 posts, 0 answers
  1. Patrick
    Patrick avatar
    8 posts
    Member since:
    Oct 2007

    Posted 24 Sep 2009 Link to this post

    Requirements

    RadControls version

    2009.2 826
    .NET version

    3.5
    Visual Studio version

    2008
    programming language

    c#
    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    I needed a way to use a rotator to have both columns of images and rows. I came up with a solution that I am posting. The only issue is that for the number of images across, you need a full row or you can put in a dummy image or coming soon image. There are ways to hack that. I chose to display a image saying image coming soon,  A blank black box would have worked as well.

    Here is the rotator in the ASPX file:
                    <telerik:RadRotator ID="RadRotator1" runat="server" Width="795px" Height="478px" ScrollDuration="500" ScrollDirection="Up" FrameDuration="500" ItemWidth="795" ItemHeight="124"  RotatorType="ButtonsOver" BorderWidth="0"
                        <ItemTemplate> 
                            <asp:Table ID="tblRotator" runat="server" BorderWidth="0px"
     
                                <asp:TableRow> 
                                    <asp:TableCell><img src="<%# String.Format("MakeImage.aspx?width=143&height=104&file=~/images/gallery/{0}", DataBinder.Eval(Container.DataItem, "galleryImage1")) %>onclick="openWin('<%# String.Format("{0}", DataBinder.Eval(Container.DataItem, "galleryImageID1")) %>');" /></asp:TableCell> 
                                    <asp:TableCell Width="20px"></asp:TableCell> 
                                    <asp:TableCell><img src="<%# String.Format("MakeImage.aspx?width=143&height=104&file=~/images/gallery/{0}", DataBinder.Eval(Container.DataItem, "galleryImage2")) %>onclick="openWin('<%# String.Format("{0}", DataBinder.Eval(Container.DataItem, "galleryImageID2")) %>');" /></asp:TableCell> 
                                    <asp:TableCell Width="20px"></asp:TableCell> 
                                    <asp:TableCell><img src="<%# String.Format("MakeImage.aspx?width=143&height=104&file=~/images/gallery/{0}", DataBinder.Eval(Container.DataItem, "galleryImage3")) %>onclick="openWin('<%# String.Format("{0}", DataBinder.Eval(Container.DataItem, "galleryImageID3")) %>');" /></asp:TableCell> 
                                    <asp:TableCell Width="20px"></asp:TableCell> 
                                    <asp:TableCell><img src="<%# String.Format("MakeImage.aspx?width=143&height=104&file=~/images/gallery/{0}", DataBinder.Eval(Container.DataItem, "galleryImage4")) %>onclick="openWin('<%# String.Format("{0}", DataBinder.Eval(Container.DataItem, "galleryImageID4")) %>');" /></asp:TableCell> 
                                    <asp:TableCell Width="20px"></asp:TableCell> 
                                    <asp:TableCell><img src="<%# String.Format("MakeImage.aspx?width=143&height=104&file=~/images/gallery/{0}", DataBinder.Eval(Container.DataItem, "galleryImage5")) %>onclick="openWin('<%# String.Format("{0}", DataBinder.Eval(Container.DataItem, "galleryImageID5")) %>');" /></asp:TableCell> 
                                </asp:TableRow> 
                            </asp:Table> 
                             
                             
                        </ItemTemplate> 
                        <ControlButtons DownButtonID="img_down" UpButtonID="img_up" /> 
                    </telerik:RadRotator> 

    Here is the c# server side code. This takes an sql database and creates a dataset for it you put into the rotator. Also note, you could set up as many columns as you want, I chose 5 for what I needed.

        protected void Page_Load(object sender, EventArgs e) 
        { 
     
            DataTable myTable = new DataTable(); 
     
     
            myTable.Columns.Add("galleryImageID1"); 
            myTable.Columns.Add("galleryImage1"); 
            myTable.Columns.Add("galleryImageID2"); 
            myTable.Columns.Add("galleryImage2"); 
            myTable.Columns.Add("galleryImageID3"); 
            myTable.Columns.Add("galleryImage3"); 
            myTable.Columns.Add("galleryImageID4"); 
            myTable.Columns.Add("galleryImage4"); 
            myTable.Columns.Add("galleryImageID5"); 
            myTable.Columns.Add("galleryImage5"); 
     
            int[] galleryImageID = new int[6]; 
            string[] galleryImage = new string[6]; 
     
            SqlDataReader myDataReader; 
            SqlConnection myConnection = new SqlConnection(Session["strConn"].ToString()); 
            myConnection.Open(); 
     
            SqlCommand myCommand; 
            SqlCommand myCommandCount; 
     
            myCommand = new SqlCommand("SELECT * FROM gallerytb"); 
            myCommandCount = new SqlCommand("SELECT COUNT(*) as Counter FROM gallerytb"); 
     
            myCommandCount.Connection = myConnection; 
            int bicyleItems = Convert.ToInt16(myCommandCount.ExecuteScalar()); 
     
            myCommand.Connection = myConnection; 
            myDataReader = myCommand.ExecuteReader(); 
     
            int maxcolumns = 5; 
            int maxrows = (Convert.ToInt16(bicyleItems) / Convert.ToInt16(maxcolumns)); 
     
     
             
            if (maxrows > 0) 
            { 
                for(int rows = 1; rows <= maxrows; rows++) 
                { 
                    for(int columns = 1; columns <= maxcolumns; columns++) 
                    { 
                        if (myDataReader.Read()) 
                        { 
                            //bicycleImageID[columns] = 15; 
                            //Response.Write("Reader: " + myDataReader["galleryImageID"].ToString() + " ... "); 
                            galleryImageID[columns] = Convert.ToInt16(myDataReader["galleryImageID"].ToString()); 
                            galleryImage[columns] = myDataReader["galleryImage"].ToString(); 
                            //myTable.Rows.Add(new string[] { myDataReader["galleryImageID"].ToString(), myDataReader["galleryImage"].ToString() }); 
                        } 
                        //Response.Write(myDataReader["galleryImageID"].ToString() + " " + myDataReader["galleryImage"].ToString()); 
                    } 
                    myTable.Rows.Add(new string[] { galleryImageID[1].ToString(), galleryImage[1].ToString(), galleryImageID[2].ToString(), galleryImage[2].ToString(), galleryImageID[3].ToString(), galleryImage[3].ToString(), galleryImageID[4].ToString(), galleryImage[4].ToString(), galleryImageID[5].ToString(), galleryImage[5].ToString() }); 
                } 
     
                // Now fill in the last row 
                int ItemsLeft = bicyleItems - (maxrows * 5); 
                //Response.Write("Items left: " + ItemsLeft); 
                switch (bicyleItems - (maxrows * 5)) 
                { 
                    case 4: 
                        for (int columns = 1; columns <= 5; columns++) 
                        { 
                            if (myDataReader.Read()) 
                            { 
                                //bicycleImageID[columns] = 15; 
                                //Response.Write("Reader: " + myDataReader["galleryImageID"].ToString() + " ... "); 
                                galleryImageID[columns] = Convert.ToInt16(myDataReader["galleryImageID"].ToString()); 
                                galleryImage[columns] = myDataReader["galleryImage"].ToString(); 
                                //myTable.Rows.Add(new string[] { myDataReader["galleryImageID"].ToString(), myDataReader["galleryImage"].ToString() }); 
                            } 
                            else 
                            { 
                                galleryImageID[columns] = 0; 
                                galleryImage[columns] = "imgPlcHldr.jpg"
                            } 
                            //Response.Write(myDataReader["galleryImageID"].ToString() + " " + myDataReader["galleryImage"].ToString()); 
                        } 
                        //myTable.Rows.Add(new string[] { galleryImageID[1].ToString(), galleryImage[1].ToString(), galleryImageID[2].ToString(), galleryImage[2].ToString(), galleryImageID[3].ToString(), galleryImage[3].ToString(), galleryImageID[4].ToString(), galleryImage[4].ToString() }); 
                        myTable.Rows.Add(new string[] { galleryImageID[1].ToString(), galleryImage[1].ToString(), galleryImageID[2].ToString(), galleryImage[2].ToString(), galleryImageID[3].ToString(), galleryImage[3].ToString(), galleryImageID[4].ToString(), galleryImage[4].ToString(), galleryImageID[5].ToString(), galleryImage[5].ToString() }); 
                        break
                    case 3: 
                        for (int columns = 1; columns <= 5; columns++) 
                        { 
                            if (myDataReader.Read()) 
                            { 
                                //bicycleImageID[columns] = 15; 
                                //Response.Write("Reader: " + myDataReader["galleryImageID"].ToString() + " ... "); 
                                galleryImageID[columns] = Convert.ToInt16(myDataReader["galleryImageID"].ToString()); 
                                galleryImage[columns] = myDataReader["galleryImage"].ToString(); 
                                //myTable.Rows.Add(new string[] { myDataReader["galleryImageID"].ToString(), myDataReader["galleryImage"].ToString() }); 
                            } 
                            else 
                            { 
                                galleryImageID[columns] = 0; 
                                galleryImage[columns] = "imgPlcHldr.jpg"
                            } 
                            //Response.Write(myDataReader["galleryImageID"].ToString() + " " + myDataReader["galleryImage"].ToString()); 
                        } 
                        //myTable.Rows.Add(new string[] { galleryImageID[1].ToString(), galleryImage[1].ToString(), galleryImageID[2].ToString(), galleryImage[2].ToString(), galleryImageID[3].ToString(), galleryImage[3].ToString() }); 
                        myTable.Rows.Add(new string[] { galleryImageID[1].ToString(), galleryImage[1].ToString(), galleryImageID[2].ToString(), galleryImage[2].ToString(), galleryImageID[3].ToString(), galleryImage[3].ToString(), galleryImageID[4].ToString(), galleryImage[4].ToString(), galleryImageID[5].ToString(), galleryImage[5].ToString() }); 
                        break
                    case 2: 
                        for (int columns = 1; columns <= 5; columns++) 
                        { 
                            if (myDataReader.Read()) 
                            { 
                                //bicycleImageID[columns] = 15; 
                                //Response.Write("Reader: " + myDataReader["galleryImageID"].ToString() + " ... "); 
                                galleryImageID[columns] = Convert.ToInt16(myDataReader["galleryImageID"].ToString()); 
                                galleryImage[columns] = myDataReader["galleryImage"].ToString(); 
                                //myTable.Rows.Add(new string[] { myDataReader["galleryImageID"].ToString(), myDataReader["galleryImage"].ToString() }); 
                            } 
                            else 
                            { 
                                galleryImageID[columns] = 0; 
                                galleryImage[columns] = "imgPlcHldr.jpg"
                            } 
                            //Response.Write(myDataReader["galleryImageID"].ToString() + " " + myDataReader["galleryImage"].ToString()); 
                        } 
                        //myTable.Rows.Add(new string[] { galleryImageID[1].ToString(), galleryImage[1].ToString(), galleryImageID[2].ToString(), galleryImage[2].ToString() }); 
                        myTable.Rows.Add(new string[] { galleryImageID[1].ToString(), galleryImage[1].ToString(), galleryImageID[2].ToString(), galleryImage[2].ToString(), galleryImageID[3].ToString(), galleryImage[3].ToString(), galleryImageID[4].ToString(), galleryImage[4].ToString(), galleryImageID[5].ToString(), galleryImage[5].ToString() }); 
                        break
                    case 1: 
                        for (int columns = 1; columns <= 5; columns++) 
                        { 
                            if (myDataReader.Read()) 
                            { 
                                //bicycleImageID[columns] = 15; 
                                //Response.Write("Reader: " + myDataReader["galleryImageID"].ToString() + " ... "); 
                                galleryImageID[columns] = Convert.ToInt16(myDataReader["galleryImageID"].ToString()); 
                                galleryImage[columns] = myDataReader["galleryImage"].ToString(); 
                                //myTable.Rows.Add(new string[] { myDataReader["galleryImageID"].ToString(), myDataReader["galleryImage"].ToString() }); 
                            } 
                            else 
                            { 
                                galleryImageID[columns] = 0; 
                                galleryImage[columns] = "imgPlcHldr.jpg"
                            } 
                            //Response.Write(myDataReader["galleryImageID"].ToString() + " " + myDataReader["galleryImage"].ToString()); 
                        } 
                        //myTable.Rows.Add(new string[] { galleryImageID[1].ToString(), galleryImage[1].ToString() }); 
                        myTable.Rows.Add(new string[] { galleryImageID[1].ToString(), galleryImage[1].ToString(), galleryImageID[2].ToString(), galleryImage[2].ToString(), galleryImageID[3].ToString(), galleryImage[3].ToString(), galleryImageID[4].ToString(), galleryImage[4].ToString(), galleryImageID[5].ToString(), galleryImage[5].ToString() }); 
                        break
                } 
            } 
     
     
            myDataReader.Close(); 
            myConnection.Close(); 
     
     
            RadRotator1.DataSource = myTable; 
            RadRotator1.DataBind(); 
     
          
        } 
    I am sure there is room for improvment but from the attached image you can see it works just fine for what we need. We click the image and the image opens in a radwindow for us. Also this image only shows 2 rows. There is room for 4 in the rotator with many more using the up and down arrows. Once the gallery gets filled this will be a 5 x 4 grid of images.


  2. Georgi Tunev
    Admin
    Georgi Tunev avatar
    7207 posts

    Posted 25 Sep 2009 Link to this post

    Hello Patrick,

    Thank you for sharing your solution with us. Your points have been updated.


    Sincerely yours,
    Georgi Tunev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top