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.

Tree view control with ajax

Hello,

I dont know, is this the right thread to post my prob. Here is my problem. I have a tree view control in a master page. I have created that tree view from "treeview.xml" file. I have created this file from database table. In this tree view, more than one node may have same name. My table has four fields - nodeid, nodename, parentid and lavel. The xml file looks like...

<?xml version='1.0' encoding='utf-8' ?>
<rootNode>
<siteNode title="root" id="1">
<siteNode title="my document" id="3">
<siteNode title="my films" id="31">
<siteNode title="bengalis" id="33">
<siteNode title="aaa102" id="102" />
<siteNode title="aaa106" id="106">
<siteNode title="xxxx1" id="1051" />
<siteNode title="xxxx1" id="1053" />
<siteNode title="zzzz2" id="1059" />
...
...
Every node may have more than one information. All these informations are stored in a different file with "nodeid". What I want is that when any one click on any node I want to display all the information stored in that node in the "Conten Page" with the help of Ajax. For that I need the id of that selected node. How can I access the node id?

Angshujit

Do you want the tree view to dynamically add nodes when you click one of the nodes? If so, you will have a lot of problems using the built in controls for that because the treeview is not supported inside an update panel. You can generally have a treeview in an update panel if it doesn't change the contents, but if you want it to change after page load, you should look at getting a 3rd part control for it.

Hello,

Thank you for your reply. No, I dont want so at present. Actually what is became my headache is how to get the id of the node.

protectedvoid SelectedNodeChanged(object sender,EventArgs e)

{

string id = treeView1.SelectedNode.?

Because without knowing the id I cannot search the table for contents belongs to that node. I cannot usetreeView1.SelectedNode.Text becasue there may be more than one nodes with same text. Is there any way to solve it? Please help me.

Angshujit

Tree view nested in Accordion taking two clicks to fire selectedNodeChanged event

I have a treeview in one of my accordion panes. When I click on a node for the first time, instead of firing the selectedNodeChanged event, it just goes through a normal postback. However the second time I click it, the event is fired correctly. Is there another event being fired that I'm not seeing?

Here's a trimed down version of the code. Thanks for any ideas. -d

<atlasToolKit:Accordion ID="navAccordion" runat="server" Height="410"
FadeTransitions="true" FramesPerSecond="40"
TransitionDuration="250"
AutoSize="None"
>

<atlasToolKit:AccordionPane ID="AccordionPane2" runat="server">
<Header><a href="http://links.10026.com/?link=" onclick="return false;" class="accordionLink">Tank Groups</a></Header>
<Content>
<asp:Panel ID="navPanel" runat="server" ScrollBars="auto" CssClass="extraPadding" BackColor="white" Width="180" Height="200">
<asp:TreeView ID="navTankGroups" OnUnload="nav_Unload" OnSelectedNodeChanged="nav_SelectedNodeChanged" runat="server" SkinID="nav" >
<Nodes>
<asp:TreeNode Text="Page 1" Value="~/page1.aspx" />
<asp:TreeNode Text="Page 2" Value="~/page2.aspx" />
</Nodes>
</asp:TreeView>
</asp:Panel>
</Content>
</atlasToolKit:AccordionPane>
</atlasToolKit:Accordion>

Here's the selectedNodeChanged routine.

Protected Sub nav_selecedNodeChanged(ByVal sender As Object, ByVal e As EventArgs)
Dim navTankGroups As TreeView = CType(AccordionPane2.ContentContainer.FindControl("navTankGroups"), TreeView)
If Not navSchedule.SelectedNode.ValuePath = String.Empty Then
Response.Redirect(navTankGroups.SelectedNode.Value)
End If
End Sub

This appears to only be an issue on master pages. I placed the accordion in a new page and it worked fine. Anyone have an idea on why it is taking two clicks in the masterpages? -d

Hi dtamber,

I'm not sure what's going on with this... could you perhaps post the simplest possible version you have that still causes the problem?

Thanks,
Ted

Look at the source code before and after the button click, there is one of 2 possibilities.

1. someting being created dynamicly doesn't have an ID property set, in this case you'll see the treeview control in the source with different names

Like ctl03 and ctl05 in the treeview's name

2. I have fixed my postback issues by adding a hidden field to each accordion pane at page_init. I don't know why this fixes the erradic behavior, but it does.

Let me know if either of these works.

Chris

I think this needs a bump.

I just tried using an accordion in a usercontrol and added 3 panes, each containing an updatepanel containing a button.

The button click event is not fired. Adding a hidden field as Chris suggested allows the click event to fire.

Nathan

I also ran into the exact same problem. I was using a gridview inside an accordion and the events weren't firing the first attempt. If you add a control to it during OnInit then it appears to work. My assumption is that there's a problem with the RenderControls or something.

Astynax777:

I also ran into the exact same problem. I was using a gridview inside an accordion and the events weren't firing the first attempt. If you add a control to it during OnInit then it appears to work. My assumption is that there's a problem with the RenderControls or something.

Astynaxx777 - This clicking twice problem has been a real issue for me. Can you please elaborate with a small example if possible? You mean to add a control to the AccordionPane when the page loads (through the code behind)?

Your help would be greatly appreciated.

I ran into the same problem where I couldn't get a Button click event to fire off until I did whatCConchelos tried:

"2. I have fixed my postback issues by adding a hidden field to each accordion pane at page_init. I don't know why this fixes the erradic behavior, but it does."

Here's a basic example:

 
<body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> </div> <cc1:Accordion ID="Accordion1" runat="server"> <Panes> <cc1:AccordionPane ID="AccordionPane1" runat="server"> <Header>Test1</Header> <Content> <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton> </Content> </cc1:AccordionPane> <cc1:AccordionPane ID="AccordionPane2" runat="server"> <Header>Test2</Header> <Content> <asp:Button ID="Button1" runat="server" Text="Button" /> </Content> </cc1:AccordionPane> </Panes> </cc1:Accordion> </form></body>
 

The Button1 click event would not get called until I added a hidden field to the AccordionPane that contained Button1 on the Page_Init:

Private Sub Page_Init(ByVal senderAs System.Object,ByVal eAs System.EventArgs)Handles MyBase.InitDim myAccordionPaneAs AccordionPaneDim myTextBoxAs New TextBox myTextBox.Visible =False myAccordionPane =MyBase.FindControl("AccordionPane2") myAccordionPane.Controls.Add(myTextBox)End Sub

I thinkAstynax777 is right - there must be something wrong with the controls inside an AccordionPane when being rendered.

Thank you very much. It should be noted that after Astynax777's suggestion I tried it with a button and I forgot to hide it, and it didn't work as expected.

Excellent example, thanks again.

Hi,

has anyone found out more about this issue? As indicated in a previous post, the issue appears to be that controls are not rendered properly the first time the accordion is loaded. When the postback occurs, the controls have a different id, and no event is fired since it cannot be hooked up to the appropriate control (since the ID has changed).

I have a slightly different problem than those posted above as the accordion I'm working with is loaded via a datasource. I cannot add controls on the init event as a temporary fix. Any idea for a workaround would be greatly appreciated until this is resolved.

Thanks

btw, this "click twice" error disappears when I have only 1 accordion control on a page. If there are two accordion controls (one is data bound, the other is not), then I have to click twice. When I only have the databound accordion, it works as intended.

The good thing is that adding the "invisible" control to each pane in the Accordion which is not databound has fixed the "click twice" error in the databound Accordion.

Ok, I think I have this problem fixed. You can see the changes I made athttp://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=5796 . There's 2 files I uploaded for that issue. I might help you... or it might not, I have not tested it for your problem but it certainly fixed mine! Good luck.

Has anybody else tried it with the new 10660 release? For me, the event handling never worked. My accordion is completely databound and does not contain any unbound panes. Consequently, the workaround will not work for me. I've just tried it with 10660, but no change.

Dennis Doomen
Aviva Solutions

I was having all of those 'click twice' problems but in randomly places. I used Accordions on many different pages and I couldnt figure out why it worked on some pages and didnt on others. I realized that on the page that it didnt work I was doing my control loading during OnInit and on my other pages that did work it was during PageLoad. Im guessing you have to make sure that everything must be done in one or the other. If you have User Controls make sure that your logic and things are also in it's page load as well. Dont mix and match :)

TreeView and update panel

I am creating a browser for a large document management system, modelled on the way windows explorer works.

So: ... I have a TreeView providing a view of the folders for which I am populating the child nodes on demand when a node is expanded or clicked. (The original method of populating the whole TreeView was impractical since it took several minutes to return and often timeout!)

At the same time, if a node is clicked, I show a list of the documents in that folder.

I can get this working, but somewhere along the way, the client stops working and the TreeView click event stops firing.

Is this a known issue or do you think I am asking too much of the framework?

I have since abandonded Atlas for this and am currently living with a long blank screen between page refreshes, which I think is totally useless for user experience.

Sorry not an immediate answer, but I would also be interested in anybody else's take on this.

I will trying to build more or less the same thing over the next couple of days (for an online content management system) so I'll get back to you then on it (successful or not!), but no I don't think it's asking too much, it's a perfectly logical use of it!

Coming back to this post.. .

How have you implemented the TreeView - just that it is supposed to implement client call back as part of the control so you shouldn't need to have blank screens and whole page refreshes - possibly a pause before expanding if it's big - but no blank screens?

I've just dropped it into my content management system, and while it's not pure Atlas, it seems to work fine using the client call back? Probably I'm missing something as only just started playing with Atlas.

Trigger design-time error

At the begin, is all ok: when I open my project the controls was showed normally.
After first run, when I switch from html view to design-view the updatepanel control show this error:

Error Creating Control - Content1
'Triggers' could not be initialized. Details: 'Triggers' could not be added to the collection. Details: Object does not match target type.

This is my code:

<%

@dotnet.itags.org.PageLanguage="VB"MasterPageFile="~/MasterPage.master"AutoEventWireup="false"CodeFile="Ricerche.aspx.vb"Inherits="Ricerche"title="Ricerche" %>
<asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"runat="Server">
<atlas:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"EnableScriptGlobalization="false"></atlas:ScriptManager>
<asp:TextBoxID="TxtSearch"runat="server"></asp:TextBox>
<asp:ImageButtonID="ImageButton1"runat="server"ImageUrl="~/Images/Cerca.gif"/><br/><atlas:UpdatePanelID="UpdatePanel1"runat="server"Mode="Conditional">
<ContentTemplate>
<asp:GridViewID="GridView1"runat="server"AutoGenerateColumns="True"DataKeyNames="ID"></asp:GridView>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTriggerControlID="ImageButton1"EventName="Click"/>
</Triggers>
</atlas:UpdatePanel>
</asp:Content>

I must say that I use April CTP of Atlas and Atlas controlToolkit too.
Now i try to delete triggers section and change update panel mode to always, and the page was displayed correctly. But if I insert again triggers section the error come back.
What I can do? thanks

I also just started getting the same design time error ..

Error Creating Control - Content1
'Triggers' could not be initialized. Details: 'Triggers' could not be added to the collection. Details: Object does not match target type.

And in my specific case, I have:

And .. I've been using pages that have a very similar setup for like 2 weeks without problems like this.
Then today, I started getting the 'Error Creating Control' message when I went from Source view of the asp page to the Design view.

<asp:Content id="content1"> <atlas:UpdatePanel id="updatePanel1" runat="server" mode="Conditional"> <ContentTemplate> ... <asp:GridView ... /> ... </ContentTemplate> <Triggers> <atlas:ControlEventTrigger ControlID="button1" EventName="Click" /> <atlas:ControlValueTrigger ControlID="ddl1" PropertyName="SelectedValue" /> </Triggers> </atlas:UpdatePanel> ... <asp:Button id="button1" runat="server" Text="Huh?"> ... <asp:DropDownList id="ddl1" runat="server" /> ...</asp:Content>

Need assistance with this problem .. thanks!
Hmm .. interesting, so .. I open up the project this morning. The problem I was having yesterday isn't occurring anymore. Not much has changed from yesterday to today, other than I've added more content to the page.
I believe this is a bug with the IDE not handeling the trigger well in design mode. I have had this exact same problem and fix it by restarting VS 2005.

For some reason, the error went away for me when I hit "Save"...

if that's any help

Trigger UpdatePanel after Page is loaded

HI, i was wondering if UpdatePanel could be trigger after the page is loaded.
Im trying to load a grid view inside an update panel without using any button event.

Thanks!

you could use a timer:

<asp:Timer ID="refreshTimer" runat="server" Interval="1000">
</asp:Timer>

<asp:UpdatePanel>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="refreshTimer" EventName="Tick" />
</Triggers>
</asp:UpdatePanel>

The update panel will be refreshed every 1 second, so you could decide what to show in it without any button events.

Thanks Yani for the reply, but using the timer will always refresh may updatepanel and this will create/increase server process a lot.

Still havent found a solution to my problems thru self coding. Looks like im going to use xmlhttp to load a div tag and put it inside an update panel so that when a year list box is changed it will reload the div content via javascript again.

Is there an alternative way in doing this?

Use Year select box(DropDownList) as an AsyncPostbackTrigger And put the Gridview inside update panel.

If I'm understanding correctly, you want to load the page initially with an empty UpdatePanel and then immediately do an async postback to load the contents of the UpdatePanel, right? (I assume this is because it takes a long time to load the data for that UpdatePanel.)

Check out my latest blog post:http://smarx.com/posts/delayed-load-with-an-updatepanel.aspx.

Trouble with CalendarExtender into Multiview into UpdatePanel

Hi, I've a problem with an CalendarExtender control.
I've the CalendarExtender control in Multiview's view; in turn, the Multiview control is into updatepanel control.
The code would be roughly as follows:

<asp:ScriptManagerID="ScriptManager1"runat="server"EnablePartialRendering="true"EnableScriptGlobalization="true"EnableScriptLocalization="true">

</asp:ScriptManager>

<asp:UpdatePanelrunat="server"ID="upprueba"UpdateMode="Conditional">

<ContentTemplate>

<asp:MultiViewrunat="server"ID="mv1">

<asp:Viewrunat="server"ID="vista0">

nada

</asp:View>

<asp:Viewrunat="server"ID="View1">

<uc1:ctlAnteced_1ID="CtlAnteced_1_1"runat="server"IdPaciente="130"/>

</asp:View>

</asp:MultiView>

<asp:Buttonrunat="server"ID="boton1"Text="Vista1"/>

<asp:Buttonrunat="server"ID="boton2"Text="Vista2"/>

</ContentTemplate>

</asp:UpdatePanel>

Note: CtlAnteced_1_1 contains a CalendarExtender control.

The problem occurs in IE 6.0 (for Windows XP SP2) only; in IE 7.0 and IE 6.0 for Windows Server 2003 it works correctly. If not select a default view, then the CalendarExtender control shows backgroundless. In contrast, if I select a default view, the CalendarExtender control shows correctly.
I think this problem is because the updatepanel is preventing the script of CalendarExtender be updated on the page; but, why this doesn't happen in IE 7.0? There is something I can do to make this work in IE 6.0?

Thanks!!

What version of the AjaxControlToolkit are you using?

Hi jaimedp!! thank you for reply. I'm using september 20 AJAX Control Toolkit version's.

I was watching versions of ajax control toolkit and I discovered that the published verision that was prior to 09/20/2007. I updated the reference and it works fine now.

Thank you for your help!!

I hope this thread is still fresh enough.

I am having the same problem with the calendarextender control. The symptoms:

1. It works fine in a simple web form, e.g., a web form containing only a text box and the calendar extender.

2. It works in the very first View of a MultiView control, which is set as the default view at Page_Load. It does not work in any other View.

3. If I create a simple User Control with only a textbox and the calendar extender, then embed this user control in an aspx page, it does not work. Seems that the OP dj_javi707 had it work from a User Control, would you mind giving us a little hint? Thanks.

When it does not work, the javascript error message is always:

Error: 'AjaxControlToolkit' is undefined.
Code: 0

I think it maybe because the scriptmanager of ajax control toolkit is not loaded if the control is placed in a non-default view or when the user control is loaded.

Any idea to share?

Is you scriptmanager inside the multiview? in this case I think it will not work for anyother view that does not have the scriptmanager since it's not sent to the browser.