How to rotate image carousel mode from sql db

[atik]

Hi,
     i am new in telerik control.
     i want to use image rotator using Carousel mode. Like:
    
     http://demos.telerik.com/aspnet-ajax/rotator/examples/carouselmode/defaultcs.aspx

      in this demo the images comes from a specific folder.
     
      i want to load the rotator's images from sql database. is their any help...for me ?
     

[Kevin]

Hello atik,

Instead of using the Image control, you would need to use the RadBinaryImage control in your ItemTemplate, if you're loading the images from the database.

<telerik:RadRotator ID="RadRotator1" runat="server" Width="810px" ItemWidth="300"
                Height="350px" ItemHeight="220" ScrollDuration="500" FrameDuration="2000"
                PauseOnMouseOver="false" RotatorType="CarouselButtons" OnClientItemClicked="OnClientItemClicked">
                <ItemTemplate>
                    <telerik:RadBinaryImage ID="Image1" runat="server" DataValue='<%# Eval("ImageColumn") %>' />
                </ItemTemplate>
            </telerik:RadRotator>

I hope that helps.

[atik]

thank you for your feedback.

i can't seen image for the slide show. the   RadRotator1.DataSource = GetAllProductName();
can't display the images. where i am wrong i can't find out. this is my code.

UI aspx:

<telerik:RadRotator ID="RadRotator1" runat="server" Width="810px" ItemWidth="300"
                Height="350px" ItemHeight="220" ScrollDuration="500" FrameDuration="2000"
                PauseOnMouseOver="false" RotatorType="CarouselButtons" OnClientItemClicked="OnClientItemClicked">
                <ItemTemplate>
                    <telerik:RadBinaryImage ID="Image1" runat="server" DataValue='<%# Eval("Photo") %>' />
                </ItemTemplate>
            </telerik:RadRotator>

hare i am use LINQ for data.

protected void Page_Load(object sender, EventArgs e)
{
    LoadSlide();
}

private void LoadSlide()
{
  RadRotator1.DataSource = GetAllProductName();
}

public List<BasicInfo> GetAllProductName()
{
    IECLDataContexDataContext dataContexObj = new IECLDataContexDataContext();
    List<BasicInfo> products = new List<BasicInfo>();
    foreach (var p in (from j in dataContexObj.NEW_PROJECT_INFOs select new { j.PROJECT_PHOTO}).Distinct())
    {
        BasicInfo aProduct = new BasicInfo();
        aProduct.Photo = p.PROJECT_PHOTO;
        products.Add(aProduct);
    }
    return products;
}

and my class:

public class BasicInfo
   {
       public Binary Photo { get; set; }


   }

Thank you in advance.

[Kevin]

Hello atik,

Try changing you Binary property into a Byte[] array. Then in your GetAllProductName, call the ToArray() method on your PROJECT_PHOTO column.

So it would look something like this:

protected void Page_Load(object sender, EventArgs e)
{
    LoadSlide();
}

private void LoadSlide()
{
  RadRotator1.DataSource = GetAllProductName();
}

public List<BasicInfo> GetAllProductName()
{
    IECLDataContexDataContext dataContexObj = new IECLDataContexDataContext();
    List<BasicInfo> products = new List<BasicInfo>();
    foreach (var p in (from j in dataContexObj.NEW_PROJECT_INFOs select new { j.PROJECT_PHOTO}).Distinct())
    {
        BasicInfo aProduct = new BasicInfo();
        aProduct.Photo = p.PROJECT_PHOTO.ToArray();
        products.Add(aProduct);
    }
    return products;
}

The class:

public class BasicInfo
   {
       public Byte[] Photo { get; set; }


   }

I hope that helps.

[atik]

 it is not working.
 RadRotator1.DataSource = GetAllProductName();

 RadRotator1 can get data from the list  but can't display.

 i have attached a screen short.

[Slav]

Hello Atik,

I have prepared a sample project that implements a possible approach for populating a RadRotator with images from a database. As Kevin suggested, since the images are stored in your database you can configure a ItemTemplate in the rotator control and you can display the images via a RadBinaryImage.

Regards,
Slav
the Telerik team

[David]

I am trying to add one small feature. I would like to add a OnClientItemClicked="openWindow" to the RadRotator control so when a photo is clicked a user can open a popup window passing the CustomerId (from the CustomerPhotos table) in the querystring to the new window.

So I add the following code to your sample right below the RadScriptManager:

<telerik:RadWindowManager ID="theWindowManager" runat="server" Width="600" Height="400" />
<script type="text/javascript">
     function openWindow(rotator, args) {
         var windowManager = GetRadWindowManager();
         var extItem = $telerik.$(args.get_item().get_element()).find("[CustomerId]");
         alert(extItem);
         //windowManager.open(extItem.data("????"), "sites");
        }
</script>

The problem I am having is how to find the CustomerId for the photo that was clicked? I would like to pass the CustomerId in a querystring to a CustomerDetails.aspx page where I can display other Customer related information.

Thanks in advance for any suggestions you might have.
Dave

[Slav]

Hi David,

You can add a custom attribute to the RadBinaryImage tag, which will store the CustomerID of the currently displayed item. When an item of  RadRotator is clicked, you can get the value of this attribute via the attr jQuery method. The suggested approach is demonstrated in the following code sample:

<div>
    <telerik:RadRotator ID="RadRotator1" runat="server" Width="810px" ItemWidth="180"
        Height="350px" ItemHeight="220" ScrollDuration="500" FrameDuration="2000" PauseOnMouseOver="false"
        RotatorType="CarouselButtons" DataSourceID="Sqldatasource1" OnClientItemClicked="openWindow">
        <ItemTemplate>
            <telerik:RadBinaryImage ID="Image1" runat="server" DataValue='<%# Eval("Photo") %>' CustomerId='<%# Eval("CustomerID") %>' />
        </ItemTemplate>
    </telerik:RadRotator>
    <asp:SqlDataSource ID="Sqldatasource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT TOP 5 * FROM [CustomerPhotos]" />
    <telerik:RadWindowManager ID="theWindowManager" runat="server" Width="600" Height="400" />
    <script type="text/javascript">
        function openWindow(rotator, args) {
            var windowManager = GetRadWindowManager();
            var extItem = $telerik.$(args.get_item().get_element()).find("[CustomerId]");
            windowManager.open("CustomerDetails.aspx?CustomerID=" + extItem.attr("CustomerId"), "sites");
        }
    </script>
</div>

Greetings,
Slav
the Telerik team

[David]

Thanks for all your help. This example now dose pretty much what I was wanting to do.

I have one more request. In this scenario I have added the ContactName to the RadRotator and in the CustomerDetails.aspx I allow the user to update the ContactName. When the user closes the window the OnClientClose event is called.

From the OnClientClose event I would like to issue a command to refresh the RadRotator portion of the page. My attempt below was to find the rotator control and rebind it, however this causes an error stating the object does not support DataBind.

Thanks again for all your expertise and any suggestions you might have.

Dave

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
    <telerik:RadWindowManager ID="theWindowManager" runat="server" Width="600" Height="400" OnClientClose="OnClientClose" />

    <script type="text/javascript">
        function openWindow(rotator, args) {
            var windowManager = GetRadWindowManager();
            var extItem = $telerik.$(args.get_item().get_element()).find("[CustomerId]");
            windowManager.open("CustomerDetails.aspx?CustomerID=" + extItem.attr("CustomerId"), "sites");
        }

        function OnClientClose(sender, args) {
            //alert('The windows was closed');

            // The following two lines do NOT do what I hoped
            // I would like to get the rotator to refresh and show any changes here.
            var rotator = $find("<%= RadRotator1.ClientID %>");
            rotator.DataBind();
        }
    </script>

    <div>
    <telerik:RadRotator ID="RadRotator1" runat="server" Width="810px" ItemWidth="180"
        Height="350px" ItemHeight="220" ScrollDuration="500" FrameDuration="2000" PauseOnMouseOver="false"
        RotatorType="CarouselButtons" DataSourceID="Sqldatasource1" OnClientItemClicked="openWindow">
        <ItemTemplate>
            <telerik:RadBinaryImage ID="Image1" runat="server" DataValue='<%# Eval("Photo") %>' CustomerId='<%# Eval("CustomerID") %>' />
            <%# Eval("ContactName") %>
        </ItemTemplate>
    </telerik:RadRotator>
    <asp:SqlDataSource ID="Sqldatasource2" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
        SelectCommand="SELECT TOP 5 * FROM [CustomerPhotos]" />
        <asp:SqlDataSource ID="Sqldatasource1" runat="server" ConnectionString="<%$ ConnectionStrings:TelerikConnectionString %>"
            SelectCommand="SELECT TOP 5 * FROM [CustomerPhotos]" />
    </div>
    </form>
</body>
</html>

[Slav]

Hi David,

Please note that the RadRotator should be rebound on the server, so if you want to refresh only its portion of the page, you can use an Ajax request. This can be achieved by triggering Ajax request and updating just the RadRotator via a RadAjaxManager control. For your convenience I have attached a sample page that demonstrates this approach. Please use it as a reference for implementing this functionality into your actual project.

All the best,
Slav
the Telerik team

[David]

This is working great! I have a RadRotator when a item is clicked it is displayed in a Radwindow where changes to the item can be made. When the window closes the RadRotator is refreshed.

Now I have one more challenge. I would like to do this in the MasterPage / ContentPage scenario where the RadRotator is on the ContentPage and will be refreshed. I think the recommend approach is to put RadAjaxManager on the MasterPage and then a RadAjaxManagerProxy  on the ContentPage.I am having trouble hooking up OnAjaxRequest from the RadAjaxManagerProxy. 

 My question - is this scenario workable? If so any hints or suggestions on setting things up will be most appreciated.

[Slav]

Hello David,

Note that RadAjaxManagerProxy is designed only to ease the design-time configuration. If you want to force an Ajax request, you should get the RadAjaxManager instance in the Master page through the GetCurrent static method, as shown in this help article. Once this is done, you can handle the event AjaxRequest in order to execute your logic.

I hope this helps. Feel free to contact us again if you encounter more difficulties.

Regards,
Slav
the Telerik team

[David]

I think I finally got this working the way I want. I have a masterpage/contentpage scenario where the content page has the RadRotator. When a image is selected from the rotator a page is popped open in a RadWindow where the user can edit details displayed in the rotator. When the RadWindow is closed the RadRotator is updated with ajax. Here is my approach.

I used the database as found in the RadRotatorRebinding.zip project listed previously. Also check your web.config to be sure your TelerikConnectionString has been set.

Web.Config

...
<configuration>

  <connectionStrings>

    <add name="TelerikConnectionString" connectionString="Data Source=.\SQLEXPRESS;AttachDbFilename=|DataDirectory|Telerik.mdf;Integrated Security=True;User Instance=True" providerName="System.Data.SqlClient"/>

  </connectionStrings>
...

Here is the MasterPage.Master

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" />
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server" />
    </div>
    </form>
</body>
</html>

There is not codebehind for the masterpage.

ContentPage.aspx

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="ContentPage.aspx.cs" Inherits="ContentPage" %>

<%@ MasterType VirtualPath="~/MasterPage.master" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
        <Windows>
            <telerik:RadWindow ID="PctManager" runat="server" Width="650" Height="400"  OnClientClose="OnClientClose" >
            </telerik:RadWindow>
        </Windows>
        </telerik:RadWindowManager>

        <telerik:RadCodeBlock runat="server" ID="RadCodeBlock1">
            <script type="text/javascript">
                function openWindow(rotator, args) {
                    var windowManager = GetRadWindowManager();
                    var extItem = $telerik.$(args.get_item().get_element()).find("[CustomerID]");
                    var url = String.format("CustomerDetails.aspx?CustomerID={0}", extItem.attr("CustomerID"));
                    windowManager.open(url, "PctManager");
                }
                function OnClientClose(sender, args) {
                    var ajaxManager = $find("<%= ajaxManager.ClientID %>");
                    ajaxManager.ajaxRequest("rebind"); // an Ajax request is triggered
                }
            </script>
        </telerik:RadCodeBlock>

        <telerik:RadRotator ID="radRotator" runat="server" Width="810px" ItemWidth="180"
            Height="350px" ItemHeight="220" ScrollDuration="500" FrameDuration="2000" PauseOnMouseOver="false"
            RotatorType="CarouselButtons" OnClientItemClicked="openWindow" >
            <ItemTemplate>
                <telerik:RadBinaryImage ID="Image1" runat="server" DataValue='<%# Eval("Photo") %>' CustomerId='<%# Eval("CustomerID") %>' />
                <%# Eval("ContactName") %>
            </ItemTemplate>
        </telerik:RadRotator>
</asp:Content>

ContentPage.aspx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using Telerik.Web.UI;

public partial class ContentPage : System.Web.UI.Page
{
    public RadAjaxManager ajaxManager;

    protected void Page_Load(object sender, EventArgs e)
    {
        ajaxManager = (RadAjaxManager)Master.FindControl("RadAjaxManager1");
        if (ajaxManager != null)
        {
            ajaxManager.AjaxSettings.AddAjaxSetting(ajaxManager, radRotator);
            ajaxManager.AjaxRequest += new RadAjaxControl.AjaxRequestDelegate(RadAjaxManager1_AjaxRequest);
        }

        if (!IsPostBack)
        {
            RotatorSelect();
        }
    }

    protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
    {
        if (e.Argument == "rebind") // a check if the request, triggered on window close, is handled
        {
            RotatorSelect();
        }
    }

    // Select the information out of the database to be displayed in the rotator
    protected void RotatorSelect()
    {
        ConnectionStringSettings cts = ConfigurationManager.ConnectionStrings["TelerikConnectionString"];
        SqlDataSource sds = new SqlDataSource(cts.ConnectionString, "SELECT TOP 5 * FROM [CustomerPhotos]");
        // rebinding the RadRotator control
        sds.SelectParameters.Clear();
        radRotator.DataSource = sds;
        radRotator.DataBind();
    }
}

CustomerDetails.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CustomerDetails.aspx.cs" Inherits="CustomerDetails" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <script type="text/javascript">
        function GetRadWindow() {
            var oWindow = null;
            if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog
            else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)

            return oWindow;
        }

        function CloseWin() {
            GetRadWindow().close();
        }
    </script>

    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
    </telerik:RadScriptManager>

    <asp:Label ID="Close" runat="server" Text=""></asp:Label>

    <div>

    CustomerID: <asp:Label ID="CustID" runat="server" Text=""></asp:Label>

    <br /><br />Customer Name:<br />
    <asp:TextBox ID="ContactName" runat="server" /><br /><br />

     <telerik:RadButton ID="RadButton1" runat="server" Text="Change Name"
            onclick="RadButton1_Click">
    </telerik:RadButton>

    </div>
    </form>
</body>
</html>

CustomerDetails.aspx.cs

using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;

public partial class CustomerDetails : System.Web.UI.Page
{
    private string customerID;
    public string CustomerID
    {
        get { return customerID; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        customerID = Request.QueryString["CustomerID"];
        CustID.Text = CustomerID;

        if(!IsPostBack)
        {
            SqlConnection conn = null;
            try
            {
                conn = new SqlConnection(ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString);
                conn.Open();
                SqlCommand cmd = new SqlCommand("select ContactName from CustomerPhotos where CustomerID=@CustomerID; ", conn);
                SqlParameter param = new SqlParameter();
                param.ParameterName = "@CustomerID";
                param.SqlDbType = SqlDbType.NChar;
                param.Value = CustomerID;
                cmd.Parameters.Add(param);
                SqlDataReader reader = cmd.ExecuteReader();
                if (reader.Read())
                {
                    ContactName.Text = reader.GetString(0);
                }
            }
            finally
            {
                if (conn != null)
                {
                    conn.Close();
                }
            }
        }
    }

    protected void RadButton1_Click(object sender, EventArgs e)
    {
        SqlConnection conn = null;
        try
        {
            conn = new SqlConnection(ConfigurationManager.ConnectionStrings["TelerikConnectionString"].ConnectionString);
            conn.Open();
            SqlCommand cmd = new SqlCommand("update CustomerPhotos set ContactName=@ContactName where CustomerID=@CustomerID; ", conn);
            SqlParameter param = new SqlParameter();
            param.ParameterName = "@CustomerID";
            param.SqlDbType = SqlDbType.NChar;
            param.Value = CustomerID;
            cmd.Parameters.Add(param);
            SqlParameter param1 = new SqlParameter();
            param1.ParameterName = "@ContactName";
            param1.SqlDbType = SqlDbType.NVarChar;
            param1.Value = ContactName.Text;
            cmd.Parameters.Add(param1);
            cmd.ExecuteNonQuery();
        }
        finally
        {
            if (conn != null)
            {
                conn.Close();
            }
        }
        Close.Text = "<script type='text/javascript'>CloseWin()</" + "script>";

    }
}

Hope this might help someone.
Regards,
David