I have a web page where I search some information.
I tried to AJAX enable the page to avoid postbacks.
I tried to use 3 UpdatePanels: updateSearch, updateList and updateDetail.

In updateSearch I use several controls to decide what to search.
Some of the DropDownLists will have dynamic content based on other 
DropDownLists, thats why I need to enclose this in one UpdatePanel.

In updateList I list the main result in a user control. It basically holds a 
repeater where one column has a LinkButton. The LinkButton triggers a custom 
Event named TextID_Clicked. The repeater is put in a DIV tag with "overflow: 
auto" to ensure a long result is scrolled.

The last panel is updateList where I display the detailed information of the 
clicked Text record in a second user control. The reason I put these controls 
in one UpdatePanel each is that I would like the left record list NOT to 
scroll when I click a record to display the details.

Everything works excellent except that the record list will move to the top 
every time a record is clicked, which means the clicked record might 
disappear out of sight. In my understanding AJAX should not allow this list 
to be updated. 

Did I misunderstand something? Should the panels be nested?
Is there a possible workaround to get the wished "freezing" of the list when 
it is clicked?

Note: I have put breakpoints to ensure the list is not regenerated from 
code. It is not. It looks more like a browser problem.

Code included below. All formatting is deleted to make it easier to read.


<asp:UpdatePanel ID="updateSearch" runat="server">
    <ContentTemplate>
        <asp:DropDownList ID="cboSystem" runat="server" AutoPostBack="True" />
        <asp:DropDownList ID="cboTextType" runat="server" 
AutoPostBack="True" />
        <asp:DropDownList ID="cboAttribute" runat="server" />
        <asp:Button ID="btnSearch" runat="server" Text="Search" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="cboSystem" 
EventName="SelectedIndexChanged" />
        <asp:AsyncPostBackTrigger ControlID="cboTextType" 
EventName="SelectedIndexChanged" />
    </Triggers>
</asp:UpdatePanel>


<asp:UpdatePanel ID="updateList" runat="server">
    <ContentTemplate>
        <uc1:ucTextList ID="myTextList" Visible="false" runat="server" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>


<asp:UpdatePanel ID="updateDetail" runat="server">
    <ContentTemplate>
        <uc2:ucTextDetail ID="myTextDetail" Visible="false" runat="server" />
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="myTextList" 
EventName="TextID_Clicked" />
    </Triggers>
</asp:UpdatePanel>

Hi,

I'm not very clear about your following statement:


> Everything works excellent except that the record list will move to the 

top 
every time a record is clicked, which means the clicked record might 
disappear out of sight. 


Do you mean that when one of the LinkButtons is clicked, all the list is 
refreshed too?


I think you may need to turn off "ChildrenAsTriggers". I've created a 
simple test project to do similar things you required.


uctextlist.ascx:
==========

<%@ Control Language="C#" ClassName="uctextlist" %>

<script runat="server">
    
    public event EventHandler TextID_Clicked;

    protected void  Page_Load(object sender, EventArgs e)
    {
        repeater1.DataSource = GetDataSource();
        repeater1.DataBind();
    }

    System.Data.DataTable GetDataSource()
    {
        System.Data.DataTable dt = new System.Data.DataTable();
        dt.Columns.Add("ID");
        dt.Rows.Add("Code 1");
        dt.Rows.Add("Code 2");
        return dt;
    }

    protected void LinkButton_Clicked(object sender, EventArgs e)
    {
        if (TextID_Clicked != null)
        {
            TextID_Clicked(sender, e);
        }
    }
    
</script>

<asp:Repeater ID="repeater1" runat="server">
    <HeaderTemplate><ul></HeaderTemplate>
    <ItemTemplate>
        <li><asp:LinkButton ID="link1" runat="server" Text=<%# Eval("ID") 
%> OnClick="LinkButton_Clicked"></asp:LinkButton></li>
    </ItemTemplate>
    <FooterTemplate></ul></FooterTemplate>
</asp:Repeater>


uctextdetail.ascx:
============

<%@ Control Language="C#" ClassName="uctextdetail" %>

<script runat="server">
    public String TextBox1Text
    {
        get
        {
            return TextBox1.Text;
        }
        set
        {
            TextBox1.Text = value;
        }
    }
</script>

<asp:Label ID="Label1" runat="server" Text="Detail:"></asp:Label><br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>


Default.aspx:
=========

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

<%@ Register Src="uctextlist.ascx" TagName="uctextlist" TagPrefix="uc1" %>
<%@ Register Src="uctextdetail.ascx" TagName="uctextdetail" TagPrefix="uc2" 
%>
<!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 btnSearch_Click(object sender, EventArgs e)
    {
        myTextList.Visible = true;
    }

    protected void myTextList_TextID_Clicked(object sender, EventArgs e)
    {
        myTextDetail.Visible = true;
        myTextDetail.TextBox1Text = DateTime.Now.ToString();
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        myTextList.TextID_Clicked +=new 
EventHandler(myTextList_TextID_Clicked);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <asp:UpdatePanel ID="updateSearch" ChildrenAsTriggers="false" 
UpdateMode="Conditional"
                runat="server">
                <ContentTemplate>
                    <asp:DropDownList ID="ddl1" runat="server">
                        <asp:ListItem>1</asp:ListItem>
                        <asp:ListItem>2</asp:ListItem>
                    </asp:DropDownList>
                    <asp:Button ID="btnSearch" runat="server" Text="Search" 
OnClick="btnSearch_Click" />
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="ddl1" 
EventName="SelectedIndexChanged" />
                </Triggers>
            </asp:UpdatePanel>
            <asp:UpdatePanel ID="updateList" ChildrenAsTriggers="false" 
UpdateMode="Conditional"
                runat="server">
                <ContentTemplate>
                    <uc1:uctextlist ID="myTextList" Visible="false" 
runat="server" />
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="btnSearch" 
EventName="Click" />
                </Triggers>
            </asp:UpdatePanel>
            <asp:UpdatePanel ID="updateDetail" UpdateMode="Conditional" 
runat="server">
                <ContentTemplate>
                    <uc2:uctextdetail ID="myTextDetail" Visible="false" 
runat="server" />
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="myTextList" 
EventName="TextID_Clicked" />
                </Triggers>
            </asp:UpdatePanel>
        </div>
    </form>
</body>
</html>



Let me know if this helps or not. Thanks.



Regards,
Walter Wang (wawang@online.microsoft.com, remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

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

Excellent!!!
This solved the problem.

In fact it was only necessary to add the attributes 
(UpdateMode="Conditional" and ChildrenAsTriggers="false") to the second 
UpdatePanel.

For future readers of the forum ....
I found some more documentation on these attributes here: 
http://ajax.asp.net/docs/mref/N_System_Web_UI.aspx