Accessing the Toolbar and Context Menus

[Jon]

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

[Lini]

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.

[Kone]

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

 

 

 

 

 

[Jon]

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

[Rumen]

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.

[Mario]

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

[Fiko]

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