Showing posts with label obvious. Show all posts
Showing posts with label obvious. Show all posts

Monday, March 26, 2012

Updating a Tree Control with Ajax

I'm new to Ajax so forgive me if this is an obvious question. I have a Tree control that's populated when a form loads. It has 4 levels of nodes. When one clicks on the lowest level (the leaves) then associated data populates controls to the right of the tree view.

There has to be the ability to delete a leaf. When this is done, might the Ajax update control be used to remove the leaf from the tree, yet keep the tree positioned in the same place?

An unrelated question: Is there an ASP.Net 2.0 web control that acts like a resizable panel similar to what's available with WinForms? This sort of thing exists on MSDN: http://msdn2.microsoft.com/en-us/library/ms229335.aspx (ie. the panel on the left)

Robert W.


Hi,rmdw

What you meant "keep the tree positioned in the same place"?

I'm sorry for that I cann't understand your question.Can you provide more information?


Suppose you had a tree that looked like this:

+ A

+ B

+ C


Now suppose you open up the "B" node to reveal this:

+ A

- B

- B1

- B2

- B3

+ C

Now suppose the user wants to delete leaf "B2". What I would like is for the tree to be redrawn (refreshed) with B2 gone but still showing the user the same portion of the tree. Obviously for such a small example it probably always will be shown but imagine there were 100 parent nodes and multiple levels.

Robert


Ha Ha, I see, you wanna keep the tree like this:

+ A

- B

- B1

- B3

+ C

after you deleted leaf "B2".

But it show you this:

+ A

+ B

+ C

because the updatepanel refreshed.

I advise you using webservice or webmathod to achieve it instead using updatepanel.

Sample:

Default.aspx:

<%@. Page Language="C#" %>

<!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 id="Head1" runat="server">
<title>Untitled Page</title>

<script type="text/javascript">
// This function calls the Web Service method.
function EchoUserInput()
{
var echoElem = document.getElementById("WhichLeafToDelete");
WebService.DeletedLeaf(echoElem.value,SucceededCallback);
}
// This is the callback function that processes the Web Service return value.
function SucceededCallback(result)
{
//Do something to change the html of the tree to delete the leaf.
}
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
<Services>
<asp:ServiceReference Path="WebService.asmx" />
</Services>
</asp:ScriptManager>
<div>
<h2>
Simple Web Service</h2>
<p>
Calling a simple service that echoes the user's input and returns the current server
time.</p>
<input id="WhichLeafToDelete" type="text" />
<input id="EchoButton" type="button" value="Echo" onclick="EchoUserInput()" />
</div>
</form>
<hr />
<div>
<span id="Results"></span>
</div>
</body>
</html>

WebService.asmx:

<%@. WebService Language="C#" Class="WebService" %>

using System;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Web.Script.Services;

[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[ScriptService]
public class WebService : System.Web.Services.WebService
{
[WebMethod]
public string DeletedLeaf (String input)
{
//Do something to delete the leaf in the database.
}
}

For more help, You can see thesetutorials:
http://ajax.asp.net/docs/tutorials/ExposingWebServicesToAJAXTutorial.aspx.
http://ajax.asp.net/docs/tutorials/ConsumingWebServicesWithAJAXTutorial.aspx

Let me know if you need more info.


Jin-Yu Yin:

I'm a bit confused. The actual display of the tree is a local matter, isn't it? As such, isn't it superfluous about whether to use a web service or code on the page?

What about the Ajax Update Panel wouldn't solve the problem I'm trying to solve?

Robert



Hi, Robert

If you don't need to do something at the server-side, e.g. deleting the leaf in the database, I mean that, If you just delete something at the client-side,you don't need to use a web service or code on the page, just use JavaScript to delete it. it's ok.

If you use an updatepanel to do this, it'll show you this:

+ A

+ B

+ C

because the updatepanel refreshed. It cann't remember what you had did before the postback

Wednesday, March 21, 2012

Use DynamicPopulateExtender on AccordionPane content

Hi Folks,

Warning: I'm quite new at AJAX so I may be missing something obvious.

I just want to defer population of some AccordionPane conent until the pane is actually clicked. I tried using a DynamicPopulateExtender, but I cant seem to hook up the PopulateTriggerControlID to an AccordianPane(no errors, just doesnt seem to fire). If I hook it up to the Accordian instead, it fires, but oddly enough only fires when clicking the content (any content, of any pane) but not clicking any header, which doesnt do me much good anyway.

See anything i'm missing here? Is there an easy way to do this?

Thanks much in advance, code follows.

Greg

<%@dotnet.itags.org. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test dynamic accordian content</title>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
<div>
<ajaxToolkit:Accordion ID="Accordion1" runat="server" SelectedIndex="0" SuppressHeaderPostbacks="True" >
<Panes>

<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>header1</Header>
<Content>content1</Content>
</ajaxToolkit:AccordionPane>

<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>header2 </Header>
<Content>
<asp:Panel ID="Panel2" runat="server" Height="50px" Width="100%">static content</asp:Panel>
<ajaxToolkit:DynamicPopulateExtender ID="dp2" runat="server" TargetControlID="Panel2" ServiceMethod="GetHTML" PopulateTriggerControlID="AccordionPane2" />
</Content>
</ajaxToolkit:AccordionPane>

</Panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>
<script runat="server">
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static string GetHTML(string contextKey)
{
return "some dynamic content"+contextKey;
}
</script>

Hi Greg,

The problem is caused by not specifying correct id. I changed your code a little bit, and place a span element with a specified id in the header. Then use it as the trigger.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Test dynamic accordian content</title>
</head>
<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
<div>
<ajaxToolkit:Accordion ID="Accordion1" runat="server" SelectedIndex="0" SuppressHeaderPostbacks="True" >
<Panes
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Header>header1</Header>
<Content>content1</Content>
</ajaxToolkit:AccordionPane
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Header>
<span id="hd2">Header2</span>
</Header>
<Content>
<asp:Panel ID="Panel2" runat="server" Height="50px" Width="100%">static content</asp:Panel>
<ajaxToolkit:DynamicPopulateExtender ID="dp2" runat="server" TargetControlID="Panel2" ServiceMethod="GetHTML" PopulateTriggerControlID="hd2" />
</Content>
</ajaxToolkit:AccordionPane
</Panes>
</ajaxToolkit:Accordion>
</div>
</form>
</body>
</html>
<script runat="server">
[System.Web.Services.WebMethod]
[System.Web.Script.Services.ScriptMethod]
public static string GetHTML(string contextKey)
{
return "some dynamic content" + DateTime.Now.ToString() + contextKey;
}

</script>


Thanks Ramond! You da man!!

Greg