Search code examples
c#asp.netdatalistmaintainscrollpositionon

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


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..


Solution

  • 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.