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

Have you tried nesting your `DataList` inside an `UpdatePanel`? — Shai, Mar 07 '12 at 07:25
yes, but I can't keep my datalist inside the update panel, if i'll keep it inside the update panel someother functionality is going to disturb — Rocky, Mar 07 '12 at 07:27

Zo Has · Accepted Answer · 2012-03-07T08:36:32.867

2

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

Put the button & datalist inside a updatePanel. Set

UpdateMode=Conditional

for the udpatePanel.

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.

edited Mar 07 '12 at 08:36

answered Mar 07 '12 at 07:31

Zo Has

12,599
22
87
149

I have a button as button1 which is out side of datalist, and on Item_Command I am enabling that when user is selecting the item, when I am using updatepanel then that button is not getting enable – Rocky Mar 07 '12 at 07:37
/* DataList*/ – Rocky Mar 07 '12 at 07:43
Are you performing a postback() ? – Zo Has Mar 07 '12 at 07:55
I tried with ur code but on Selecting the item button1 is not getting enabled which i have outside of datalist – Rocky Mar 07 '12 at 09:20
its my btn – Rocky Mar 07 '12 at 09:23

score 2 · Answer 2 · answered Mar 07 '12 at 07:58

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!

answered Mar 07 '12 at 07:58

Elementenfresser

711
5
18

I already have one big Update Panel for the whole page but its not working for me, actually its a ascx page which is calling on a aspx page. – Rocky Mar 07 '12 at 08:04
And having Updatepanels on the .aspx page is not an option for you? when rendered they all get updated... – Elementenfresser Mar 07 '12 at 08:12
no I can't use, I have a aspx in that i have a ascx and this ascx i have other ascx in which i am using uplodifyupload – Rocky Mar 07 '12 at 08:20

score 0 · Answer 3 · answered Mar 07 '12 at 08:04

0

Try to set MaintainScrollPositionOnPostback true within Page tag:

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

answered Mar 07 '12 at 08:04

Michał Kuliński

1,928
3
27
51

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

3 Answers3