how to stop page jumping and maintain both panel & browser scroll position when user click on datalist item?

Question

I have a datalist inside the panel

<asp:Panel ID="Panel1" runat="server"  ScrollBars="Vertical">
  <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal"  OnItemDataBound="DataList1_ItemDataBound" CaptionAlign="Left">
    <ItemTemplate>
       <asp:ImageButton ID="btn1" runat="server" ImageUrl='<%#"~/Images.ashx?Name=" +DataBinder.Eval(Container.DataItem, "Path") %>'
           OnCommand="Item_Command" CommandArgument='<%# Eval("Id").ToString() +";"+Eval("Path")%>' />
    </ItemTemplate>
  </asp:DataList>
</asp:Panel>

On Item_Command I am adding the style to btn1 such as border and color, and getting the id of selected item

string[] str = e.CommandArgument.ToString().Split(';');
Id = Convert.ToInt32(str[0]);

When I am selecting the item page is jumping, suppose I have scrolled browser scrollbar to bottom and selected an image browser scroll is going on top and again its coming on bottom, On Item_Command I am enabling and disabling few other btn which is out side of datalist, if i am keeping the datalist inside the updatepanel then all other btn is not getting enable or disable thats why i am not using update panel. I have all the controls inside the update panel. I tried with how to retain the browser scroll position after any event gets fire but its not working, i am setting

Page.MaintainScrollPositionOnPostBack = true;
AutoEventWireup="true"

that also not working for me. I am using VS 2010, 4.0 with C#.

Some one plz tell me how to stop page jumping and maintain both panel1 and browser scroll position when user click on datalist item?

thanks in advanced..

Answer 1

Use a clientside function on Client click event of your image button like this

javascript:void(0);

, it works for me in update panel,

<asp:ImageButton OnClientClick="javascript:void(0);" ID="btn1" runat="server" ImageUrl="~/Help2.png" AlternateText="asas"/>

Edit

1. Put the button & datalist inside a updatePanel. Set

UpdateMode=Conditional

for the udpatePanel.

1. When you perform your operation on the dataList row. Just update the update panel manually like this

// Your image button event

YourUpdatePanel.Update();

This coupled with what I posted earlier should fix your problem. Also you might not need MainScrollPositionOnPostBack=true by using above.

Damien.

Answer 2

Well, here's the thought: use either one big update panel, that covers the whole page to maintain page scrolling OR use multiple update panels to cover all items you want to have updated!

Answer 3

Try to set MaintainScrollPositionOnPostback true within Page tag:

 <%@ Page (...) MaintainScrollPositionOnPostback="true" (...) %>