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

Accessing the Toolbar and Context Menus

6 Answers 499 Views
FileExplorer
This is a migrated thread and some comments may be shown as answers.
Jon
Top achievements
Rank 1
Jon asked on 10 May 2009, 03:29 PM

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

6 Answers, 1 is accepted

Sort by
0
Lini
Telerik team
answered on 12 May 2009, 08:48 AM
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.
0
Kone
Top achievements
Rank 1
answered on 12 May 2009, 09:36 AM
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


 

 

 


 

 

0
Jon
Top achievements
Rank 1
answered on 13 May 2009, 06:23 AM
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


0
Accepted
Rumen
Telerik team
answered on 15 May 2009, 11:29 AM
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.
0
Mario
Top achievements
Rank 1
answered on 07 Jul 2010, 10:45 PM
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
0
Fiko
Telerik team
answered on 13 Jul 2010, 03:01 PM
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
Tags
FileExplorer
Asked by
Jon
Top achievements
Rank 1
Answers by
Lini
Telerik team
Kone
Top achievements
Rank 1
Jon
Top achievements
Rank 1
Rumen
Telerik team
Mario
Top achievements
Rank 1
Fiko
Telerik team
Share this question
or