images from DB to RadBinaryImage inside RadRotator, which is inside RadGrid - problems

[Dariusz]

Hello again... I tried doing that in many ways... always something was wrong.

So, I have a RadGrid for my products from database. 1 product per row - ok. 
Now for each product I have at least 1 image in other table. That's why I wanted to add RadRotator in one column so that for each product people can see all images (RadRotator with buttons).

Here's the code for the column with photos:

<telerik:GridTemplateColumn HeaderText="Zdjęcia" HeaderStyle-Width="120px" HeaderStyle-HorizontalAlign="Center"

   ItemStyle-HorizontalAlign="Center" AllowFiltering="false">
<ItemTemplate>
<telerik:RadRotator runat="server" ID="itemsRotator" OnDataBinding="RadRotator_OnDataBinding" Height="128px">

     <ItemTemplate>

         <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%#Eval("zdjecie") %>'

            AutoAdjustImageControlSize="false" Width="128px" Height="128px" ResizeMode="Fit" ImageAlign="Middle"/>

     </ItemTemplate>

</telerik:RadRotator>

    </ItemTemplate>
</telerik:GridTemplateColumn>

Photos size are different (some 212 x 212, 211 x 211 - small differences) so I want them to fit.

Also I added a server-side code:

protected void RadRotator_OnDataBinding(object sender, EventArgs e)
        {
            string tmp = obecnyitem["ProductID"].Text;

            RadRotator radrotator = (RadRotator)obecnyitem.FindControl("itemsRotator");

            SqlConnection sqlconn = new SqlConnection();
            sqlconn.ConnectionString = @"data source=UNDERGROUND\SQLEXPRESS;UID=sa;PWD=ds3236y;initial catalog=Products";
            sqlconn.Open();
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = sqlconn;
            cmd.CommandText = "select count(1) from katalog_zdjecia where indeks = '" + tmp + "'";

            int tmp1 = System.Convert.ToInt32(cmd.ExecuteScalar());

            sqlconn.Close();
            cmd.Dispose();
            sqlconn.Dispose();

            SqlDataSource sqldatsrc = new SqlDataSource();
            sqldatsrc.ConnectionString = @"data source=UNDERGROUND\SQLEXPRESS;UID=sa;PWD=ds3236y;initial catalog=Products";
            sqldatsrc.ProviderName = "System.Data.SqlClient";
            sqldatsrc.SelectCommand = "select indeks, zdjecie from katalog_zdjecia where indeks = '" + tmp + "'";
            radrotator.DataSource = sqldatsrc;

            if (tmp1 > 1)
                radrotator.RotatorType = RotatorType.Buttons;
            else
                radrotator.RotatorType = RotatorType.AutomaticAdvance;

        }

so it checks the amount of photos for current row. If it's > 1 then add buttons to rotator, else set it to AutomaticAdvance as it won't advance when there'll be 1 photo.

currently that column looks like in the attached file.

Problems:

1. When I have many photos and buttons in RadRotator - it's centered, when I set it to AutomaticAdvance it on the left side, why?
2. As You can see in first 3 rows, there are more than 1 photo per row. But instead of showing only one photo with ability to rotate, I see one photo and a part of second photo, when I rotate then, I see part of second photo and part of 3rd photo etc... I think I messed something with the sizes as I'd like to see max 1 photo.

Best Regards
Darek

[Kevin]

Hello Dariusz,

To answer your questions:

1. All of them are left-aligned, but the rotator creates the illusion of being centered because it has a larger width. You should set HorizontalAlign="Center" on your column, so they are all centered.
2. The reason it shows some of the other photo, is because you didn't set the ItemWidth and ItemHeight properties of the RadRotator. You should set them to the same height and width of the image being shown. That way the rotator knows how to display the image.

As a side note, I would suggest setting the rotator's that only show one image to use the FromCode RotatorType, as it literally does nothing unless you code the navigation and it might reduce any unnecessary processing on the client.

I hope that helps.

[Dariusz]

Hello Kevin,

Thanks for the answers.

1. I already did that (check my code) and it still doesn't work.

2. Changed the ItemWidth/Height:

<telerik:GridTemplateColumn HeaderText="Zdjęcia" HeaderStyle-Width="120px" HeaderStyle-HorizontalAlign="Center"
                         ItemStyle-HorizontalAlign="Center" AllowFiltering="false">
                            <ItemTemplate>
                                <telerik:RadRotator runat="server" ID="itemsRotator" OnDataBinding="RadRotator_OnDataBinding" Height="128px"
                                 ItemWidth="128px" ItemHeight="128px">
                                    <ItemTemplate>
                                        <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" DataValue='<%#Eval("zdjecie") %>'
                                           AutoAdjustImageControlSize="false" Width="128px" Height="128px" ResizeMode="Fit" ImageAlign="Middle"/>
                                    </ItemTemplate>
                                </telerik:RadRotator>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>

 and it still looks like in the file attached.

As for the side note.... I'm sorry I'm not that good with asp.net and radcontrolls but I don't know how to do the thing you mention.

Regards
Darek

[Kevin]

Hello Dariusz,

Try setting the Rotator Width="158px". The reason it's 158px is because the rotator subtracts 30px from the width that is set on it, to accomodate the buttons.

To explain my side note. In your code your setting the RotatorType like so:

radrotator.RotatorType = RotatorType.AutomaticAdvance;

I was suggesting to do it like so:

radrotator.RotatorType = RotatorType.FromCode;

I hope that helps.

[Dariusz]

ok, update:

1. The width 158px did the job, now it looks ok :) (as in the image attached). Thanks for the info about width for buttons, but
2. Still when rotating images, they don't rotate properly. I still see a part of other image (in attached file you have 3 rotators with the same images, 1st is with the 1st image, next rotator with 2nd image - you can see it didn't rotate fully, and on the last rotator last photo - same problem).

3. 4th row shows a single image rotator, still not centered.

The thing with RotatorType.FromCode made it look like no side buttons and i saw 1 full and 1/8 part of the next image.

I guess I still need some help with it :(

[Dariusz]

Solved !! I had to add 30 px to Width for buttons and another 10 px for something??? (Google Chrome showerd it as RelativeWrapper/ClipRegion . After adding those 40px - images rotate correctly and fit perfect :)

So only 1 problem remains - when I have only 1 image and I remove rotator buttons - the image is not centered (as you can check in previous images) - what could be the reason for that?

////////////// solved too :)
In my code I had to change the rotator width when it had only 1 image to 128px. it seems that radrotator always moves it all to left and when my container (which with 1 image had totally 128px) was set to 168px - it was larges so it was moves more to the left. the container itself is centered, but the components inside are not.

But now it works, thank you Kevin. I wouldn't do that without your help.