Animation and datalist question

Home ›

ASP.NET Forums » ASP.NET AJAX » ASP.NET AJAX Control Toolkit » Animation and datalist question

Shortcuts

Previous Next

Animation and datalist question

Last post 04-03-2007 2:42 PM by Lalit Nookala. 15 replies.

Sort Posts:

Animation and datalist question

09-29-2006, 11:09 AM

Contact

229 point Member
Giorgio
Member since 01-09-2006, 4:43 PM
Posts 64

Hi,

I am new to the AJAX control toolkit and I need some help with an example please.

I am tying to add animation to a datalist control and my datalist is below.

What I would like to do is retrieve more information from a web service when the user click on the "Heading" <a> tag and use the animation on the toolkit web site http://ajax.asp.net/atlastoolkit/Animation/Animation.aspx for each record on the datalist and show more information for that specific record .i.e address, web site, email,etc... so when the user clicks on a record, an id would be passed to a web service that will return more information for that record and then I want to animate as in the toolkit example. Can someone help me please?

Thanks in advance.

<asp:DataList ID="DataList1" RepeatColumns="3" RepeatDirection="Horizontal" RepeatLayout="Table" ItemStyle-HorizontalAlign="Left" runat="server" Width="100%">
<ItemTemplate>
<asp:Label ID="lblInstitute" runat="server"><a ID="Heading" href="#" class="assAreaLnk" target="_blank" runat="server"><%# DataBinder.Eval(Container.DataItem, "Institute") %></a><br /></asp:Label>
<asp:Label ID="lblPhone" runat="server"><%#DataBinder.Eval(Container.DataItem, "Phone")%><br /></asp:Label>
</ItemTemplate>
</asp:DataList>

Re: Animation and datalist question

09-29-2006, 11:51 AM

Contact

40 point Member
dualc
Member since 02-17-2006, 8:28 PM
Posts 8

This is a cool idea.

I haven't tried it but in my mind it would work someting like this.

Add a linkbutton to your datalist item automatically during the ItemDataBound event (ie: click for more details)

The page containing your datalist would have a blank Animation extender.

<atlasToolkit:AnimationExtender ID="ae" runat="Server">

</atlasToolkit:AnimationExtender>

Then in the ItemDataBound event of your datalist, you could create a new AtlasControlToolkit.AnimationProperties

Set the targetcontrolid and the animations you desire.

Add the new AnimationProperties to the ae.TargetProperties list ( ae.TargetProperties.add(...)

Now you have the 'popup' portion done.

Onto the webservice... which is for another post..

If i have some time later today, i'll throw something together with northwind orders and order details...

Hope this gets you started at least. :)

Re: Animation and datalist question

09-29-2006, 12:00 PM

Contact

40 point Member
dualc
Member since 02-17-2006, 8:28 PM
Posts 8

Ok... i was wrong...Sorry about that...

You cannot add animations after the Init event. I was trying proof of concept...and received the following error...

At least it outlines exactly what to do, however there will be a 1:1 ratio of extenders to DataListItems...

Property items cannot be added to, removed from, or replaced in the collection after the Init event. To dynamically add extender properties, create a new extender and add the new properties to that extender and then add the extender to the page.

Re: Animation and datalist question

09-29-2006, 12:06 PM

Contact

229 point Member
Giorgio
Member since 01-09-2006, 4:43 PM
Posts 64

Thanks for trying to help.

Yes, it's a really cool idea but there aren't many data driven examples on how to use the ASP.NET AJAX Control toolkit so it makes things quite difficult!

Wow, that is going to be a lot of code isn't it? I mean if you have to create an extender for each datalist item...

Re: Animation and datalist question

09-29-2006, 12:13 PM

Contact

40 point Member
dualc
Member since 02-17-2006, 8:28 PM
Posts 8

It is going to be a fair amount; I'm sure it can be done...

If I get some time this afternoon, i'll try to get it working...

Re: Animation and datalist question

10-03-2006, 4:09 AM

Contact

229 point Member
Giorgio
Member since 01-09-2006, 4:43 PM
Posts 64

Can someone help me on this one please?
I haven't managed to find a way to do this!

Re: Animation and datalist question

10-03-2006, 4:09 AM

Contact

229 point Member
Giorgio
Member since 01-09-2006, 4:43 PM
Posts 64

I haven't managed to find a way to do this!

Has anybody found a way to do this?

Re: Animation and datalist question

10-03-2006, 2:36 PM

Contact

4,346 point Contributor
sburke_msft
Member since 04-04-2006, 7:28 PM
Redmond, WA
Posts 770

You'll probably need to put the AnimationExtender and the animation target into the ItemTemplate. The web service call back is more difficult since you'll need to trigger it. If you use HoverMenu, it's got this built in.

Don't forget, this posting is provided "AS IS" with no warranties, and confers no rights.

Re: Animation and datalist question

10-04-2006, 4:43 AM

Contact

229 point Member
Giorgio
Member since 01-09-2006, 4:43 PM
Posts 64

Hi,
Thanks a lot for your comment.
I tried several things but without a working example it's going to be really difficult for me to get this done so I would really appreciate some working example.
Thanks for trying to help.

Re: Animation and datalist question

10-05-2006, 7:00 PM

Contact

4,198 point Contributor
Ted Glaza [MSFT]
Member since 04-12-2006, 11:51 PM
Microsoft
Posts 847

Hi Giorgio,

Here's an example showing how to play an animation on the items of a DataList. It should help get you started.

<%@ Page Language="C#" %>
<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
    protected void OnItemDataBound(object sender, DataListItemEventArgs e)
    {
        DataListItem item = e.Item;
        Panel contact = item.FindControl("Contact") as Panel;
        AnimationExtender animations = item.FindControl("MyExtender") as AnimationExtender; 
        animations.TargetProperties[0].OnClick.Properties["AnimationTarget"] = contact.ClientID;
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Test Page</title>
    <style type="text/css">
        body
        {
            font-family: Verdana;
            font-size: 12px;
        }
        h3
        {
            font-size: 14px;
            margin: 0px;
        }
        .content
        {
            border: 1px solid #000000;
            background-color: #F0F0F0;
            padding: 10px;
            margin: 10px;
        }
    </style>
</head>
<body><form runat="server"><div>
    <atlas:ScriptManager runat="server" />
    
    <asp:XmlDataSource ID="data" runat="server">
        <Data>
            <Employees>
                <Employee Id="1" Name="Adam" Title="Tester" />
                <Employee Id="2" Name="Bob" Title="Developer" />
                <Employee Id="3" Name="Carol" Title="Program Manager" />
            </Employees>
        </Data>
    </asp:XmlDataSource>
    
    <asp:DataList runat="server" DataSourceID="data" OnItemDataBound="OnItemDataBound">
        <ItemTemplate>
            <asp:Panel ID="Contact" runat="server" CssClass="content">
                <h3>
                    <b><%# Eval("Id") %>.</b>
                    <asp:LinkButton ID="btnName" runat="server" OnClientClick="return false" Text='<%# Eval("Name") %>' />
                </h3>
                <%# Eval("Title") %><br />
            </asp:Panel>
            
            <atlasToolkit:AnimationExtender ID="MyExtender" runat="server">
                <atlasToolkit:AnimationProperties TargetControlID="btnName">
                    <Animations>
                        <OnClick>
                            <Sequence>
                                <Color Duration=".5" StartValue="#F0F0F0" EndValue="#FFEF3F" Property="style" PropertyKey="backgroundColor" />
                                <Color Duration=".5" StartValue="#FFEF3F" EndValue="#F0F0F0" Property="style" PropertyKey="backgroundColor" />
                            </Sequence>
                        </OnClick>
                    </Animations>
                </atlasToolkit:AnimationProperties>
            </atlasToolkit:AnimationExtender>
        </ItemTemplate>
    </asp:DataList>
    
</div></form></body>
</html>

Thanks,
Ted

This posting is provided "AS IS" with no warranties, and confers no rights.

Filed under: Animation

Re: Animation and datalist question

10-23-2006, 10:40 PM

Contact

45 point Member
gman341
Member since 12-02-2005, 4:10 PM
Posts 9

Ted, your example works in the CTP but i cannot get it to do much in the beta version, could you update this for the latest release please. I believe it has something to do with how the AnimationTarget is defined so i tried this but didn't have any luck, any ideas?

animations.OnClick.Properties["AnimationTarget"] = contact.ClientID;

Re: Animation and datalist question

10-24-2006, 3:51 AM

Contact

235 point Member
MrTea
Member since 03-03-2005, 3:30 PM
Posts 52

gman341:

animations.OnClick.Properties["AnimationTarget"] = contact.ClientID;

I think that code should work fine.

The problem I've found is that the AnimationExtender inside a Gridview (and I presume Datalist) is prone to misbehave, possibly due to the fact that you end up with a lot of AnimationExtenders (one per datalist/gridview item/row)

I found I could get it to work with the following code...

1     Protected Sub GridView1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles GridView1.RowDataBound
2    
3            Dim row As GridViewRow = e.Row
4            Dim panel As HtmlGenericControl = CType(row.FindControl("panel1"), HtmlGenericControl)
5    
6            If Not panel Is Nothing Then
7                Dim animation As AjaxControlToolkit.AnimationExtender = CType(row.FindControl("TryMe"), AjaxControlToolkit.AnimationExtender)
8    
9                animation.OnClick.Properties("AnimationTarget") = panel.ClientID
10   
11               Dim animClose As AjaxControlToolkit.AnimationExtender = CType(row.FindControl("ClosePopup"), AjaxControlToolkit.AnimationExtender)
12   
13               animClose.OnClick.Properties("AnimationTarget") = panel.ClientID
14               animClose.OnClick.Children(0).Properties("AnimationTarget") = row.FindControl("btnAnimate").ClientID
15   
16           End If
17   
18       End Sub

But then if I paged or sorted the Gridview it would mess up.

Re: Animation and datalist question

10-26-2006, 11:30 AM

Contact

10 point Member
glsiitians
Member since 10-26-2006, 3:21 PM
Posts 2

hey guys... your post is proving very helpful to me... atleast I got someone who is trying to use AnimationExtender within Datalist....

my prob is I have a pretty complex Datalist with EditItemTemplate... and there are more than 1 Update Panels , popup extenders. and now i want to have AnimationExtender

When in EditItemTemplate i keep following code

<cc1:AnimationExtender ID="tryme" runat="server">

<cc1:AnimationProperties TargetControlID="btnInfo">