Rotator for images with both columns and rows

Thread is closed for posting
2 posts, 0 answers
  1. A09E3270-F2B5-4216-B297-AD97B65F38F8
    A09E3270-F2B5-4216-B297-AD97B65F38F8 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.


  3. 000585EE-7DFC-4C10-B6EB-448F2DA3AFB4
    000585EE-7DFC-4C10-B6EB-448F2DA3AFB4 avatar
    7207 posts
    Member since:
    Jul 2016

    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

This Code Library is part of the product documentation and subject to the respective product license agreement.