This is a migrated thread and some comments may be shown as answers.

Open Image in RadWindow from RadGrid Hyperlink in GridTemplateColumn

2 Answers 197 Views
Window
This is a migrated thread and some comments may be shown as answers.
Trent
Top achievements
Rank 2
Trent asked on 16 Oct 2011, 02:38 AM
Hello
i am using javascript to select the Row ID using RowMouseOver.  This is working fine.
I am trying to send the Image of the 'hover' selected row to the RadWindow by clicking on
the hyperlink in the Grid Template column.
The Images are files on the server. The database only stores the file name.
All code is currently ASPX and Javascript. 
Is there a better way to transfer the hover 'selected' image direct to the RadWindow as the code below does not show the image.

Below is my RadGrid ASPX (Unfortunately the Code snippet tool didnt work here)

                    <telerik:GridTemplateColumn HeaderText="" SortExpression="XTV7_Categories_Image"
                        UniqueName="XTV7_Categories_Sub_Image">
                        <ItemTemplate>
                            <asp:HyperLink ID="btnImageDisplay" runat="server" Width="100px" Height="77px" 
                            CommandName="Select" 
                            ImageUrl='<%# "~/App_Portal/xTrain/Images/VideoThumbs/" + Eval("XTV7_Videos_Image") %>' 
                            NavigateUrl='<%# "~/App_Portal/xTrain/Images/VideoImages/" + Eval("XTV7_Videos_Image") %>'                  
                            onclick="openRadWin();return false;" />
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>

Below is my RadCodeBlock Javascript with the RowmouseOver and openRadWin samples.

            function RowMouseOver(sender, args) {
                document.getElementById("<%= Label1.ClientID %>").innerHTML =
                 "<b>XTV7_Videos_ID: </b>" + args.getDataKeyValue("XTV7_Videos_ID") +
                 "<br />" +
                 "<b>Title: </b>" + args.getDataKeyValue("XTV7_Videos_Title") +
                   "<br />" +
                 "<b>SubTitle: </b>" + args.getDataKeyValue("XTV7_Videos_SubTitle") +
                   "<br />" +
                 "<b>Image Name: </b>" + args.getDataKeyValue("XTV7_Videos_Image") +
                   "<br />" +
                 "<b>M4V Name: </b>" + args.getDataKeyValue("XTV7_Videos_Ipod_Filename") +
                   "<br />" +
                 "<b>SWF Name: </b>" + args.getDataKeyValue("XTV7_Videos_FileName");
            }
            function openRadWin() {
                radopen('<%# "~/App_Portal/xTrain/Images/VideoImages/" + Eval("XTV7_Videos_Image") %>', "RadWindow1");
            }


// OLD RadWindow CODE
//           function openRadWindow(url) {
//                var oWnd = radopen(url);
//                return false;
//            }

The basic RadWindow settings;

 <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Modal="true" VisibleStatusbar="false"
        ForeColor="Black" BackColor="Black" Behaviors="Reload,Resize,Minimize,Maximize,Close"
        VisibleTitlebar="true" VisibleOnPageLoad="false" KeepInScreenBounds="True" Skin="Black"
        AutoSize="true" Animation="Resize">
        <Windows>
            <telerik:RadWindow runat="server" ID="RadWindow1" Title="XGIS Lesson Image Viewer"
                OnClientClose="onClose">
            </telerik:RadWindow>


2 Answers, 1 is accepted

Sort by
0
Trent
Top achievements
Rank 2
answered on 18 Oct 2011, 08:51 AM
Solved for the most part.  The requested image still pops out of the window when using Google chrome and starts downloading.

Getting the data

function RowMouseOver(sender, args) {
            document.getElementById("<%= Label1.ClientID %>").innerHTML =
                 args.getDataKeyValue("Field");
}


Creating the string;

function openRW_PNG(sender, args) {
            var label = document.getElementById("<%= Label1.ClientID %>").innerHTML;
            var serverpath = "../../../App_Portal/folderpath/"
            radopen(serverpath + label, "RadWindow1");
        }
0
Trent
Top achievements
Rank 2
answered on 22 Oct 2011, 05:11 AM
The Only problem now is the M4V Viewer displays the parent page inside the window and not the M4V Video.
SWF and PNG both load correctly. Everything else works fine in all browsers. 

Better Performance Now with modified code. The URL is formed in the View and starts with / so that either .. or ~ can be applied for java or asp.net requirements. The path is declared earlier to avoid 'Eval' support issues.

Obtain Hover Value from database
document.getElementById("<%= Label_SWF.ClientID %>").innerHTML =
     args.getDataKeyValue("NavigateURL_Video");
ASPX - Button Click and display PNG or SWF or M4V
<ItemTemplate>
    <asp:Image ID="btnImageDisplay" runat="server" Width="120px" Height="77px" AlternateText="Presentation Snapshot"
        CommandName="Select" ImageUrl='<%# "~/App_Portal/xTrain/Images/VideoThumbs/" + Eval("XTV7_Videos_Image") %>'
        ClientIDMode="Inherit" OnClick="openRW_PNG();return false;"></asp:Image>
</ItemTemplate>

        <telerik:RadWindow runat="server" ID="RadWindow2" Title=SWF Video Viewer for HQ Flash Video"
            KeepInScreenBounds="true" OnClientClose="onClose" Width="1000px" Height="625px"
            Animation="Resize" AutoSize="true" AutoSizeBehaviors="HeightProportional">
        </telerik:RadWindow>


Open Radwindow - display
function openRW_SWF(sender, args) {
    var label = document.getElementById("<%= Label_SWF.ClientID %>").innerHTML;
    var serverpath = "../.."
    radopen(serverpath + label, "RadWindow2");
}


Tags
Window
Asked by
Trent
Top achievements
Rank 2
Answers by
Trent
Top achievements
Rank 2
Share this question
or