Accessing the Toolbar and Context Menus

7 posts, 1 answers
  1. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 10 May 2009 Link to this post

    Hi,

    I am using the explorer (which is great) as a personal file space and file sharing app for my students to upload and download anywhere.

    To stop users uploading and opening executables I need to have EnableOpenFile="false" and then use a seperate button control to initiate the download. This work OK by getting the file name using..

     

    function OnClientItemSelected(sender, args)  
            {  
                var textbox = $get("fileName");  
                textbox.value = args.get_path();  
            }  
     

    And then in the onClick event of the button doing

     

    Dim filepath As String = Request.Form("fileName")  
            filepath.Replace("/", "\")  
     
            If Not filepath Is Nothing Then  
     
                If File.Exists(Server.MapPath(filepath)) Then  
     
                    Dim filename As String = Path.GetFileName(filepath)  
                    Response.Clear()  
                    Response.ContentType = "application/octet-stream" 
                    Response.AddHeader("Content-Disposition", _  
                      "attachment; filename=""" & filename & """")  
                    Response.Flush()  
                    Response.WriteFile(filepath)  
     
                Else  
                    lblMsg.Text = "No such file exists" 
                End If  
     
            Else  
                lblMsg.Text = "Please select a file" 
            End If 

    I read that we can access the toolbar and context menu using

     

    function findToolBar()    
    {    
        var oToolBar = $find("<%= FileExplorer1.ToolBar.ClientID %>");    
    }    
    function findContextMenu()    
    {    
        // Get reference to the RdTreeView's context menu    
        var oTreeViewContexMenu = $find("<%= FileExplorer1.TreeView.ContextMenus[0].ClientID %>");    
        
        // Get reference to the RadGrid's context menu    
        var oGridContexMenu = $find("<%= FileExplorer1.GridContextMenu.ClientID %>");   
     
    but my question (need) is - how can I add either a button to the toolbar or an item to the context menu; or both, that can fire the download event. If at all possible.

    Many thanks,

    Jon

  2. Lini
    Admin
    Lini avatar
    2144 posts

    Posted 12 May 2009 Link to this post

    Hi,

    The FileExplorer controls are accessible both on the client and on the server. Here is how to add a custom button to the toolbar and an item to the tree context menu:

    1. On the server

    protected void Page_Load(object sender, EventArgs e) 
        //custom button 
        RadToolBarButton customButton = new RadToolBarButton("test"); 
        customButton.CssClass = "test_button"
        customButton.Value = "testCommand"
        RadFileExplorer1.ToolBar.Items.Add(customButton); 
        //context menu item 
        RadMenuItem customMenuOption = new RadMenuItem("custom"); 
        customMenuOption.Value = "custom_Menu"
        RadFileExplorer1.TreeView.ContextMenus[0].Items.Add(customMenuOption); 
        //if you want the custom context menu item to be visible in the grid as well 
        RadFileExplorer1.GridContextMenu.Items.Add(customMenuOption.Clone()); 

    2. On the client:

    <style type="text/css"
    .test_button span span span span 
        background-image:none !important; 
        padding-left:2px !important; 
    </style> 
     
    <script type="text/javascript"
    function toolbarClicked(toolbar, args) 
        var buttonValue = args.get_item().get_value(); 
        if (buttonValue=="testCommand"
            alert("test button clicked"); 
    function gridContextMenuClicked(toolbar, args) 
        var buttonValue = args.get_item().get_value(); 
        if (buttonValue=="custom_Menu"
            alert("custom context menu item clicked"); 
    function treeContextMenuClicked(toolbar, args) 
        var buttonValue = args.get_menuItem().get_value(); 
        if (buttonValue=="custom_Menu"
            alert("custom context menu item clicked"); 
     
    function attachHandlers(explorer, args) 
        var toolbar = explorer.get_toolbar(); 
        toolbar.add_buttonClicked(toolbarClicked); 
        //support for tree context menu 
        var tree = explorer.get_tree(); 
        tree.add_contextMenuItemClicked(treeContextMenuClicked); 
        //support for grid context menu 
        var gridContextMenu = explorer.get_gridContextMenu(); 
        gridContextMenu.add_itemClicked(gridContextMenuClicked); 
    </script> 
     
    <telerik:RadFileExplorer runat="server" ID="RadFileExplorer1" OnClientLoad="attachHandlers"
    ... 

    The server code creates a new toolbar button and a new context menu item and adds them in the FileExplorer control. The client code executes when the FileExplorer is loaded and attaches new event handlers for the toolbar and treeview/grid context menus. These handlers will be used to execute code when the custom button/item is clicked. The CSS  style for the toolbar button can be used to add an image.

    All the best,
    Lini
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kone
    Kone avatar
    5 posts
    Member since:
    Feb 2009

    Posted 12 May 2009 Link to this post

    Hello,

    I added a button to the toolbar of radfileexplorer succesfullly with:

    Telerik.Web.UI.RadToolBarButton button = new Telerik.Web.UI.RadToolBarButton("Download");

     

    button.CommandName =

    "Download";

     

    FileExplorer.ToolBar.Items.Add(button);

    Now I want handle the click event of the button serverside. How to do?

    Thanks in advance,
    Keen


     

     

     


     

     

  5. Jack
    Jack avatar
    128 posts
    Member since:
    May 2003

    Posted 13 May 2009 Link to this post

    Fantastic Lini,

    I only added the "download" to the context menu in the grid as you cannot download a folder of course.

    function gridContextMenuClicked(toolbar, args)   
    {   
        var buttonValue = args.get_item().get_value();   
        if (buttonValue=="contextDownload")   
           __doPostBack('contextDownload', 'Download');  
    }   
     

    and then attached a serverside event to the javascript and in the code behind under page load added

    Dim eventArg As String = Request("__EVENTARGUMENT")  
                If eventArg = "Download" Then  
                    download(Nothing, Nothing)  
                End If 
     
    this works great but there's just one thing I would like to do more but couldn't figure it out...

    I'd like to not show the "Download" option in the context menu when a folder is selected - is this possible.
    It would be good (I think) to add the dowload functionality out of the box as the control then become a file manager as well as a file explorer.

    Thanks again for the support.
    Jon


  6. Answer
    Rumen
    Admin
    Rumen avatar
    12846 posts

    Posted 15 May 2009 Link to this post

    Hello guys,

    @Keen, you need to subscribe to the ButtonClick event by using this code:

    RadFileExplorer1.ToolBar.ButtonClick += new RadToolBarEventHandler(toolBar_ButtonClick); 


    protected void toolBar_ButtonClick(object sender, Telerik.Web.UI.RadToolBarEventArgs e) 
        //your logic here 


    @Jon, there is not an easy way to implement this feature. You should disable the items of the RadGrids context menu when it is opened:

    grid.add_rowContextMenu(Put_Your_Handler_Here)

    After that get the currently selected item of the file explorer and check whether it is a folder or a file and if it is a folder disable the content menu.

    Kind regards,
    Rumen
    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.
  7. Mario
    Mario avatar
    2 posts
    Member since:
    Jul 2010

    Posted 07 Jul 2010 Link to this post

    Rumen,

    I subscribed to the buttonclick event serverside as you suggested.
    protected void Page_Load(object sender, EventArgs e) 
            { 
                if (!Page.IsPostBack) 
                { 
                //custom button 
                RadToolBarButton customButton = new RadToolBarButton("Properties"); 
                //customButton.CssClass = "test_button"
                customButton.Value = "EditProperties"
                customButton.CommandName = "EditProperties"
       
                DocFileExplorer.ToolBar.Items.Add(customButton); 
                DocFileExplorer.ToolBar.ButtonClick += new  RadToolBarEventHandler(toolBar_ButtonClick);  
     
     
            } 
     
    protected void toolBar_ButtonClick(object sender, Telerik.Web.UI.RadToolBarEventArgs e) 
            { 
                //your logic here  
            } 
     


    However, when I click on the button, I get the error:

    Only items of type Telerik.Web.UI.IRadToolBarButton can initiate postbacks

    Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

    Exception Details: System.InvalidOperationException: Only items of type Telerik.Web.UI.IRadToolBarButton can initiate postbacks


    Thanks for your help,
    Mario
  8. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 13 Jul 2010 Link to this post

    Hi Guys,

    In reference to your questions:
    • @jon byron:
      • You need to attach a handler to the OnClientShowing handler of the GridContextMenu:
        RadFileExplorer1.GridContextMenu.OnClientShowing = "OnClientShowing";
      • Implement the handler as snown bellow:
        function OnClientShowing(oGridMenu, args)
        {
            var clickedHtmlElement = args.get_targetElement();
            var isFolder = $telerik.$(clickedHtmlElement).text().indexOf(".") == -1;
            var downItem = oGridMenu.findItemByValue("Download");
         
            if (isFolder)
            {    
                if (downItem)
                {
                    downItem.hide();
                }
            }
            else
            {
                downItem.show();
            }
        }
    • @Mario:
      You can us the RadToolBar's ButtonClick event when the toolbar is embedded in RadFileExplorer. Please note that, however, this will cause post back every time you click a button in the toolbar. This means that you will not be able to use the default buttons like "Upload" or "Delete".
      If you need to use the rest of the RadToolBar's buttons, then you need to use the client-side approach shown in the attached demo.

    For your convenience I have attached a demo project to this thread. The demo shows the both described solutions and I believe that it will be of help for you in order to achieve the desired result. 

    Kind regards,
    Fiko
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017