How to show.doc files in rad rotator?

[Sreenu]

Hi, I am new to designing.My scenario is I have to show .doc files in radrotator  in thumb scrolling mode(both left and right).Actually my page is containing three containers(i.e RadPanels).I have a radtreeview on leftside to the page in left_radpanel and radrotator in Right_Bottom_Panel.
1) while page loading this treeview should bind with table column values(for example ABC,DEF,GHK......).
2) After that when I click "ABC" node it has to show the .doc files(only .doc files in that particular "ABC" folder) in radrotator.Here total page should not be submited.
3) Now when I click any one of the .doc file in that radrotator it should be shown as bigger(i.e it should be open in readable mode)  in the Right_Top_Panel. In this panel I have to facilitate ZoomBars so that client can do zoomout and zoom in actions dynamically).By default it should show first .doc file in that "ABC" folder.

So can u please tell me how to do this task.
I am using vs 2010 ultimate,Operating System(Widows server2008,windows7),C#,Telerik.Web.UI_2010_2_929_Trial
Thanks in advance.

[Sreenu]

Hi admin, till now i didn't get any reply.If any one understand my question please send me the solution for how to achieve this task.

[Fiko]

Hi Sreenu,

This is a common programming task, but I suggest you to use this approach in order to implement your scenario:

• Wrap the controls in a RadAjaxPanel
• Use the NodeClick event of the RadTreeView and bind the RadRotator control
• Add your custom control which will display the .DOC file inside the RadRotator's ItemTemplate.
• Use the RadRotator's ItemClick event (or OnClientItemClick client-side event) in order to show the doc file in a new window

Best wishes,
Fiko
the Telerik team

[Sreenu]

Thanks for reply. In my scenario first i am trying to deal with images after that I will go for .doc files.
As you said I am able to bind Images (I stored these images in binary format in database) to RadRotator.By I don't know how to do next step that is  by clicking that Image It should be show on Another RadPanel. I am putting my code below. My database is having PictureDetails table.Columns in this table are PictureId,QueueName,Picture(VarBinary).Stored Procedure is usp_GetQueues ( select PictureId,QueueId,Picture from PictureDetails where QueueId=@QueueId). As u said I am trying to use RadRotator's ItemClickevent (or OnClientItemClick client-side event) but I failed to get solution. So can u please help me finding the solution


Code in Default.aspx:
<telerik:RadPane ID="Right_RadPane" runat="server"  Width="80%">
                <telerik:RadSplitter ID="RadSplitter3" runat="server" Orientation="Horizontal">
                    <telerik:RadPane ID="Right_Top_RadPane" runat="server" Height="70%">
               ------------------ I Have to show Image here--------------------------   

                    </telerik:RadPane>
                    <telerik:RadSplitBar ID="RadSplitBar3" runat="server">
                    </telerik:RadSplitBar>
                    <telerik:RadPane ID="Right_Bottom_RadPane" runat="server" Height="30%">                                             
                        <telerik:RadRotator ID="RadRotator1" runat="server" width="100%"
                            ItemWidth="100px" ItemHeight="90%" RotatorType="ButtonsOver" FrameDuration="0"  
                            AutoPostBack="True"  Skin="Telerik" >                           
                        <ItemTemplate>
                        <telerik:RadBinaryImage ID="RadBinaryImage1"  runat="server" DataValue='<%#Eval("Picture") %>'  AutoAdjustImageControlSize="false" CssClass="itemTemplate" Width="90px" Height="100px" />                       
                        </ItemTemplate>
                        <ControlButtons LeftButtonID="img_left" RightButtonID="img_right" />
                        </telerik:RadRotator>                       
                    </telerik:RadPane>
                </telerik:RadSplitter>
            </telerik:RadPane>

code in .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.Data;
using System.Data.SqlClient;
using System.Configuration;
using Telerik.Web.UI;
using System.Web.UI.HtmlControls;


public partial class MainPage : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            LblDisplay.Text = "The page is not postbacked";
        }
        else
        {
            LblDisplay.Text = "The page is postbacked";
        }
        BindToRadTreeView(RadTreeView1);
    }
    private static void BindToRadTreeView(RadTreeView treeView)
    {
        SqlConnection con=new SqlConnection(ConfigurationManager.ConnectionStrings["ConString"].ConnectionString);
        SqlDataAdapter da = new SqlDataAdapter("usp_GetQueues", con);
        DataSet ds = new DataSet();
        da.Fill(ds);
        treeView.DataTextField = "QueueName";
        treeView.DataFieldID = "QueueId";
        treeView.DataSource = ds;
        treeView.DataBind();
    }

    protected void RadTreeView1_NodeClick(object sender, RadTreeNodeEventArgs e)
    {
        BindToRadRotator(RadRotator1, e.Node.Text.ToString());
    }

    private static void BindToRadRotator(RadRotator rotator, string str)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConString"].ConnectionString);
        SqlCommand cmd = new SqlCommand("usp_GetPictures", con);
        SqlDataAdapter da = new SqlDataAdapter(cmd);        
        cmd.CommandType = CommandType.StoredProcedure;
        cmd.Parameters.Add("@QueueId", SqlDbType.VarChar).Value = str;
        DataSet ds = new DataSet();
        da.Fill(ds);        
        rotator.DataSource = ds;
        rotator.DataBind();

    }
}

[Fiko]

Hi Sreenu,

I believe that this online demo will be of help for you. It shows how to use the ItemClick event of the RadRotator control.

In addition, please note that showing a .DOC file in a web page (using an IFRAME for example) is not a trivial task. This is because the browsers handle those files in a different way and their behavior depends on some customization of the browsers's settings. This is why, I recommend you to consider this before starting the implementation of the scenario. Please note that, this is not related to RadControls (RadRotator in particular)
and it is beyond of our support.

Sincerely yours,
Fiko
the Telerik team

[Sreenu]

Now I am getting Images in to my RadRotator and by clicking any image in RadRotator I am getting that picture in another panel.
My question is while page loading I am binding values to RadTreeview so that I am getting values.By default RadTreeview first node should be selected and the images in RadTreeview first node have to shown in my RadRotator.At the sametime the first image in RadRotator should be shown in another panel. So can u please tell me how to achieve this task(code). Thanks in advance.

[Sreenu]

Hi Admin, Can u give some sample application on sliding zoom bars like volume bars. My scenario is I am getting an image from database(varbinary) to a radBinary image control.I have to put some zoom bars to zoom the picture.when I increase and decrease zoom the image has to increase and decrease dynamically.I am using vs 2010,C#,windows server 2008.Thank in advance
 

[Fiko]

Hello Sreenu,

You can use a RadSlider control in order to implement the zoom functionality. More specifically, you can use the OnClientValueChanged event of the suggested control.

Regards,
Fiko
the Telerik team