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

Problem with RadAjaxManager.ajaxRequestWithTarget()

2 Answers 260 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Nick
Top achievements
Rank 1
Nick asked on 05 Aug 2008, 11:32 AM
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?

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Test.aspx.vb" Inherits="Admin_Test" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"
<head runat="server"
  <title>Test Page</title> 
  <link href="../Styles/Hammertime.css" rel="stylesheet" type="text/css" /> 
</head> 
<body> 
  <form id="form1" runat="server"
  <div> 
    <p>Use this page to browse the images in the library</p> 
    <!-- Script and Ajax Managers --> 
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnablePageMethods="True" /> 
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" meta:resourcekey="RadAjaxManagerResource1"
      <AjaxSettings> 
        <telerik:AjaxSetting AjaxControlID="rtvFolders" EventName="NodeClick"
          <UpdatedControls> 
            <telerik:AjaxUpdatedControl ControlID="lvFiles" /> 
          </UpdatedControls> 
        </telerik:AjaxSetting> 
      </AjaxSettings> 
    </telerik:RadAjaxManager> 
     
    <!-- Page layout with TreeView and ListView --> 
    <telerik:RadSplitter ID="RadSplitter1" runat="server" Width="99%" Height="500px" Skin="Telerik" Items-Capacity="4" meta:resourcekey="RadSplitter1Resource1" SplitBarsSize=""
      <telerik:RadPane ID="rpNavigation" runat="server" Width="200px" EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" Height="" Index="0" Skin=""
        <telerik:RadTreeView ID="rtvFolders" runat="server" CausesValidation="false" ValidationGroup="Folders"
          <WebServiceSettings Path="Images.aspx" Method="GetFolders" /> 
          <ExpandAnimation Duration="100" /> 
          <CollapseAnimation Duration="100" Type="OutQuint" /> 
        </telerik:RadTreeView> 
      </telerik:RadPane> 
      <telerik:RadSplitBar ID="rspNavigation" runat="server" EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" Index="1" Skin="" /> 
      <telerik:RadPane ID="rpFiles" runat="server" EnableEmbeddedBaseStylesheet="False" EnableEmbeddedSkins="False" Height="" Index="2" Skin="" Width=""
        <asp:ListView ID="lvFiles" runat="server" ItemPlaceholderID="phItemPlaceholder"
          <LayoutTemplate> 
            <asp:PlaceHolder ID="phItemPlaceholder" runat="server" /> 
          </LayoutTemplate> 
          <ItemTemplate> 
            <div class="imageThumbnail"
              <asp:PlaceHolder ID="phThumbnailImage" runat="server" /> 
            </div> 
          </ItemTemplate> 
        </asp:ListView> 
      </telerik:RadPane> 
    </telerik:RadSplitter> 
     
    <!-- ModalPopup panel image details --> 
    <asp:Panel ID="pnlImageDetail" runat="server" Style="display: none;" CssClass="modalPopup" meta:resourcekey="pnlImageDetailResource1"
      <div id="divImageDetailDragHandle" runat="server" class="modalPopupHeader"
        <div id="ImageDetailsCloseButton" runat="server" style="float: right; cursor: pointer;" title="Close this popup"
          [close]</div> 
        Image Details 
      </div> 
      <div id="divImageDetails" runat="server"
      </div> 
    </asp:Panel> 
    <asp:Button ID="btnDecoy" runat="server" Text="Decoy Button" Style="display: none;" meta:resourcekey="btnDecoyResource1" /> 
    <ajt:ModalPopupExtender ID="mpeImageDetail" runat="server" DynamicControlID="divImageDetails" DynamicServiceMethod="GetImageDetail" PopupControlID="pnlImageDetail" PopupDragHandleControlID="divImageDetailDragHandle" TargetControlID="btnDecoy" BackgroundCssClass="modalBackground" OkControlID="ImageDetailsCloseButton" DynamicServicePath="" Enabled="True" /> 
     
    <!-- Upload new image in radWindow --> 
    <input id="btnUploadImage" type="button" value="Upload New Image" /> 
    <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" /> 
  </div> 
   
  <script type="text/javascript"
    function ShowImageDetail(imageId) 
      { 
      var imgDetail = $find("<%= mpeImageDetail.ClientID %>"); 
      if (imgDetail) 
        { 
        imgDetail.set_dynamicContextKey(imageId); 
        imgDetail.show(); 
        } 
      } 
       
    // Called when a radWindow is being shown. 
    function OnUploadShow(radWindow) 
      { 
      // Get current value of treeview 
      var tv  = $find("<%= rtvFolders.ClientID %>"); 
      var node = tv.get_selectedNode(); 
      if(node == null) 
        { 
        radWindow.close(); 
        alert('Please select a folder'); 
        } 
      else 
        { 
        var myLoc = node.get_value(); 
        // Create a new object to be used as an argument to the radWindow 
        var arg = new Object(); 
        arg.Location = myLoc
        //Set the argument object to the radWindow 
        radWindow.Argument = arg
        } 
      } 
       
    function UploadCallback(radWindow,returnValue) 
      { 
      alert('radWindow callback!'); 
      // Simulate RadTreeView click 
      var ram = $find("<%= RadAjaxManager1.ClientID %>"); 
      ram.ajaxRequestWithTarget("<%= rtvFolders.UniqueID %>",""); 
      } 
  </script> 
  </form> 
</body> 
</html> 
 

Imports System.IO 
Imports Telerik.Web.UI 
 
Partial Class Admin_Test 
    Inherits System.Web.UI.Page 
 
  Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load 
    If Not IsPostBack Then 
      Dim app As New Application 
      'Initital load of folders. 
      Dim rootFolder As DirectoryInfo = app.ImagesRootFolder 
      Dim nodes As New List(Of RadTreeNode) 
      For Each d In rootFolder.GetDirectories 
        Dim n As New RadTreeNode 
        n.Text = d.Name 
        n.Value = d.FullName 
        If d.GetDirectories.Count > 0 Then 
          n.ExpandMode = TreeNodeExpandMode.WebService 
        End If 
        nodes.Add(n) 
        n = Nothing 
      Next 
      rtvFolders.Nodes.AddRange(nodes) 
    End If 
  End Sub 
 
  <System.Web.Services.WebMethod()> _ 
  <System.Web.Script.Services.ScriptMethod()> _ 
  Public Shared Function GetImageDetail(ByVal contextKey As StringAs String 
    If IsNumeric(contextKey) Then 
      Dim i As New Attenda.Hammertime.Classes.Image(CInt(contextKey)) 
      Dim sb As New StringBuilder 
      sb.Append("<img src='../displayimage.aspx?iid=" & i.ID & "' alt='' title='' />"
      sb.Append("<p>" & i.FigureTitle & "<br />"
      sb.Append("Status: " & i.Status.ToString & "<br />"
      sb.Append("Size: " & (i.Size / 1024).ToString("N") & "KB<br />"
      sb.Append("Dimensions: " & i.Width & "x" & i.Height & "</p>"
      Return sb.ToString 
    Else 
      Return ("<p>Details could not be found for image '" & contextKey & "'.</p>"
    End If 
  End Function 
 
  <System.Web.Services.WebMethod()> _ 
  <System.Web.Script.Services.ScriptMethod()> _ 
  Public Shared Function GetFolders(ByVal node As RadTreeNodeData, ByVal context As ObjectAs RadTreeNodeData() 
    Dim parent As New DirectoryInfo(node.Value) 
    Dim results As New List(Of RadTreeNodeData) 
    For Each d In parent.GetDirectories 
      Dim rtnd As New RadTreeNodeData 
      rtnd.Text = d.Name 
      rtnd.Value = d.FullName 
      If d.GetDirectories.Count > 0 Then 
        rtnd.ExpandMode = TreeNodeExpandMode.WebService 
      End If 
      results.Add(rtnd) 
    Next 
    Return results.ToArray 
  End Function 
 
  Protected Sub rtvFolders_NodeClick(ByVal sender As ObjectByVal e As Telerik.Web.UI.RadTreeNodeEventArgs) Handles rtvFolders.NodeClick 
    Dim app As New Attenda.Hammertime.Classes.Application 
    Try 
      Dim rootUrl As String = app.ImagesRootURL 
      Dim images As New Attenda.Hammertime.Classes.Images(New DirectoryInfo(e.Node.Value)) 
      Dim imageData = From img As Attenda.Hammertime.Classes.Image In images _ 
                      Select imageId = img.ID, _ 
                             imageUrl = rootUrl & img.Location & "/" & img.ThumbnailImageName, _ 
                             imageTitle = img.FigureTitle.Replace("'""&rsquo;"
      lvFiles.DataSource = imageData 
      lvFiles.DataBind() 
      ' Save current node to profile. 
      Profile.imageTreeNode = e.Node.Value 
    Catch ex As Exception 
      Attenda.Hammertime.Classes.Application.LogWarning(ex, Diagnostics.EventLogEntryType.Error
      Throw ex 
    Finally 
      app = Nothing 
    End Try 
  End Sub 
 
  Protected Sub lvFiles_ItemDataBound(ByVal sender As ObjectByVal e As System.Web.UI.WebControls.ListViewItemEventArgs) Handles lvFiles.ItemDataBound 
    If e.Item.ItemType = ListViewItemType.DataItem Then 
      Dim ph As PlaceHolder = CType(e.Item.FindControl("phThumbnailImage"), PlaceHolder) 
      Dim lvdi As ListViewDataItem = CType(e.Item, ListViewDataItem) 
      Dim dataitem = lvdi.DataItem 
      Dim img As New HtmlImage 
      img.Src = DataBinder.Eval(dataItem, "imageUrl"
      img.Attributes.Add("title", DataBinder.Eval(dataItem, "imageTitle")) 
      img.Attributes.Add("onclick""ShowImageDetail(" & DataBinder.Eval(dataItem, "imageID") & ")"
 
      ph.Controls.Add(img) 
 
    End If 
  End Sub 
 
End Class 
 

2 Answers, 1 is accepted

Sort by
0
Accepted
Rosen
Telerik team
answered on 08 Aug 2008, 07:56 AM
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.
0
Nick
Top achievements
Rank 1
answered on 08 Aug 2008, 10:55 AM
Yay! That works great, thanks  :)
Tags
Ajax
Asked by
Nick
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Nick
Top achievements
Rank 1
Share this question
or