Switch ExplorerMode from toolbar

[Martin Roussel]

Hi, ive added a custom button to my FileExplorer toolbar and want to make it a ExplorerMode switcher using Ajax refreshing. Im unable to make it work correctly but i think im very close. When I click the button, the ExplorerMode property changes (when looking in RadAjaxManager1_AjaxRequest) but nothing happens visually. Here's the code:

<telerik:RadFileExplorer runat="server" ID="RadFileExplorer1" Skin="WebBlue" Width="99.7%" Height="250px" AllowPaging="true" PageSize="50" ExplorerMode="Default" CssClass="rfeLargeThumbnails" EnableFilterTextBox="true" EnableFilteringOnEnterPressed="false" FilterTextBoxLabel="Filter By"  meta:resourcekey="labFilterBy" DisplayUpFolderItem="false"  OnClientFileOpen="OnClientFileOpen" OnClientLoad="attachHandlers">
    <Configuration EnableAsyncUpload="true" MaxUploadFileSize="10485760" />
</telerik:RadFileExplorer>

function toolbarClicked(toolbar, args) {
    var buttonValue = args.get_item().get_value();

    if (buttonValue == "ViewMode") {
        var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
        ajaxManager.ajaxRequest("RadFileExplorer1_ViewMode");
    }

}

function attachHandlers(explorer, args) {

    var toolbar = explorer.get_toolbar();
    toolbar.add_buttonClicked(toolbarClicked);
}

 protected void Page_Load(object sender, EventArgs e)
        {

            if (!IsPostBack)
            {
  RadToolBarButton customButton = new RadToolBarButton("ViewMode");

 customButton.CssClass = "custom_button";

 customButton.Value = "ViewMode";

 customButton.Text = "View Mode";

 RadFileExplorer1.ToolBar.Items.Add(customButton);

     }
}

protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
       {
           if (e.Argument == "RadFileExplorer1_ViewMode")
           {
               if (RadFileExplorer1.ExplorerMode == Telerik.Web.UI.FileExplorer.FileExplorerMode.Default)
               {
                   RadFileExplorer1.ExplorerMode = Telerik.Web.UI.FileExplorer.FileExplorerMode.Thumbnails;
               }
               else
               {
                   RadFileExplorer1.ExplorerMode = Telerik.Web.UI.FileExplorer.FileExplorerMode.Default;
               }

           }
       }

Can someone let me know what im doing wrong. It can become a nice feature to share to other members if this can work.

TIA

[Vessy]

Hi Martin,

First, I just want to mention that the switch-between-the-modes functionality will be available in the next up-coming release which is planned for the middle of October.

Nevertheless, if you still want to use your custom functionality until the time of the release, you will need to change the ViewMode in the PageLoad server event of the FileExplorer (because the RadAjaxManager1_AjaxRequest() method is called later and the changes cannot be applied):

protected void Page_Load(object sender, EventArgs e)
{
    //Remove the !Postback check in order to recreate the button after every click
    RadToolBarButton customButton = new RadToolBarButton("ViewMode");
    customButton.CssClass = "custom_button";
    customButton.Value = "ViewMode";
    customButton.Text = "View Mode";
    RadFileExplorer1.ToolBar.Items.Add(customButton);

    if (Request.Params.Get("__EVENTTARGET") == RadAjaxManager1.UniqueID && Request.Params.Get("__EVENTARGUMENT") == "RadFileExplorer1_ViewMode")
    {
        if (RadFileExplorer1.ExplorerMode == Telerik.Web.UI.FileExplorer.FileExplorerMode.Default)
        {
            RadFileExplorer1.ExplorerMode = Telerik.Web.UI.FileExplorer.FileExplorerMode.Thumbnails;
        }
        else
        {
            RadFileExplorer1.ExplorerMode = Telerik.Web.UI.FileExplorer.FileExplorerMode.Default;
        }
    }
}

Regards,
Vesi
the Telerik team

[Martin Roussel]

Vesi,

thanks for the reply and the next release headsup. However, your solution gives me the same result than I had with my method. The ExplorerMode property is updated correctly but nothing happens visually (no Ajax refresh). Also when continuing browsing or clicking "Refresh" toolbar button, the mode stays the original one. Is there something else to add?

Martin

[Vessy]

Hi Martin,

A possible reason for this behavior could be the  AjaxManager's configuration - in my test project I have set the RadAjaxManager1 as an AjaxControlID and the radFileExplorer1 as a ControlID:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadFileExplorer1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

For your convenience I am attaching my test project. Could you, please, examine it and tell me if you are able to reproduce the same issue with it? For my test I have used the latest version of RadControls for ASP.NET AJAX (2012.2.912).

Kind regards,
Vesi
the Telerik team

[Martin Roussel]

Exactly what i was missing. Thank you alot!

UPDATE: Ive found a problem once I use my new Explorer switcher: the control stay stuck on loading after clicking the Refresh toolbar button (when being in thumbnails mode). The weird thing is if the startup ExplorerMode (in markup) is "Thumbnails" the problems goes away.

Can you test it out on your side please? For some reason, that im currently checking, my project wont accept your file.


Martin

[Vessy]

Hi Martin,

This is a known bug, which has already been fixed internally and the fix would be available in the next up-coming release (2012 Q3).

Unfortunately, for the time being, I am not able to provide you with a suitable workaround at this point.

Greetings,
Vesi
the Telerik team