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

RadFileExplorer in ASP.NET AJAX UpdatePanel

8 Answers 300 Views

FileExplorer

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

8 Answers, 1 is accepted

answered on 19 May 2012, 01:11 AM

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!

answered on 22 May 2012, 08:24 AM

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

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 22 May 2012, 10:38 AM

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!