tree view + no postback + update panel

setup:

master page - content page layout

On my content page I want two update panels, one to contain a tree view dynamically generated from a database and the other to contain dynamically generated data (also pulled from a database) based on what is selected in the tree view. It is my understanding that tree view cannot be in an update panel. What is the best strategy for accomplishing this? I don't want a postback to be performed when an item is selected in the tree view. In other words, I don't want the entire page (form) refreshed just because an item in the tree view is selected.

Thanks in advance for any help.

If your treeview doesn't change the contents after the PageLoad, you may be able to have it in an update panel. We found that it doesn't work well if you add nodes to the treeview when you click a parent node, but if you load the full treeview it may be ok. If you need to dynamically add nodes as you click, you would probably need something like the TreeView that telerik has. We were looking at that one until we decided to do our page differently, and that control is not free, but seems to work nice.

The 2nd update panel would have a grid view in it. From the grid view I would add or edit content. If I added content the tree view would need to be refreshed without a full page postback to display the newly added item.

From the sounds of it, this isn't possible with strictly MS controls at the moment.

I just finished this very thing. The page starts with just a pulldown and then based on that value creates a Treeview dynamically without refreshing the page. Then clicking on a node causes another update panel to refresh with specific information.

Pretty convoluted with half Telerik and half MS. The full Telerik approach (Treeview and Update panel) looks easier, but we are using MS AJAX.

My older version of the Treeview (5.3) does not work with MS update panel, so I need to upgrade. I'm not too happy about it, but it seems to work well.

WISH LIST: A direct JavaScript method to postback to an MS update panel. As it is this seems to be the best approach:

http://forums.asp.net/thread/1541012.aspx

I followed the instructions on that thread and I have my update panel refreshing from javascript code. How do I call a javascript function when a tree node is clicked?

in the Telerik Treeview there is a property called "onBeforeNodeClick" and you can set that to the name of a javaScript function to fire when a node is clicked and before postback.

So, I did

myTreeNode.NavigateUrl ="javascript:postBackHiddenField('hardcodedhiddenfieldcontrol','" + uniqueIdentifierOfTreeNode +"')"function postBackHiddenField(hiddenFieldID, clickedID){alert("works");var hiddenField = $get(hiddenFieldID);__doPostBack(hiddenFieldID,'');}

I want to use the uniqueIdentifierOfTreeNode in order to modify the select paramter of a gridview in the update panel I'm refreshing from __doPostBack. I have no idea. Any help is appreciated. Is this the best approach to take even?

I forgot to mention the postback and refresh of the update panel is working as I have a label refreshed with the system time.
Nevermind, it looks like I came up with a reasonable solution that works.

TREEVIEW in an UPDATEPANEL

This is a simple one, I know it...

I have a treeview inside of an updatepanel. The treeview is recursively populated from a database table... Everything works properly, except...
When I select a node, the whole thing loads again underneat it...

This is the code that fills the treeview control...

Protected Sub fillTree(ByVal n As TreeNode, ByVal pid As Integer)
Dim sql As New SqlConnection(ConfigurationManager.ConnectionStrings("sqlcon").ToString)
sql.Open()
Dim cmd As SqlDataReader = New SqlCommand("SELECT * FROM quarem_PortfolioFolders WHERE OwnerID='" & Web.Security.Membership.GetUser.ProviderUserKey.ToString & "' AND FolderParent=" & pid, sql).ExecuteReader

While cmd.Read
Dim newnode As New TreeNode(cmd("FolderName").ToString, cmd("FolderID"))
fillTree(newnode, cmd("FolderID"))
If IsDBNull(n) Then
portfolders.Nodes.Add(newnode)
newnode.Expanded = False
newnode.Value = cmd("FolderID")
newnode.SelectAction = TreeNodeSelectAction.Select
Else
n.ChildNodes.Add(newnode)
newnode.Expanded = False
newnode.Value = cmd("FolderID")
newnode.SelectAction = TreeNodeSelectAction.Select
End If
End While

cmd.Close()
sql.Close()
End Sub

This runs in Page_Load.

My SelectedNodeChanged sub simple updates the updatepanel that houses a repeater.
As I said, everything works great except that I get the tree loading itself over and over again!

Any suggestions?

I am truly sorry for wasting everyone's time! LOL

Obviously, the answer is IF NOT ISPOSTBACK...
I thought the directive was set, and when I went back to look at the code, I noticed...

Again... if you read this, PLEASE accept my apology!

TreeView PopulateOnDemand within AccordionPane

I have an accordion inside of an Accordion Panel, which is generated from a database. I have the treeview set to populate on demand if there are any subnodes, using the TreeNodePopulate event of the TreeView. Since the Tree is inside of the Accordion Pane, I lose design support, and have to explicitly find and cast the control from the Accordion object. Becuase of this, I lose the event handling binding to that Treeview node. I'm not sure If explicitly fetching and casting is right to begin with, so I'd rather not waste a lot of time trying to manually wire the events to the casted TreeView in codebehind if there is a better way.

The target 'ctl00$ContentPlaceHolder2$ctl01$TreeView1' for the callback could not be found or did not implement ICallbackEventHandler.

<atlastoolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>
<a href="http://links.10026.com/?link=" onclick="return false;" class="accordionLink">Panel 2</a></Header>
<Content>
<asp:TreeView ID="TreeView1" ExpandDepth="0" PopulateNodesFromClient="true" ShowLines="true"
ShowExpandCollapse="true" runat="server" OnTreeNodePopulate="TreeView1_TreeNodePopulate" />
</Content>
</atlastoolkit:AccordionPane>

TreeView tree1;

protected void Page_Load(object sender, EventArgs e)
{
tree1 = (TreeView)AccordionPane2.ContentContainer.FindControl("TreeView1");

}

protected void TreeView1_TreeNodePopulate(object sender, TreeNodeEventArgs e)
{
PopulateSubLevel(Convert.ToInt32(e.Node.Value), e.Node);
}

private void PopulateSubLevel(int parentid, TreeNode parentNode)
{
SqlConnection objConn = new SqlConnection(@dotnet.itags.org."server=SYSSIMERT01\SQLEXPRESS;Trusted_Connection=true;DATABASE=TreeViewSampleDB");
SqlCommand objCommand = new SqlCommand("select id,title,(select count(*) FROM SampleCategories WHERE parentid=sc.id) childnodecount FROM SampleCategories sc where parentID=@dotnet.itags.org.parentID", objConn);

objCommand.Parameters.Add("@dotnet.itags.org.parentID", SqlDbType.Int).Value = parentid;

SqlDataAdapter da = new SqlDataAdapter(objCommand);
DataTable dt = new DataTable();
da.Fill(dt);
PopulateNodes(dt, parentNode.ChildNodes);
}

Hi j05h,

It sounds like the event isn't being properly wired up whenever you postback. If you're creating controls dynamically (and then also their event handlers), be sure to recreate them on postback. If this doesn't help, perhaps you can provide asmall sample demonstrating the problem that I can run.

Thanks,
Ted

treeview, accordion and updatepanels ;)

hello, here is my problem, i'll try to explain my page structure

on my site, i use treeviews (filled by code from hierarchical database) in several accordion panes to navigate on my page

so, i've :

<cc1:Accordion ...>

<Panes>

<cc1:AccordionPane>

<asp:TreeView>...</asp:TreeView>

</cc1:AccordionPane>

.. 2nd pane with a treeview, and so on...

</Panes>

</cc1:Accordion>

my accordion acts like a "menu" to choose which type of data you want to browse

when my user clicks on a node of one of my treeviews (the one which is in the active accordion pane obviously), it sets the value of an HiddenField to the selected node value

in the main part of the page, i've a formview which displays data (with the select parameter bound to the hiddenfield value)

and it's works

but sometimes, some data changes made in the formview need to be done in the treeviews too (node label for instance)

but I don't how to do that

currently, my treeviews are in an accordion which is NOT is an updatepanel

but if i put the accordion (containing the treeviews) is an updapanel, it don't work, clearly there is a problem with the HiddenField (which links treeviews and formview)

I've tried to put the hiddenfield at different level (inside/outside the updatepannel), no result

please help me to choose a nice way to "ajax"-reload treeviews inside accordion on item updated event of the formview

thanks

Hi Zarzar,

My understanding of your issue is that you want to implement this function. When click on the TreeView node , the main part where a FormView is located will be refreshed. Meanwhile , when the FormView changes , it selected TreeNode will changed correspond to the FormView in turn. Your Accordion + TreeView act like a navigate bar. If I have misunderstood , please feel free to let me know.

As far as I know, TreeView is incompatible with UpdatePanel.

Controls that Are Not Compatible with UpdatePanel Controls

The following ASP.NET controls are not compatible with partial-page updates, and are therefore not supported inside anUpdatePanel control:

TreeView andMenu controls.

Web Parts controls. For more information, seeASP.NET Web Parts Controls.

FileUpload controls when they are used to upload files as part of an asynchronous postback.

GridView andDetailsView controls when their EnableSortingAndPagingCallbacks property is set totrue. The default isfalse.

Login,PasswordRecovery,ChangePassword, andCreateUserWizard controls whose contents have not been converted to editable templates.

TheSubstitution control.

Validation controls, which includes theBaseCompareValidator,BaseValidator,CompareValidator,CustomValidator,RangeValidator,RegularExpressionValidator,RequiredFieldValidator, andValidationSummary control.

thanks for answering

Jonathan Shen – MSFT:

My understanding of your issue is that you want to implement this function. When click on the TreeView node , the main part where a FormView is located will be refreshed. Meanwhile , when the FormView changes , it selected TreeNode will changed correspond to the FormView in turn. Your Accordion + TreeView act like a navigate bar. If I have misunderstood , please feel free to let me know.

well, perfect understanding!

it seems clear that Treeview is not the best friend of UpdatePanel

if I understand, I've to remove my FormView from the UpdatePanel if I want a synchronous postback to be launched and my trees to be refreshed ?

Hi Zarzar,

zarzar:

if I understand, I've to remove my FormView from the UpdatePanel if I want a synchronous postback to be launched and my trees to be refreshed ?

Yes, as far as I know. It is the easiest way though not your willing.

Another way is use Javascript to find the Node and change its CSS style to make it as "selected", when the FormView is modified and a synchronous postback has been lauched. (Make sure that you have removed the TreeView out of the UpdatePanel).

See here is the generated HTML of a TreeNode.

<table cellpadding="0" cellspacing="0" style="border-width:0;">
<tr>
<td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"></div></td><td><div style="width:20px;height:1px"></div></td><td><img src="http://pics.10026.com/?src=/ControlToolkitTest/WebResource.axd?d=MYZni0kLx_fLYO5SLREkCaFRyyDbYHURF369ULcvgUM1&t=633223348596789238" alt="" /></td><td style="white-space:nowrap;"><a class="CourseFSTreeView_0" href="http://links.10026.com/?link=javascript:__doPostBack('CourseFSTreeView','sMy Computer\\Favorites\\Technology\\Microsoft')" onclick="TreeView_SelectNode(CourseFSTreeView_Data, this,'CourseFSTreeViewt6');" id="CourseFSTreeViewt6">Microsoft</a></td>
</tr>
</table>

You can use Javascript to get all <a> element by using document.getElementByTagName("a") , then find the selected item by traversing the array(for example , use a.innerText =="Microsoft"). Now, you can change its CSS style(Make sure not to click on it , or it will be refreshed by sending a postback).

This solution sounds great ,but it is so complex to give a whole sample. We should consider the cross-browser issues. For example in IE we can use a.innerText , but we should use a.textContent on Firefox.

So , in my opnion , you should take the former one. Good luck.

Hope this help.

Best regards,

Jonathan

trigger update panel without using controls

I have a bunch of links which I generate as a string and output to a label control. (its a database generated tag cloud). I want to update a gridview in an update panel when one of these tags/links is clicked. All these links exist outside of the update panel. How do I trigger such an update on the update panel??

Thanks in advance!

Andles

Hey Anderloo

I think these forum threads have the answer your looking for

http://forums.asp.net/thread/1645424.aspx