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:
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?
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 Object, ByVal 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 String) As 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 Object) As 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 Object, ByVal 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("'", "’") | |
| 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 Object, ByVal 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
0
Accepted
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.
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
Rank 1
answered on 08 Aug 2008, 10:55 AM
Yay! That works great, thanks :)