RadFileExplorer in ASP.NET AJAX UpdatePanel

[Roland Vonk]

Hi,

I noticed, after a lot of trial and error, that using a RadFileExplorer in an ASP.NET AJAX UpdatePanel is not possible. Uploading, viewing works fine, but deleting and refreshing results in an error in Visual Studio in a script file loaded from a web resource (Telerik.Web.Resource.WebResource_2.axd), in _callWebService:function(_13,_14,_15), on line 29:

if(this._folderCache[_1e]!=null&&!_14){

This only occurs when the RadFileExplorer is inside an UpdatePanel and otherwise works just fine. Maybe this can be mentioned in the documentation.

Greetings,

Roland

[Fiko]

Hello Roland,

We are aware of this issue and for the time being we do not recommend using the RadFileExplorer control in AJAX scenarios - such like with UpdatePanel.

We apologize for the temporary inconvenience.

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.

[VF]

Is this still not recommended?

[Fiko]

Hi VF,

Yes, we do not recommend you update the RadFileExplorer control with AJAX. Please note that this is not necessary, because the control has embedded AJAX control inside. This, however, cause unpredictable behavior when the control is updated by another AJAX control.

I hope this helps.

All the best,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Michael]

i have a problem with the same issue but i noticed this was posted in 2009, now we are in 2012 and i want to ask if this still not recommended?

My scenario is:

I’m using a RadFileExplorer inside a RadAjaxPanel, this is because i’m using the following script to process some server side code

function OnClientItemSelected(sender, args) {

    var ImagePath = args.get_path();

    if (ImagePath.match(/[.](jpeg)|(jpg)|(gif)|(png)|(JPEG)|(JPG)|(GIF)|(PNG)|(Jpeg)|(Jpg)|(Gif)|(Png)$/)) {

        __doPostBack("<%= img_PreviewImage.ClientID %>", ImagePath);
    }
    else {

    }
}

Im using an Ajax request obviously to utilise partial post back (not a full round trip).

    <Telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">

        <asp:Panel ID="FileExplorerPanel" runat="server"
                CssClass="GroupingPanel"
                GroupingText="File Explorer.">

            <Telerik:RadFileExplorer ID="RadFileExplorer" runat="server"
                    Width="100%"
                    Height="300px"
                    EnableCopy="True"
                    EnableAsyncUpload="True"
                    DisplayUpFolderItem="True"
                    TreePaneWidth="30%"
                    OnClientItemSelected="OnClientItemSelected">
                <Configuration
                        MaxUploadFileSize="10485760"
                        UploadPaths="~/App_Images,~/App_Requisite,~/Stock,~/App_Themes"
                        ViewPaths="~/App_Images,~/App_Requisite,~/Stock,~/App_Themes"
                        DeletePaths="~/App_Images,~/App_Requisite,~/Stock,~/App_Themes"
                        SearchPatterns="*.jpg,*.png,*.jpeg,*.gif" />
            </Telerik:RadFileExplorer>

        </asp:Panel>
        <asp:Panel ID="PreviewPanel" runat="server"
                CssClass="GroupingPanel"
                GroupingText="Image Information Preview">

            <h4>Image Name: </h4>
            <asp:Label ID="lbl_ImageName" CssClass="lbl_ImageName" runat="server" Text="####_#####_#####.ext"></asp:Label>
            <h5>Image Preview...</h5>

                <div class="CenterItem">
                    <asp:Image ID="img_PreviewImage" runat="server"
                            CssClass="img_PreviewImage"
                            ImageUrl="" />
                </div>

            <h5>Image Info</h5>
            <asp:Table ID="PreviewTable" runat="server" CssClass="PreviewTable">
                <asp:TableRow>
                    <asp:TableCell CssClass="Label CellSetWidth">
                        <em>Height: </em>
                    </asp:TableCell>
                    <asp:TableCell>
                        <asp:Label ID="lbl_Img_Height" runat="server" Text="####px"></asp:Label>
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>
                    <asp:TableCell CssClass="Label">
                        <em>Width: </em>
                    </asp:TableCell>
                    <asp:TableCell>
                        <asp:Label ID="lbl_Img_Width" runat="server" Text="####px"></asp:Label>
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>
                    <asp:TableCell CssClass="Label">
                        <em>Format: </em>
                    </asp:TableCell>
                    <asp:TableCell>
                        <asp:Label ID="lbl_Img_Format" runat="server" Text=".###"></asp:Label>
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>
                    <asp:TableCell CssClass="Label">
                        <em>File Size: </em>
                    </asp:TableCell>
                    <asp:TableCell>
                        <asp:Label ID="lbl_Img_FileSize" runat="server" Text="##.## Mb"></asp:Label>
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableRow>
                    <asp:TableCell CssClass="Label">
                        <em>Server Path: </em>
                    </asp:TableCell>
                    <asp:TableCell>
                        <asp:Label ID="lbl_Img_Path" runat="server" ToolTip="App_Requisite/Images/FileIcons/Imported/filelogo.png" CssClass="lbl_Img_Path" Text="App_Requisite/ ... /filelogo.png"></asp:Label>
                    </asp:TableCell>
                </asp:TableRow>
                <asp:TableFooterRow>
                    <asp:TableCell ColumnSpan="2">
                        <Telerik:RadButton ID="rbtn_Rotate_Left" runat="server" CssClass="rbtn_Rotate" Text="Left">
                            <Icon PrimaryIconUrl="~/App_Requisite/Images/Monocons/White/16/doc_export_icon.png" />
                        </Telerik:RadButton>
                        <Telerik:RadButton ID="rbtn_Rotate_Right" runat="server" CssClass="rbtn_Rotate" Text="Right">
                            <Icon PrimaryIconUrl="~/App_Requisite/Images/Monocons/White/16/doc_import_icon.png" />
                        </Telerik:RadButton>
                    </asp:TableCell>
                </asp:TableFooterRow>
            </asp:Table>
        </asp:Panel>
</Telerik:RadAjaxPanel>

And some server side logic I’m using in the post back:

'Ascx.vb
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles MyBase.Load

    Dim Parameter As String = Request("__EVENTARGUMENT")

    Me.img_PreviewImage.ImageUrl = Parameter

    'Populates the info fields in the preview table
    GetImageInfo(Server.MapPath(Parameter))

    If Not Page.IsPostBack Then

    End If

End Sub

As you can see, this causes refresh issues on commands such as upload, after uploading and i try to select items in the explorer, it causes an infinite loop on the postback.

I’m convinced that when the explorer loads the item in the explorer that was last to be uploaded is selected, thus firing OnClientItemSelected (on the loop).

I’m not sure how to explain in words but i trust you can see the issue using the code i posted.

 

Thank you in advance for any help!

[Dobromir]

Hi Michael,

Yes, it is still not recommended to use external source to ajaxify RadFileExplorer. The control is heavily based on client-side callbacks and in general they do not work well in combination with AJAX.

Could you please provide more detailed information on why do you need to trigger the AJAX postback on ClientItemSelected event? Is it possible to ajaxify only the PreviewPanel and set RadFileExplorer as Trigger to it?

Kind regards,
Dobromir
the Telerik team

[Michael]

Thank you for insightful reply. From what i gather, the explorer is already in a couple of update panels of its own.  Knowing this, nested Ajax update is always a bad thing (i think).

 

Removing the explorer from the RadAjaxPanel has solved my problem an my code now works without issue. Setting the RadAjaxManager is the way that i went for the RadAjaxLoadingPanel, i'm still learning :)

<Telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server"/>
<Telerik:RadAjaxManager ID="RadAjaxManager" runat="server">
    <AjaxSettings>
        <Telerik:AjaxSetting AjaxControlID="RadFileExplorer">
            <UpdatedControls>
                <Telerik:AjaxUpdatedControl ControlID="PreviewPanel"/>
            </UpdatedControls>
        </Telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

with the RadFileExplorer outside any RadAjaxPanel's all is working!

Thanks for the idea!

[Robert]

For me, I have a file explorer that is required to be in an update panel with other controls.  What I did was register it in my scriptmanager (which happens to be in my master page) in the page preload.  Now, it works fine,

Dim ScriptManager1 As ScriptManager = CType(Master.FindControl("ScriptManager1"), ScriptManager)
        ScriptManager1.RegisterPostBackControl(RadFileExplorer1)

 

 

[Vessy]

Hi Robert,

Thank you for sharing your solution with us - I believe it would be really helpful for the other developers facing the same issue.

Kind regards,
Vessy
Telerik