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

TreeView Navigation and the Update Control

I am using Master pages, of which I have my Treeview that is used for navigation with a site map, and I have a child page with the FreeTextBox 3.1x on it that is being submitted with a LinkButton. I have all of this wrapped in a Update Panel with an asynchronous trigger on the LinkButton. Here's my problem: I can navigate to other pages using my TreeView navigation just fine if I do not click the LinkButton. If I do, it throws up a JavaScript error saying that Access is Denied. Any ideas?

The Current version des not support TreeView to host in the UpdatePanel. You will ge the complete list of the controls which does not support in update panel in the following link:
http://www.asp.net/AJAX/Documentation/Live/overview/UpdatePanelOverview.aspx Check the Controls that are not compatible section.

Trigger DynamicPopulate on page load

I currently have a page that takes a very long time to load. What I want is for the page to load up content-less (just the master page), and then have a UpdatePanel load the actual content dynamically instead of having a 3/4 second load time.

I've tried hiding the UpdatePanel and using a DynamicPopulate extender to set the UpdatePanel to visible, but I can't find a way to trigger the DynamicPopulate extender after the page load.

Has anyone got any ideas how I can do this?

Thanks,
Weiran.

weiranz:

What I want is for the page to load up content-less (just the master page), and then have a UpdatePanel load the actual content dynamically instead of having a 3/4 second load time.

We recently published two videos that address this very question.

How Do I: Implement the AJAX Incremental Page Display Pattern?

How Do I: Implement the Incremental Page Display Pattern using HTTP GET and POST?

Each video provides sample code in C# and Visual Basic. So you should be able to watch the videos, download the code, and achieve your goal of having the page dynamically load content.

I do have a followup questions on these examples:

Both examples use either a web service or a get/post to retrieve plain html which is filled into a div section. So the content is, even though dynamically populated, static. How would I trigger a dynamic populate of an update panel on page load? My scenario is the following:

I have a page that contains a search box with a button and a GridView in an UpdatePanel. The typical usage is that the user enters something in the textbox and clicks search, then the query will be executed and the updatepanel refreshed with the filled GridView, showing a progress indicator while working. This works very well...
Now I want to link to this particular page and pass in a search term via the querystring. Easy enough, in OnPageLoad I pickup the term(s) from the query string, execute the query and directly show the page with the filled GridView. This works, but may be bad if the query takes along time, the page will not show until the result is available. What I would like to do is to show the page and on page load doing a postback with the parameters passed in from the querystring.

Is there an easy way to kick off such a pseudo postback that does not trigger a full postback on page load?

Trigger for Update Panel with Multiple Content Sections on Master Page

Can I use an UpdatePanel in one Content section on a content page with a trigger in another Content section of the same content page?

I have a master page with multiple ContentPlaceHolders which I am using as the template for various pages with a search section and a results section. The search section is contained in one ContentPlaceHolder and the results is contained in another. The content page search section contains an ASP.NET button control (id="btnSubmit") and the content page results section contains an Atlas UpdatePanel containing a Trigger which I would like to tie to btnSubmit. I have tried declaratively to make btnSubmit the trigger, as well as programmatically. When the page loads, I get a "ControlID of trigger must reference valid control" error either way. I have tried substituting btnSubmit.ClientID.ToString inside the trigger definition and this does not work either.

I have another master page/content page combination where both the trigger and the update panel are in the same ContentPlaceHolder/Content section, and I have no problem getting Atlas to work. I am using the April CTP of Atlas.I made a similiar post... I hope I will get a replyhttp://forums.asp.net/1450493/ShowThread.aspx#1450493 from here

Trigger Update Panel from button on different ContentPanel

I have a master page with two contet panels: cntSearch and cntBody. The cntSearch panel has a search form and a button (btnSubmit), the cntBody panel, among other things, has an Update Panel which contains a gridview (grdMain). I am trying to set up a trigger between the submit button in the cntSearch panel and the gridview in the cntBody. Visual Studio 2005 IDE allows me to pick btnSubmit and its Click() event from the list of possible controls when I go and add a Trigger to the Update Panel. However, when I try to load the page I get an error indicating that "A control with ID "btnSubmit" could not be found for the trigger in UpdatePanel..."

When I move the button from the cntSearch Content Panel inside the cntBody Content Panel, the page loads fine. Is there a special way I need to reference the button's ID in the Trigger section of the Update Panel so that it can find it?

Thanks,

Jaime

Here is a simplified version of my code:

<%

@.PageLanguage="VB"MasterPageFile="~/Master.master"AutoEventWireup="false"CodeFile="test.aspx.vb"Inherits="test"title="Untitled Page" %>

<

asp:ContentID="ctSearch"ContentPlaceHolderID="cphSearch"Runat="Server"><asp:ButtonID="btnSearch"runat="server"Text="Search"/>

</

asp:Content>

<

asp:ContentID="ctBody"ContentPlaceHolderID="cphBody"Runat="Server"><asp:UpdatePanelid="upMain"runat="server"><contenttemplate><asp:GridViewid="grdGrid"runat="server"></asp:GridView></contenttemplate><triggers><asp:AsyncPostBackTriggerControlID="btnSearch"EventName="Click"></asp:AsyncPostBackTrigger></triggers></asp:UpdatePanel>

</

asp:Content>

Thanks,

Jaime

This is from my another post:

I have solved my problem by doing the following..

Iwrapped my 2 content areas in the master page in a update panel.Basically I put the content panes inside an update panel in the masterpage. Now on my other page, if I click on a button in one content area,both the contents get updated without the page being refreshed.

Thanks

Thanks for the reply marathi. I tried your suggesting and it did not work, I am still getting the error indicating that the submit button can not be found.

Jaime

Can you post your source here. I shall look into it, it works fine for me.

Thanks to marathi for putting me on the right track since no final post was here I thought I would add my derived solution. Basically if you place the UpdatePanel control in the master page and aroundboth content panels you can still place the Trigger in the child page where the triggering control is defined. My own use was to have a calendar in the first content section change the content in the second content frame (a custom control) and it works great.

In your master page: 

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:ContentPlaceHolder ID="cntSearch" runat="server"></asp:ContentPlaceHolder><asp:ContentPlaceHolder ID="cntBody" runat="server"></asp:ContentPlaceHolder> </ContentTemplate></asp:UpdatePanel>

 In your child page:

  
<asp:Content ID="cntSearchContent" ContentPlaceHolderID="cntSearch" runat="server"><asp:TextBox runat="server" ID="SearchText"></asp:TextBox> <asp:Button ID="SearchButton" runat="server" Text="Search" /></asp:Content><asp:Content ID="cntBodyContent" ContentPlaceHolderID="cntBody" runat="server"> <asp:GridView ID="GridView1" runat="server"></asp:GridView><Triggers><asp:AsyncPostBackTrigger ControlID="SearchButton" EventName="Click" /></Triggers> </asp:Content>
 

Triggering un UpdatePanel update event from TreeView

Hi!

I have a master page with a TreeView, which is filled from a SiteMapDataSource. I have added an UpdatePanel, inside which i have placed a ContentPlaceholder. I have created an AsyncPostBackTrigger which looks like this:

<asp:AsyncPostBackTrigger ControlID="NavigationTreeView" EventName="SelectedNodeChanged" /
The problem is that the postback is still executed everytime i click on a node,making the UpdatePanel useless.

I have tried disabling treeview postbacks, by changing the Node.Text to <span onclick='return false;'>" + tempNodeLabel + "</span>";
But in this case, the SelectedNodeChanged event does not happen.

What i want in a nutshell is to make the content of a page update without fully reloading the page,while using TreeView as a trigger.

I have heard that TreeView doesn't support partial page updates.

Can anyone suggest how can i make treeview support it or how to disable postbacks while leaving SelectedNodeChanged event,or how can i achieve the desired result in any other manner?

Can anyone help please?

I'm using the treeview triggering/updating other updatepanels this way:

1. The treeview is in an updatepanel and there is the same asyncpostbacktrigger as your inthat updatepanel.

2. I handle theSelectedNodeChanged event in code behind, and update the necessary updatepanels with theupdate( ) method.

Step 1. is not supported officially.

The treeview "may works" inside the up, but very buggy and has strange/unexpected behavior, prepare for some surprise...

Thank you for an advice

But i'm a bit confused. The SelectedNodeChanged event happens only if the navigateurl property of a node is blank. In this case, how do i pass the URL which has to be shown to the UpdatePanel?

Ok, i've placed the TreeView inside an UpdatePanel and postbacks don't happen as long as the navigateurl property is blank. The only thing i don't get is how to let the UpdatePanel know about the url's it has to show.

Each treenodebinding has a valuefield property (This value is not displayed to the user it's hidden on the page.).

If you set it then you can retrive the value in the code-behind:

YourTreeView.SelectedNode.Value --> the selected node value property.

YourTreeView.SelectedNode.ValuePath --> each node value separated by the treeview PathSeparator from the root to the selected node.

Thank you

I have thought about this. But what i really don't understand is how to tell the updatepanel, which hosts the ContentPlaceHolder what to load.

On the SelectedNodeChanged event, i get the url from the Value field, and then what? To whom should i pass that url?

Sorry, but you cannot use up that way. The up won't load a content from an url (from a different aspx) page.

You may have tried this already and are looking for an alternate way, but this is surely a case for an iframe..

Add an iframe to the page ( don't see why you can't place this inside your updatepanel) and set the selected url to the 'src' attribute of the iframe. This will then load the target content into the iframe, and the update panel should allow you to control the partial postback (not sure if you will need it as the postback from the iframe will be containted within it's own page).

Thank you both for the help

My boss has told me today that what i'm trying to do is a wrong way to use AJAX, so i guess that this issue is resolved. The idea with an iframe is good though

Hi,

Here 's what I do:

1. The "leaf" nodes are calling javascript function that updates a HiddenField.

2. The Grid is inside a UpdatePanel and has a Trigger on the HiddenField ValueChanged event.

To activate the HiddenField trigger, I call _doPostBack('hiddenfield_name', ''); at the end of the javascript function...

Hope it helps,

Michel

Hi,

Hmm..i'm not too good at javascript. If i get it right, what you are suggesting is a way to update a gridview e.g. make it show another category. I have managed to do that but with datalist in my case. I just put an index of a category inside the Value field of a treenode, and leave the navigateurl blank. On page_load event i check which node is selected and if something is selected a read it's Value field and then call a function which retrieves content from the database, depending on the fetched index.

What i was trying to do was to load a completely different page with another set of controls via UpdatePanel. But as far as i understood you can't do that (well maybe if you use an iframe you can)

Then maybe the "update panel" is not ideal to load a different page.

If the tree is in a "master page", you could use a simple hyperlink to load a different "content page"...

Sorry, I got mixed-up by the thread subject.

Trouble trying to use PostbackTrigger with FileUpload in UpdatePanel

Scenario: I have 2 UpdatePanels, 1 containing a GridView (master) and the other containing a DetailsView (child). The DetailsView has an AsyncPostBackTrigger for the GridView's SelectedIndexChanged event. I use a CommandField with ShowEditButton in the DetailsView. The DetailsView is in Edit mode by default. One of the fields in the DetailsView contains a FileUpload. In the ItemCreated event, I register the auto generated "Update" LinkButton as a PostBackControl. I have also tried adding a PostBackTrigger to the UpdatePanel, but neither attempt results in the FileUpload.HasFile property being true.

1Protected Sub dv_ItemCreated(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles dv.ItemCreated2Dim linkAs LinkButton =Nothing3 Dim triggerAs PostBackTrigger =Nothing4 If Not dv.FooterRowIs Nothing Then5 Dim commandRowIndexAs Integer = 06Dim commandRowAs DetailsViewRow = dv.Rows(commandRowIndex)7Dim cellAs DataControlFieldCell =CType(commandRow.Controls(0), DataControlFieldCell)8For Each ctlAs ControlIn cell.Controls9If TypeOf ctlIs LinkButtonThen10 link =CType(ctl, LinkButton)11Else : link =Nothing12 End If13 If Not linkIs Nothing Then14 If link.CommandName.Equals("update", StringComparison.CurrentCultureIgnoreCase)Then15'trigger = New PostBackTrigger16 'trigger.ControlID = link.ClientID17 'upDV.Triggers.Add(trigger)18 ScriptManager.GetCurrent(Me).RegisterPostBackControl(CType(link, Control))19End If20 End If21 Next22 End If23 End Sub

The page does do a full postback when the Update button is hit, so at least that works. I'm assuming that HasFile is false for the first Update because the Update button is not registered with the ScriptManager when the page is loaded. After an update, page is loaded with the control registered as a PostBackControl, thus making subsequent updates work fine. Assuming that this is correct, is there anyway to do this? My reasoning in this assumption is that if I select a row in the GridView by default such that when the DetailsView is first loaded into the page, it has a record as opposed to the EmptyDataText being shown, everything works as expected. Is there a way to use this functionality without having a record in DetailsView before the user actually selects a record?

Kind of funny that this works at all. The PostBackTrigger is supposedly not capable of being added programatically based onthe docs.

Ryan Pedersen
MCP

According to the documentation for AJAX the FileUpload control is not supported.

There are several work around available on this forum.