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 & UpdatePanel - Assertion failed - cant find last / in base url

Hi,

I am using a TreeView and couple of server controls. The treeview children are dynamically added on click of a node. I have the treeview control inside an update panel. Everything works if I access the page in a normal IE window. When I try to access the same page through a modal dialog, during postback, it opens a new window. To avoid that, I've added<base target = "_self" />.

Now I'm getting another error with Atlas. On click of tree node, it says "Assertion Failed : Can't find last / in base url. If I remove the <base..> it doesn't work.

Looking for an immediate solution. I've spent almost a day in googling. But no luck yet.

Many Thanks,
Mani.

hello.

you can also try using an iframe inside your popup page (ie, put only an iframe inside your popoup window which loads the page that shows the content)...maybe it'll solve that problem.

Mani,

Add:<basetarget="_self"href="http://localhost/***/***/"runat="server"/>

because our dear js function check if u have base tag , then try to concat with href value. in your case you don't have it.

T.

what if i'm using a Master Page - i can't hard code a path in the href. Is there any way to accomplish this? Plus - even if i hard code, the paging on my grid view does not work now.

trans642:

Mani,

Add:<basetarget="_self"href="http://localhost/***/***/"runat="server"/>

because our dear js function check if u have base tag , then try to concat with href value. in your case you don't have it.

T.

GOOD THANKS !

trans642:

Mani,

Add:<basetarget="_self"href="http://localhost/***/***/"runat="server"/>

because our dear js function check if u have base tag , then try to concat with href value. in your case you don't have it.

T.

GOOD THANKS !

Try this, without hard code url

 <base target="_self" href="<%=Request.Url.OriginalString%>" />

works perfect ... Thanks.

Treeview inside an Accordion control issue

Hello all

I am having a problem with dynamically loading treenodes with treeview control inside an accordion control. I am gettting "object Reference not set" when adding a treenode to the treeview using the following code:

treeview.Nodes.Add(treenode)

If I pull the treeview out of the accordion control the same code works as expected.

Here is the code inside aspx:

<AjaxControlToolkit:Accordion

ID="accNavigation"

runat="server"

Width="250px"

FramesPerSecond="40"

TransitionDuration="250"

AutoSize="Fill"

SelectedIndex="0"

CssClass=""

HeaderCssClass="accordionHeader"

HeaderSelectedCssClass="accordionHeaderSelected"

ContentCssClass="accordionContent">

<Panes>

<AjaxControlToolkit:AccordionPane

ID="apMyEvaluations"

runat="server">

<Header>

<ahref=""onclick="return false;">My Evaluations</a>

</Header>

<Content>

<asp:TreeView

ID="tvMyEvaluations"

runat="server"

NodeIndent="18"

NodeStyle-HorizontalPadding="5"

SelectedNodeStyle-BackColor="navy"

SelectedNodeStyle-ForeColor="white"

ShowLines="true">

</asp:TreeView>

</Content>

</AjaxControlToolkit:AccordionPane>

<AjaxControlToolkit:AccordionPane

ID="AccordionPane2"

runat="server">

<Header>

<ahref=""onclick="return false;">Manager Listing</a>

</Header>

<Content>

<asp:TreeView

ID="tvManagerListing"

runat="server"

NodeIndent="0"

NodeStyle-HorizontalPadding="5"

SelectedNodeStyle-BackColor="navy"

SelectedNodeStyle-ForeColor="white"

ShowLines="true">

<Nodes>

<asp:TreeNodeText="Manager Listing"Value="L">

<asp:TreeNodeText="ASP .Net"Value="ASP"ImageUrl="Images/24_Manager.ico"></asp:TreeNode>

<asp:TreeNodeText="Visual Basic"Value="VB"ImageUrl="Images/24_Manager.ico"></asp:TreeNode>

</asp:TreeNode>

</Nodes>

</asp:TreeView>

</Content>

</AjaxControlToolkit:AccordionPane>

</Panes>

</AjaxControlToolkit:Accordion>

Below is the code used to build the tree nodes:

'TreeNode Declarations

Dim tnMyEvaluationsRootAs TreeNode

Dim tnPrimaryAs TreeNode

Dim tnSecondaryAs TreeNode

'Using the tree view for My Evaluations, populate tree nodes

WithMe.tvMyEvaluations

'Instaniate a new parent node

tnPrimary =New TreeNode("Primary","PRIMARY","~/Images/16_Copy.ico")

'Add primary evaluation

tnPrimary.ChildNodes.Add(New TreeNode("Employee, Some 1","1","~/Images/16_User.ico"))

tnPrimary.ChildNodes.Add(New TreeNode("Employee, Some 2","2","~/Images/16_User.ico"))

tnPrimary.ChildNodes.Add(New TreeNode("Employee, Some 3","3","~/Images/16_User.ico"))

tnPrimary.ChildNodes.Add(New TreeNode("Employee, Some 4","4","~/Images/16_User.ico"))

tnPrimary.ChildNodes.Add(New TreeNode("Employee, Some 5","5","~/Images/16_User.ico"))

tnPrimary.ChildNodes.Add(New TreeNode("Employee, Some 6","6","~/Images/16_User.ico"))

tnPrimary.ChildNodes.Add(New TreeNode("Employee, Some 7","7","~/Images/16_User.ico"))

tnPrimary.ChildNodes.Add(New TreeNode("Employee, Some 8","8","~/Images/16_User.ico"))

tnPrimary.ChildNodes.Add(New TreeNode("Employee, Some 9","9","~/Images/16_User.ico"))

tnPrimary.ChildNodes.Add(New TreeNode("Employee, Some 10","10","~/Images/16_User.ico"))

tnPrimary.ChildNodes.Add(New TreeNode("Employee, Some 11","11","~/Images/16_User.ico"))

'Instaniate a new parent node

tnMyEvaluationsRoot =New TreeNode("My Evaluations","MY_ROOT","~/Images/16_Copy.ico")

'Add primary evaluations to root node

tnMyEvaluationsRoot.ChildNodes.Add(tnPrimary)

'Add node to My Evaluations tree view

.Nodes.Add(tnMyEvaluationsRoot)

EndWith

Any help would be greatly appreciated.

Tom

Hi Tom,

I can't find the line "treeview.Nodes.Add(treenode)" in your code snippet.

According to your description, it seems treeview object is null. And such problem is usually caused by use FindControl to get reference to treeview object, you get null reference when the method fails. Please make sure the method is invoked on the right parent control.

If this doesn't help, please post relevant code.

Also, the treeview doesn't work well with most ajax things, including updatepanel (which could also be the source of your problem)..

A nice workaround is to use the treeview inside an iframe (just hide the frameborder and remove margins of the frame and noone will never know.. ;o) ).

trigger for control that is dynamically created on databind

I have a dropdownlist that is created when the gridview is databound. This is because the dropdownlist is contained in the headertemplate of a templatefield column. So I have tried to add the trigger dynamically right after the gridview is databound, but I keep getting an error saying that the controlID wasn't found...I don't know what is wrong. I can find the control inside the the gridview with no problem using the findControl fuction.

 TimeStampGridView.DataBind();
 DropDownList StatusFilterDLL=(DropDownList)TimeStampGridView.HeaderRow.Cells[2].FindControl("StatusFilter");//finds the Control
 StatusFilterDLL.SelectedIndex = StatusFilterDLL.Items.IndexOf(StatusFilterDLL.Items.FindByText(StatusFilter));//Works fine
 AsyncPostBackTrigger trigger =new AsyncPostBackTrigger();
 trigger.ControlID ="StatusFilter";
 trigger.EventName ="SelectedIndexChanged";
 GridUpdatePanel.Triggers.Add(trigger);//error:A control with ID 'StatusFilter' could not be found for the trigger in UpdatePanel 'GridUpdatePanel'

Anyone know what I'm doing wrong here?

Thanks for the help in advance!

I removed all the code for the dynamic trigger and set the dropdownlist's autopostback= true so now when the user changes the selectedindex the gridview is updated

Triggering Dynamic Controls

Hi,

I got several Textboxes which are being created dynamically.

private TextBox CreateTextBoxes(int i)
{
TextBox tb = new TextBox();
tb.Width = 30;
tb.Height = 20;
tb.CssClass = "inputfield";
tb.ID = "TextBoxID" + i.ToString();
tb.Text = i.ToString();

Microsoft.Web.UI.ControlEventTrigger trig = new Microsoft.Web.UI.ControlEventTrigger();
trig.ControlID = this.FindControl(tb.ID.ToString()).ToString();
trig.EventName = "CheckChanged";
UpdatePanel1.Triggers.Add(trig);

return tb;
}

Throws an Error at FindControl:Object reference not set to an instance of an object.

When I don't use FindControl it compiles but the Event is never triggered. The dynamic Controls are wrapped in a static UpdatePanel1 via the designer.

Is that possible at all with Atlas yet?

The problem with this code is that you never added the dynamically created text box to any control collections. FindControl() works by traversing the controls collections, and control are only rendered (unless you call RenderControl() yourself) if they appear somewhere in the control collection tree for a page.

Actually, you have no reason in the code segment above to call FindControl(), because you have the class instance local to that scope. You would only use FindControl() to retrieve a control instance where you have no local variable assigned or had no way to retrieve the instance using other means.

The reason you never see the trigger is because the control you created in the code was never attached to anything that would have ended up visible on the client. If you added the control to the collection for after this code segment, you have no guarantee that the actual control ID generated once the page is rendered would be the same as you assume in this code, since control ID's actual values depend on their placement within the naming container "tree" starting from the page down.

My suggestion would be to never do anything that assumes a consistent control ID (and UpdatePanels depend on this for handling a variety of things on the client side) with a dynamic control until you have added it to a control collection that is attached to a page already. Then all the things that need to be wired to make your triggers (or commands or events) work will work.

The textbox method is called in a foreach loop, mostly about 4-6 textboxes are being created.

Is this maybe possible with the new Dynamic UpdatePanel featured in the new Atlas build?
The new UpdatePanel in the June CTP certainly does change the dynamics of the problem you described.

Triggering Update Panel from Dynamically Built Triggers

I have a page which has two content areas (Left, Center). The Left hand content contains two repeaters, both of which have an imagebutton who's itemcommand triggers an update of the content in the Center area. The Center Area has an update panel in it. The triggers are dynamically generated because the repeaters are in panels, and I needed to use the findcontrol() command to get access to them.

Code works great on my laptop (localhost), gives an error when I move it to the server. Error is:

Sys.WebForms.PageRequestManagerServerErrorException: An unknown error occurred while processing this request on the server. The status code returned from the server was: 500.

Here's my UpdatePanel:

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:Repeater ID="rMain" DataSourceID="srcMain" OnItemCommand="rmain_itemCommand" runat="server"> <ItemTemplate> <asp:Label ID="lblTitle" Text='<%#Eval("Description")%>' runat="server" CssClass="verorangeHeader" /><asp:Label ID="ProductID" runat="server" Text='<%# Eval("idProduct") %>' Visible="false"></asp:Label><asp:Label ID="lblSKU" runat="server" Text='<%# Eval("Sku") %>' Visible="False" /><br /><br /> <table border="0" cellpadding="1" cellspacing="1"> <tr> <td > <asp:Label ID="lblDetails" Text='<%#Eval("Details")%>' runat="server" CssClass="ver11bluebold" /> </td> <td ><img src='<%# formatPhoto(Eval("ImageURL")) %>' /></td> </tr> <tr> <td colspan="2" align="right" valign="top">Priced from: <asp:Label ID="lblPrice" Text='<%# formatPrice(Eval("Price")) %>' runat="server" CssClass="verorange" />   <asp:ImageButton ID="btnSpecifications" ImageURL="images/btn_specifications.gif" runat="server" /><asp:ImageButton ID="btnPhotoGallery" ImageURL="images/btn_photo-gallery.gif" runat="server" /><asp:ImageButton ID="btnBuyNow" ImageURL="images/buy-bm-clear.gif" runat="server" CommandName="Update" /></td> </tr> </table></ItemTemplate></asp:Repeater></ContentTemplate></asp:UpdatePanel>

Here's the code that creates the triggers:

Private Sub Page_Init(ByVal senderAs Object,ByVal eAs EventArgs)Handles MyBase.Init'Add TriggersDim ap1As AsyncPostBackTrigger =New AsyncPostBackTrigger()Dim ap2As AsyncPostBackTrigger =New AsyncPostBackTrigger() ap1.ControlID = pnlProduct1.FindControl("rY5").UniqueID ap1.EventName ="ItemCommand" ap2.ControlID = pnlProduct2.FindControl("r52").UniqueID ap2.EventName ="ItemCommand" UpdatePanel1.Triggers.Add(ap1) UpdatePanel1.Triggers.Add(ap2)End Sub

Any suggestions?

Jennifer

Take a look at this post...http://forums.asp.net/p/1139950/1831145.aspx

-Damien

Got it fixed. It was actually related to a bug in my Master Page!

Thanks for the help!

Jennifer

To fix this problem, you can add the follow code in your web.config

<system.web>
<pages validateRequest="false">
</system.web>.

Trying to Dynamically Populate a Tab

Good Afternoon. Please forgive me for my lack of knowledge on AJAX. I am learning this because my work asked me to and I am trying work with the the TAB Control.

I have a database table that has a category field and a question field. I am able to popuplate the name of the tab when I select a disctinct category, but when I try to add something for the Content Template I receive an error. My final goal is for someone to choose one of the tabs (based off of my categories) and display a list of questions. All coming from a database table. Please look at this image and let me know what I am doing wrong.

Thanks in advance

You cannot use ContentTemplate like that. ContentTemplate is the set of controls to display under the tab (body), not the label of the tab itself.

.HeaderText = "Jason" would put the text Jason in the tab.

I have already got the label name populated with the distinct cateogry. I am trying to figure out how to populate the body of each label with the appropriate questions from the database. I just put "jason" in to see if I would get the same error and I did.

In my while loop I generate the headertext of the label with CategoryNames("Category") When I try to populate the ContentTemplate with ("jason") or I try to make a call to the database to get all the questions that are associated to the category name, I get that error that I posted.

I hope I am making sense.

Thanks

This is an example of how to populate a tab dynamically. I must accept this is not very intuitive nor there is documentation about this.

==========================

Default.aspx

==========================

<%

@.PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.1//EN""http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headrunat="server"><title>Untitled Page</title>

</

head>

<

body><formid="form1"runat="server"><asp:ScriptManagerID="ScriptManager1"runat="server"/><div><ajaxToolkit:TabContainerID="TabContainer1"runat="server"></ajaxToolkit:TabContainer> </div></form>

</

body>

</

html>

============================

Default.aspx.cs

===========================

using

System;

using

System.Data;

using

System.Configuration;

using

System.Web;

using

System.Web.Security;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

System.Web.UI.WebControls.WebParts;

using

System.Web.UI.HtmlControls;

public

partialclass_Default : System.Web.UI.Page

{

protectedvoid Page_Load(object sender,EventArgs e)

{

if (!this.IsPostBack)

{

int n = 3;while (n > 0)

{

AjaxControlToolkit.

TabPanel oTabPanel =new AjaxControlToolkit.TabPanel();

TabContainer1.Tabs.Add(oTabPanel);

oTabPanel.ContentTemplate = Page.LoadTemplate(

this.TemplateSourceDirectory +"\\WebUserControl.ascx");WebControl oWB =newWebControl(HtmlTextWriterTag.Div);

oTabPanel.ContentTemplate.InstantiateIn(oWB);

oTabPanel.HeaderText =

"Test" + n.ToString();

oTabPanel.SetRenderMethodDelegate(RenderA);

n--;

}

}

}

privatevoid RenderA(HtmlTextWriter output,Control container)

{

output.WriteLine((

"Position ") + ((AjaxControlToolkit.TabPanel)container).HeaderText);

}

}

=====================================

WebUserControl.ascx

=====================================

<%

@.ControlLanguage="C#"AutoEventWireup="true"CodeFile="WebUserControl.ascx.cs"Inherits="WebUserControl" %>

<

ajaxToolkit:TabPanelID="TabPanel1"runat="server">

<

ContentTemplate></ContentTemplate>

<

HeaderTemplate></HeaderTemplate>

</

ajaxToolkit:TabPanel>

=====================================

WebUserControl.ascx.cs

=====================================

using

System;

using

System.Data;

using

System.Configuration;

using

System.Collections;

using

System.Web;

using

System.Web.Security;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

System.Web.UI.WebControls.WebParts;

using

System.Web.UI.HtmlControls;

public

partialclassWebUserControl : System.Web.UI.UserControl

{

protectedvoid Page_Load(object sender,EventArgs e)

{

}

}

Thank you, This is going to sound bad, but I don't know C# so I will need to transfer this to VB.

Thanks Again, I will try first thing monday morning.

I've been trying to use this method but there seems to be some code missing -

In oTabPanel.SetRenderMethodDelegate(RenderA) what should be passed to RenderA?

Thanks