I have an issue with maintaining scroll position.
I am almost positive that I have everything set correctly. I have updated my web config...
<pages maintainScrollPositionOnPostBack="true"
and everything seems to work fine UNTIL....
When ever my Gridview returns a lot of pages, like more than 50, sometimes upwards of 100 or more, I show 50 records per page. The farther into the Gridview, the more the scroll position is off.
So what I am saying is that for the first 20 plus pages or so, if I scroll down the page to the point where the top rows have moved off the screen and I enter Edit Mode, the correct record remains in view on Postback.
But if I am over say around 30 pages into the Gridview, the further in the worse it gets, when i enter Edit Mode I have to scroll back down to the location of the record that I selected to edit.
Any ideas on this one will be tested, my users are going nutts!!!
thanks again,
You could wrap the gridview in a div set with overflow:auto. Then with js reset the scroll position when the page loads. something like this.
<body onload="GetDivPosition()">
<form id="form1" runat="server">
<asp:HiddenField ID="hdnField" runat="server" Value="0" />
<div style="overflow:auto;" ID="gridArea" onscroll="SetDivPosition()">
<asp:GridView ID="yourGrid" runat="server">
.....
</asp:GridView>
</div>
<script language="javascript" type="text/javascript">
function GetDivPosition() {
var hdn = document.getElementById("hdnField");
document.getElementById("gridArea").scrollTop = hdn.value;
}
function SetDivPosition() {
var hdn = document.getElementById("hdnField");
hdn.value = document.getElementById("gridArea").scrollTop;
}
</script>
Visual studio will probably give you warnings that onscroll isn't valid but it has always worked for me. If your using an update panel it's a little more complicated. Actually all of mine are in update panels so I tried to revert this code back, so hopefully this will work for you.
The MaintainScrollPositionOnPostBack property only works in IE so unless this is an Intranet situation where everybody is using IE, then this is not a good solution. There are browserCaps hacks for other browsers but not even Microsoft supports this.
If you are using paging, then the simplest option is to reduce the number of records per page. Only other "clean" option remaining would be to roll your own jQuery solution.
Here's an approach without using the MaintainScrollPositionOnPostback property:
http://www.kodergurl.com/2010/08/maintain-scroll-position-on-post-back.html
Related
Another gridview in updatepanel paging/sorting questions folks.
Gridview looks like this:
<asp:UpdatePanel runat="server"
ID="upGdvPendingReview"
ChildrenAsTriggers="true"
UpdateMode="Conditional">
<ContentTemplate>
<asp:GridView
ID="gdvPendingReview"
runat="server"
PageSize="10"
AllowPaging="true"
AllowSorting="true"
>
<columnCrudHere>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
Gridview is bound to linqdatasource using the Selecting event. This code works perfectly without the updatepanel. It also works perfectly if I copy to a page that isn't a Content Page to a Master Page. I've read a lot of posts about gridview issues in update panels with paging and sorting. In fact, there is one where they guy comments at the end that he got it working but it still fails when using a MasterPage. I've tried using a scriptmanager in the same page as the gridview and changing various options of the scriptmanager. To get it working, I just create a new page, copy my gridview, linqdatasource, scriptmanager, and code behind...and boom it works. It makes me wonder if I have something else in the page getting in the way. I do have other updatepanels where I can update content fine. So, this...combined with the post where the same issue is mentioned briefly has me perplexed.
I've also tried explicitly listing the event:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="gdvPendingReview" EventName="PageIndexChanging" />
</Triggers>
Here is the post where it seems like someone is having the same issue (at the very end):
GridView PAGING inside UpdatePanel does not work for second page change, why?
***Update
As I continue to test this, it becomes more frustrating and fascinating. I have created two new pages with only the gridview, linqdatasource, scriptmanager, and databinding methods. One page has no master....the other page has a master (but a completely new and clean one to avoid any possible interference). Same results! Paging/Sorting works great asynchronously as long as I'm not referring to a master page. :(
***Update
I should admit that I am a liar. The test page I set up (with Master) did have some code left over from a previous test. In fact, when I comment this code out, my GridView paging works inside the UpdatePanel when using a MasterPage. The culprit? A "Response.Write". When I toggle this off an on I can create the issue on demand. Big lesson "Relearned" here about testing and not assuming anything. There is still some mystery, though.
Interestingly, I don't have a Response.Write or anything I can find in my code for the original page with the issue. Does anyone have a thought on why the "Response.Write" would break the gridview sorting/paging in the updatepanel? If so, that may help pinpoint what is happening.
Thanks all!
Well, the answer to this issue is a bit embarrassing.
Lesson 1 - When you test, you isolate your issue as completely as possible and do not assume anything.
Lesson 2 - When troubleshooting AJAX issues, look for javascript errors.
Turns out my code works fine. The issue was other updatepanels on the page set to update "always". I noticed a javascript error in Firebug alerting me that an updatepanel couldn't be found when trying to sort/page the gridview I was having issues with. When I try to page my gridview, any updatepanel set to always also tries to update. Well, there is a "hidden" section of my page (visibility is off) with updatepanels. When attempting to sort/page my gridview, javascript is looking for these, I assume to update them, but cannot find them. There is a javascript error and all progress stops. The solution was to change the updatepanels that are hidden all to conditional (which has other repercussions but its bearable).
Does this seem like the correct behavior by default. If an updatepanel is inside another control whose visibility is turned off, should it be attempting to update?
Thanks all.
This problem is relevent apperantly to IE6 and maybe to newer versions im not sure. when you put a linkbutton inside an updatepanel like so:
<asp:ScriptManager runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server">
<ContentTemplate>
<asp:LinkButton runat="server">Test</asp:LinkButton>
</ContentTemplate>
</asp:UpdatePanel>
You run it and then play around with ctrl+mouse wheel and change the size of the site. Then click the linkbutton. It changes the size of the text of the website again to somekind of deffault size... Im wondering if someone knows how to fix this. And what is causing this problem
Edit: the problem was with a few users clicking the link and suddenly all the text on the page became very small and unreadable
You have nothing to fix here, this is a browser behavior.
But if you have a custom behavior that you change the text size, then you need to take care to save the last setting somewhere and then get the last setting and use it.
I have two updatepanels inside an accordion control, laid out like this:
<accordion>
<first pane content>
<updatepanel UpdateMode="conditional">
<contenttemplate>...</contenttemplate>
<triggers>...</triggers>
</updatepanel>
</first pane content>
<second pane content>
<updatepanel>
<contenttemplate>...</contenttemplate>
<triggers>...</triggers>
</updatepanel>
</second pane content>
</accordion>
The panel updates once, but after that, no updates take place. If I refresh the page, then I can see the updated information. This means that the database is being updated, but the updatepanel isn't refreshing (after refreshing the first time). Why is this happening?
This has been bugging me for days, so any advice would be much appreciated.
Thanks!
update
The problem seems to lie when I call this:
Sys.require(Sys.components.accordion, function() {
$("#acca_profile").accordion({
HeaderCssClass: "acc_header",
HeaderSelectedCssClass: "acc_selectedheader",
FadeTransitions: true,
suppressHeaderPostbacks: true,
requireOpenedPane: false
});
});
in the endRequestHandler function. However, if I don't call it, then the div that should be converted to an accordion is no longer an accordion.
Update 2
After a bit more work, I figured the problem may lie in the fact that the Jquery is not rebinding the events after the partial postback. A lot of solutions claim that you have to register the client script, but I have this at the top of my aspx page:
<asp:ScriptManager runat="server" EnablePageMethods="true">
<Scripts>
... (other script)
Path="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" />
</Scripts>
</asp:ScriptManager>
How can I rebind the JQuery events in my code?
Finally, I think I've solved it! Hours down the drain for a few lines of code. Isn't that always the way? :D
For people who come across this thread, I added:
Sys.Application.add_init(pLoad);
I then created a function called pLoad which contained the my accordion javascript (in original post), as well as a couple of other functions.
So far things seem to be working...
I have 2 sections of my website I am developing, a reference box that has a fixed width and a working box that has the same height as the content. I am trying to make it so the user can swap the content between the two boxes. I have the following type of setup in the aspx page:
<asp:panel id="pnlReference" runat="server" CssClass="referencePanel" >
<asp:panel id="pnlsection1" runat="server" >
Content....
</asp:panel>
</asp:panel>
<asp:linkbutton id="lbtSwapPanels" runat="server" />
<asp:panel id="pnlWorking" runat="server" CssClass="workingPanel" >
<asp:panel id="pnlSection2" runat="server" >
Content....
</asp:panel>
</asp:panel>
What I am trying to have occur is when I press the lbtSwapPanels linkbutton, it moves pnlSection1 into pnlWorking and pnlSection2 into pnlReference. The code I used to do this in the OnClick method was:
Control pane1, pane2;
pane1 = pnlWorking.Controls[0];
pane2 = pnlReference.Controls[0];
// Remove them from their respective panels
pnlWorking.Controls.Remove(pane1);
pnlReference.Controls.Remove(pane2);
// Add them to the opposite pane
pnlWorking.Controls.Add(pane2);
pnlReference.Controls.Add(pane1);
Unfortunately, this does not work. When I click the linkbutton, nothing happens. If I then do something to perform another postback the reference and working panels become empty. I assume this has to do with the change not being saved into Viewstate but I don't know how to get around that.
Does anyone have any ideas on how to do this?
Update: It seems that moving objects around with Jquery is causing issues with asp.net postbacks as well as making my asp.net ajax tabcontainer completely fail to function. After 2 swaps and postbacks, further postbacks cease to function at all. Here's the new code
<div id="referencePane">
<asp:panel id="pnlsection1" runat="server" >
Content with tab container
</asp:panel
</div>
Swap Panes
<div id="workingPane">
<asp:panel id="pnlsection2" runat="server" >
Content
</asp:panel>
</div>
Here's the javascript:
function SwapPanes() {
var pane1, pane2;
pane1 = $("#workingPane").html();
pane2 = $("#referencePane").html();
$("#workingPane").empty();
$("#referencePane").empty();
// Add them to the opposite pane
$("#workingPane").prepend(pane2);
$("#referencePane").prepend(pane1);
}
First postback causes the tabcontainer to fail (javascript exceptions claiming it's trying to create a tab container with teh same ID (only one exists in the original aspx page). Postbacks then proceed to do wierd stuff.
Have you thought about keeping the controls in the panel but just swapping the position of the panels? You can do this pretty easily in JQuery although you'll be using DIVS instead of ASP.NET panels. This is, again, quite easy since Panels just translate to DIVS in the end. I did this recently for a wizard-style questionnaire (moving from panels to divs) and I was surprised how easy it was.
Update: Note that, when you swap the div positions, you can change the style as well (again, easy in JQuery) so that the user won't have a jarring "why did these two things change position" experience.
The bottom line, really, is that I think you are trying to use a hammer to drive a screw. JQuery is the screwdriver you are looking for and learning it is very much worth your while!
Look into ASP.Net web parts. That will manage the whole thing for you in a dynamic and responsive way.
I have a gridview that is within an updatepanel for a modal popup I have on a page.
The issue is that the entire page refreshes every time I click an imagebutton that is within my gridview. This causes my entire page to load and since I have grayed out the rest of the page so that the user cannot click on it this is very annoying.
Does any one know what I am missing.
Edit: I entered a better solution at the bottom
Make sure you have the following set on the UpdatePanel:
ChildrenAsTriggers=false and UpdateMode=Conditional
do you have ChildrenAsTriggers="false" on the UpdatePanel?
Are there any javascript errors on the page?
I had this problem and came across the following article:
http://bloggingabout.net/blogs/rick/archive/2008/04/02/linkbutton-inside-updatepanel-results-in-full-postback-updatepanel-not-triggered.aspx
My button wasn't dynamically created in the code like in this example, but when I checked the code in the aspx sure enough it was missing an ID property. On adding the ID the postback became asynchronous and started to behave as expected.
So, in summary, check your button has an ID!
Are you testing in Firefox or IE? We have a similar issue where the entire page refreshes in Firefox (but not IE). To get around it we use a hidden asp:button with the useSubmitBehavior="false" set.
<asp:Button ID="btnRefresh" runat="server" OnClick="btnRefresh_Click" Style="display: none" UseSubmitBehavior="false" />
Several months later this problem was fixed. The project I was working in was a previous v1.1 which was converted with 2.0. However, in the web.config this line remained:
<xhtmlConformance mode="Legacy"/>
When it was commented out all of the bugs that we seemed to have with the ajax control toolkit disappeared
Is the Modal Window popped up using the IE Modal window? Or is it a DIV that you are showing?
If it is an IE Modal Pop up you need to ensure you have
<base target="_self" />
To make sure the post back are to the modal page.
If it is a DIV make sure you have your XHTML correct or it might not know what to update.
I would leave the onClick and set it as the trigger for the updatePanel.
That's odd that it works in FF and not IE. That is opposite from the behavior we experience.
UpdatePanels can be sensitive to malformed HTML. Do a View Source from your browser and run it through something like the W3C validator to look for anything weird (unclosed div or table being the usual suspects)
If you use Firefox, there's a HTML validator Extension/AddOn available that works quite nicely.
For reference..
I've also noticed, when using the dreaded <asp:UpdatePanel ... /> and <asp:LinkButton ... />, that as well as UpdateMode="Conditional" on the UpdatePanel the following other changes are required:
ViewStateMode="Enabled" is required on <asp:Content ... /> (I've set it to Disabled in the MasterPage)
ClientIDMode="Static" had to be removed from <%# Page ... />
To prevent post-backs add return false to the onclick event.
button.attribute.add("onclick","return false;");
Sample:
string PopupURL = Common.GetAppPopupPath() + "Popups/StockChart.aspx?s=" + symbol;
hlLargeChart.Attributes.Add("onclick", String.Format("ShowPopupStdControls(PCStockChartWindow,'{0}');return false;", PopupURL));