Open Image in RadWindow from RadGrid Hyperlink in GridTemplateColumn

3 posts, 0 answers
  1. Trent
    Trent avatar
    19 posts
    Member since:
    Apr 2009

    Posted 15 Oct 2011 Link to this post

    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. Trent
    Trent avatar
    19 posts
    Member since:
    Apr 2009

    Posted 18 Oct 2011 Link to this post

    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");
            }
  3. Trent
    Trent avatar
    19 posts
    Member since:
    Apr 2009

    Posted 22 Oct 2011 Link to this post

    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");
    }


Back to Top