Problem with RadAjaxManager.ajaxRequestWithTarget()

3 posts, 1 answers
  1. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 05 Aug 2008 Link to this post

    Hi,

    I have a page with a radTreeView and an ASP.NET ListView.  I have added a RadScriptManager and a RadAjaxManager and wired the two controls so that a click on a TreeView node causes the ListView to be refreshed via partial page update.

    I have a RadWindow that is used to upload new images to the server and is communicating to the page via the OnClientShow and ClientCallBackFunction properties.

    When the RadWindow closes I wish the ListView to be updated as if the TreeView node had been clicked, showing an updated list.

    My callback function is as follows:
        function UploadCallback(radWindow,returnValue) 
          { 
          alert('radWindow callback!'); 
          // Simulate RadTreeView click 
          var ram = $find("<%= RadAjaxManager1.ClientID %>"); 
          ram.ajaxRequestWithTarget("<%= rtvFolders.UniqueID %>",""); 
          } 

    The alert displays so I know the function is firing but nothing else seems to happen.

    The full page is below, can anyone tell me why this is not working?  What have I missed?  Have I got the wrong objects?

    1 <%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Admin_Test" %> 
    2  
    3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    4 <html xmlns="http://www.w3.org/1999/xhtml"
    5 <head runat="server"
    6   <title>Test Page</title> 
    7   <link href="../Styles/Hammertime.css" rel="stylesheet" type="text/css" /> 
    8 </head> 
    9 <body> 
    10   <form id="form1" runat="server"
    11   <div> 
    12     <p>Use this page to browse the images in the library</p> 
    13     <!-- Script and Ajax Managers --> 
    14     <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="True" /> 
    15     <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" meta:resourcekey="RadAjaxManagerResource1"
    16       <AjaxSettings> 
    17         <telerik:AjaxSetting AjaxControlID="rtvFolders" EventName="NodeClick"
    18           <UpdatedControls> 
    19             <telerik:AjaxUpdatedControl ControlID="lvFiles" /> 
    20           </UpdatedControls> 
    21         </telerik:AjaxSetting> 
    22       </AjaxSettings> 
    23     </telerik:RadAjaxManager> 
    24      
    25     <!-- Page layout with TreeView and ListView --> 
    26     <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="99%" Height="500px" Skin="Telerik" Items-Capacity="4" meta:resourcekey="RadSplitter1Resource1" SplitBarsSize=""
    27       <telerik:RadPane ID="rpNavigation" runat="server" Width="200px" EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" Height="" Index="0" Skin=""
    28         <telerik:RadTreeView ID="rtvFolders" runat="server" CausesValidation="false" ValidationGroup="Folders"
    29           <WebServiceSettings Path="Images.aspx" Method="GetFolders" /> 
    30           <ExpandAnimation Duration="100" /> 
    31           <CollapseAnimation Duration="100" Type="OutQuint" /> 
    32         </telerik:RadTreeView> 
    33       </telerik:RadPane> 
    34       <telerik:RadSplitBar ID="rspNavigation" runat="server" EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" Index="1" Skin="" /> 
    35       <telerik:RadPane ID="rpFiles" runat="server" EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" Height="" Index="2" Skin="" Width=""
    36         <asp:ListView ID="lvFiles" runat="server" ItemPlaceholderID="phItemPlaceholder"
    37           <LayoutTemplate> 
    38             <asp:PlaceHolder ID="phItemPlaceholder" runat="server" /> 
    39           </LayoutTemplate> 
    40           <ItemTemplate> 
    41             <div class="imageThumbnail"
    42               <asp:PlaceHolder ID="phThumbnailImage" runat="server" /> 
    43             </div> 
    44           </ItemTemplate> 
    45         </asp:ListView> 
    46       </telerik:RadPane> 
    47     </telerik:RadSplitter> 
    48      
    49     <!-- ModalPopup panel image details --> 
    50     <asp:Panel ID="pnlImageDetail" runat="server" Style="display: none;" CssClass="modalPopup" meta:resourcekey="pnlImageDetailResource1"
    51       <div id="divImageDetailDragHandle" runat="server" class="modalPopupHeader"
    52         <div id="ImageDetailsCloseButton" runat="server" style="float: right; cursor: pointer;" title="Close this popup"
    53           [close]</div> 
    54         Image Details 
    55       </div> 
    56       <div id="divImageDetails" runat="server"
    57       </div> 
    58     </asp:Panel> 
    59     <asp:Button ID="btnDecoy" runat="server" Text="Decoy Button" Style="display: none;" meta:resourcekey="btnDecoyResource1" /> 
    60     <ajt:ModalPopupExtender ID="mpeImageDetail" runat="server" DynamicControlID="divImageDetails" DynamicServiceMethod="GetImageDetail" PopupControlID="pnlImageDetail" PopupDragHandleControlID="divImageDetailDragHandle" TargetControlID="btnDecoy" BackgroundCssClass="modalBackground" OkControlID="ImageDetailsCloseButton" DynamicServicePath="" Enabled="True" /> 
    61      
    62     <!-- Upload new image in radWindow --> 
    63     <input id="btnUploadImage" type="button" value="Upload New Image" /> 
    64     <telerik:RadWindow ID="rwUploadImage" runat="server" Behaviors="Close, Move, Resize" Height="350px" Modal="true" NavigateUrl="ImagesUpload.aspx" ClientCallBackFunction="UploadCallback" OnClientShow="OnUploadShow" OpenerElementID="btnUploadImage" ReloadOnShow="True" Skin="WebBlue" Title="Upload an Image" Width="600px" /> 
    65   </div> 
    66    
    67   <script type="text/javascript"
    68     function ShowImageDetail(imageId) 
    69       { 
    70       var imgDetail = $find("<%= mpeImageDetail.ClientID %>"); 
    71       if (imgDetail) 
    72         { 
    73         imgDetail.set_dynamicContextKey(imageId); 
    74         imgDetail.show(); 
    75         } 
    76       } 
    77        
    78     // Called when a radWindow is being shown. 
    79     function OnUploadShow(radWindow) 
    80       { 
    81       // Get current value of treeview 
    82       var tv  = $find("<%= rtvFolders.ClientID %>"); 
    83       var node = tv.get_selectedNode(); 
    84       if(node == null) 
    85         { 
    86         radWindow.close(); 
    87         alert('Please select a folder'); 
    88         } 
    89       else 
    90         { 
    91         var myLoc = node.get_value(); 
    92         // Create a new object to be used as an argument to the radWindow 
    93         var arg = new Object(); 
    94         arg.Location = myLoc
    95         //Set the argument object to the radWindow 
    96         radWindow.Argument = arg
    97         } 
    98       } 
    99        
    100     function UploadCallback(radWindow,returnValue) 
    101       { 
    102       alert('radWindow callback!'); 
    103       // Simulate RadTreeView click 
    104       var ram = $find("<%= RadAjaxManager1.ClientID %>"); 
    105       ram.ajaxRequestWithTarget("<%= rtvFolders.UniqueID %>",""); 
    106       } 
    107   </script> 
    108   </form> 
    109 </body> 
    110 </html> 
    111  

    1 Imports System.IO 
    2 Imports Telerik.Web.UI 
    3  
    4 Partial Class Admin_Test 
    5     Inherits System.Web.UI.Page 
    6  
    7   Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load 
    8     If Not IsPostBack Then 
    9       Dim app As New Application 
    10       'Initital load of folders. 
    11       Dim rootFolder As DirectoryInfo = app.ImagesRootFolder 
    12       Dim nodes As New List(Of RadTreeNode) 
    13       For Each d In rootFolder.GetDirectories 
    14         Dim n As New RadTreeNode 
    15         n.Text = d.Name 
    16         n.Value = d.FullName 
    17         If d.GetDirectories.Count > 0 Then 
    18           n.ExpandMode = TreeNodeExpandMode.WebService 
    19         End If 
    20         nodes.Add(n) 
    21         n = Nothing 
    22       Next 
    23       rtvFolders.Nodes.AddRange(nodes) 
    24     End If 
    25   End Sub 
    26  
    27   <System.Web.Services.WebMethod()> _ 
    28   <System.Web.Script.Services.ScriptMethod()> _ 
    29   Public Shared Function GetImageDetail(ByVal contextKey As StringAs String 
    30     If IsNumeric(contextKey) Then 
    31       Dim i As New Attenda.Hammertime.Classes.Image(CInt(contextKey)) 
    32       Dim sb As New StringBuilder 
    33       sb.Append("<img src='../displayimage.aspx?iid=" & i.ID & "' alt='' title='' />"
    34       sb.Append("<p>" & i.FigureTitle & "<br />"
    35       sb.Append("Status: " & i.Status.ToString & "<br />"
    36       sb.Append("Size: " & (i.Size / 1024).ToString("N") & "KB<br />"
    37       sb.Append("Dimensions: " & i.Width & "x" & i.Height & "</p>"
    38       Return sb.ToString 
    39     Else 
    40       Return ("<p>Details could not be found for image '" & contextKey & "'.</p>"
    41     End If 
    42   End Function 
    43  
    44   <System.Web.Services.WebMethod()> _ 
    45   <System.Web.Script.Services.ScriptMethod()> _ 
    46   Public Shared Function GetFolders(ByVal node As RadTreeNodeData, ByVal context As ObjectAs RadTreeNodeData() 
    47     Dim parent As New DirectoryInfo(node.Value) 
    48     Dim results As New List(Of RadTreeNodeData) 
    49     For Each d In parent.GetDirectories 
    50       Dim rtnd As New RadTreeNodeData 
    51       rtnd.Text = d.Name 
    52       rtnd.Value = d.FullName 
    53       If d.GetDirectories.Count > 0 Then 
    54         rtnd.ExpandMode = TreeNodeExpandMode.WebService 
    55       End If 
    56       results.Add(rtnd) 
    57     Next 
    58     Return results.ToArray 
    59   End Function 
    60  
    61   Protected Sub rtvFolders_NodeClick(ByVal sender As ObjectByVal e As Telerik.Web.UI.RadTreeNodeEventArgs) Handles rtvFolders.NodeClick 
    62     Dim app As New Attenda.Hammertime.Classes.Application 
    63     Try 
    64       Dim rootUrl As String = app.ImagesRootURL 
    65       Dim images As New Attenda.Hammertime.Classes.Images(New DirectoryInfo(e.Node.Value)) 
    66       Dim imageData = From img As Attenda.Hammertime.Classes.Image In images _ 
    67                       Select imageId = img.ID, _ 
    68                              imageUrl = rootUrl & img.Location & "/" & img.ThumbnailImageName, _ 
    69                              imageTitle = img.FigureTitle.Replace("'""&rsquo;"
    70       lvFiles.DataSource = imageData 
    71       lvFiles.DataBind() 
    72       ' Save current node to profile. 
    73       Profile.imageTreeNode = e.Node.Value 
    74     Catch ex As Exception 
    75       Attenda.Hammertime.Classes.Application.LogWarning(ex, Diagnostics.EventLogEntryType.Error
    76       Throw ex 
    77     Finally 
    78       app = Nothing 
    79     End Try 
    80   End Sub 
    81  
    82   Protected Sub lvFiles_ItemDataBound(ByVal sender As ObjectByVal e As System.Web.UI.WebControls.ListViewItemEventArgs) Handles lvFiles.ItemDataBound 
    83     If e.Item.ItemType = ListViewItemType.DataItem Then 
    84       Dim ph As PlaceHolder = CType(e.Item.FindControl("phThumbnailImage"), PlaceHolder) 
    85       Dim lvdi As ListViewDataItem = CType(e.Item, ListViewDataItem) 
    86       Dim dataitem = lvdi.DataItem 
    87       Dim img As New HtmlImage 
    88       img.Src = DataBinder.Eval(dataItem, "imageUrl"
    89       img.Attributes.Add("title", DataBinder.Eval(dataItem, "imageTitle")) 
    90       img.Attributes.Add("onclick""ShowImageDetail(" & DataBinder.Eval(dataItem, "imageID") & ")"
    91  
    92       ph.Controls.Add(img) 
    93  
    94     End If 
    95   End Sub 
    96  
    97 End Class 
    98  
  2. Answer
    Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 08 Aug 2008 Link to this post

    Hello Nick,

    I'm afraid that calling ajaxRequestWithTarget will not produce the expected result. This is because calling it in such a way will only raise the treeview's RaisePostBackEvent method and eventually may throw an exception.

    Therefore, in order to achieve your goal you will need to extract the logic from the NodeClick handler and use RadAjaxManager to update the necessary control by calling its ajaxRequest client method. I attached a very simple implementation of the described approach. Please give it a try and see if this helps. 

    Best regards,
    Rosen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Nick
    Nick avatar
    86 posts
    Member since:
    Mar 2008

    Posted 08 Aug 2008 Link to this post

    Yay! That works great, thanks  :)
Back to Top