RadFileExploer OnClientFileOpen issue

[Shawn Whitaker]

Hi,

I have a RadFileExplorer on a page that loads up pdf's and images(jpgs). Ideally the functionality that I want is that the end-user can double click on an image file and and it should open up a modal popup with the image as well as 2 buttons that will allow them to rotate the image by 90 degrees, saves the image file and using the RadAjaxManager I could do a postback and show them the newly rotated image. If the file they click on is a pdf file, it just opens up modal window with the pdf.

How I went about trying to create this functionality is to create a RadToolTip which would display the image (using just the normal HTML img tag) and i can put the buttons on it along with event handlers for the buttons. So on the OnClientFileOpen function, I would check to see if the clicked file is an image then i would show the tooptip through javascript.
I'm stumped on how to get this accomplished. Here is the code that I have tried.

Javascript code

<script type="text/javascript">
        function OnClientFileOpen(sender, args) {
            var pvwImage = $get("pvwImage");
            var imageSrc = args.get_path();

            if (imageSrc.match(/\.(gif|jpg)$/gi)) {
                pvwImage.src = imageSrc;
                pvwImage.style.display = "";
                var tooltip = $find("RadToolTip1");
                tooltip.show();
            }
        }

    </script>

FIle Explorer  code

<telerik:RadFileExplorer ID="RadFileExplorer1" Runat="server"
        Skin="Vista" TreePaneWidth="200px" VisibleControls="Grid, AddressBox" Height=""
                Width="" OnClientFileOpen="OnClientFileOpen" >
<Configuration SearchPatterns="*.*"></Configuration>
</telerik:RadFileExplorer>

Tooltip code:

<telerik:RadToolTip ID="RadToolTip1" runat="server" Animation="Fade" HideEvent="ManualClose"
              ManualClose="True" Modal="True" Position="Center"
            RelativeTo="BrowserWindow" Skin="Web20" Width="700px">
            <div align="center" >
                <br />
                <br />
                <img id="pvwImage" src="#" alt="" style="display: none;vertical-align: middle;" />
                <br />
            </div>
        </telerik:RadToolTip>

I have tried to run this and when I click on the image file, it just says "tooltip is null" in the JS debugger. Could someone please help with this issue. Or if this approach is not the right one, I'm open to other suggestions on how to get this accomplished as well.

Thanks in advance!

[Fiko]

Hello Shawn,

The $find() function returns null because you use it in a naming container scenario(MasterPage, UserControl) and in this case the ID of the controls is changed. In this case you can find the control by its ClientID as follows :

var tooltip = $find("<%= RadToolTip1.ClientID  %>");

In reference to the general issue :
I recommend you use a RadWindow control instead of the RadToolTip one. In this case you can pas the path to the clicked image by using the query string. Then open it in a aspx page that contains the two buttons(for rotation). For your convenience I have attached a demo to the thread. In the demo I handle the .jpg and .pdf files in different manner.
Please note that the rest of the desired functionality is not related to our controls and you need to implement it your self.

I hope this helps.

All the best,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.