How-To Enable Partial Rendering On RADGrid? - asp.net

Original Post
2 Additional Edits Below
I have a RADGrid on my page, but when the user clicks any of the controls within the grid, Page Forward/Back, Page Number, PageSize, Refresh, Checkbox Row Selector, etc... The entire page refreshes. I would like to have just the Grid itself refresh. I looked online, but I can't seem to find the information to make it all click.
I am using DNN 6, and I tried programmatically registering the RADAJAXManager (if missing, which it usually is) on the page. I saw people online referring to an EnableAJAX setting, but then later found that it was depreciated in the newer Telerik controls, so that option was ruled out. So then I tried programatically adding the AJAX Settings with the AddAjaxSetting()method. I have tried several variations of the parameters, but nothing happens. Obviously I am doing something wrong...I am looking entirely in the wrong place?
I tried surrounding my RADGrid with an AJAXPanel, but then the issue I had was that instead of the whole page "blinking" on a refresh, the RADGrid completely vanished, then re-appeared. I looked at several of the Demo's on the Telerik site, and I have no clue how they get their RADGrid to use the spinning circle refresh method for just the RADGrid.
I tried setting the page's "Support Partial Rendering" to true, but then what happens is that the whole page gray's out with the spinning circle. I just want to mimic the same behavior as shown on the Telerik Demo's.
Help!!! ::Frustrated::
Any clues or suggestions?
EDIT 4/18/2012 # 7:48PM EST
I am using the following code to create the RADAjaxManager (If missing) on the page where I place my custom user control.
Private Sub RegisterRADAjaxManager(ByVal p_objPage As Page)
'***************************************
' Register RAD AJAX Manager (If Missing)
'***************************************
Dim objRADAJAXManager As Telerik.Web.UI.RadAjaxManager = Telerik.Web.UI.RadAjaxManager.GetCurrent(p_objPage)
'***************************************
' If RADAJAXManager Is Missing, Add It
'***************************************
If (objRADAJAXManager Is Nothing) Then
objRADAJAXManager = New Telerik.Web.UI.RadAjaxManager
objRADAJAXManager.ID = "RADAJAXManager"
p_objPage.Form.Controls.Add(objRADAJAXManager)
End If
End Sub
I use the following code to add the Ajax Settings:
'***************************************
' Register RADGrid w/ RADAJAXManager
'***************************************
With TekkGrid.GetCurrentRADAJAXManager(Me.Page)
.AjaxSettings.AddAjaxSetting(Me.gridMain, Me.gridMain)
.AjaxSettings.AddAjaxSetting(Me.gridMain, Me.RADLoadingPanel)
End With
In my ASCX file I have:
<Telerik:RadGrid ID="gridMain" runat="server" />
<telerik:RadAjaxLoadingPanel ID="RADLoadingPanel" runat="server">
</telerik:RadAjaxLoadingPanel>
Am I missing anything?
EDIT 4/19/2012 # 8:56AM EST
EUREKA! I figured it out. My problem was such a silly one. I have an IF statement on my Page_Load() event that check if IsPostBack. I was only registering the AjaxSettings on the RADAjaxManager if IsPostPack = False. I didn't realize that the RADAjaxManager was being recreated on each PostBack, and therefor I was losing all my AjaxSettings, so I moved the method that did the AjaxSettings registration outside of the IF statement so it always run on every page load, and voilĂ ! It worked!
1) I tested the "Grouping" ability, and it works, however...when I drag a column, you don't "see" the collumn being dragged. All you see is a "crosshair" cursor as you are dragging the column. In the Demo's, when you start dragging a box with the column name inside it appears so you have a visual experience of the "drag/drop" feature. How do I get that same functionality? Anyone know?

If you mark your module control as "Supports Partial Rendering," DNN will wrap your module in a RadAjaxPanel. This is definitely the easiest way, and most compliant with what the framework provides/expects.
If you don't want the page to grey-out during the postbacks, you just need to adjust the style (probably at a portal/skin level, for consistency throughout the site). So, if your skin wraps the whole site with an ID of MySkin, you can use this CSS to change the style of the update progress display:
#MySkin .RadAjax .raTransp {display:none;}
UPDATE
To have the update progress indicator only display over the grid, try using the combination of RadAjaxManager and RadAjaxLoadingPanel as the demos do; something like:
<telerik:RadAjaxManager runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

Related

Disable page refresh after button click ASP.NET

I have an asp button that looks like this:
Default.aspx
<asp:button id="button1" runat="server" Text="clickme" onclick="function" />
Default.aspx.cs
protected void function(object sender EventArgs e)
{
// Do some calculation
}
However, whenever I press the button, the entire page gets refreshed. I have looked on this site and found many solutions, but none of them really works for my project. Here are some of the suggested solutions:
set onclick="return false;" // but then how do I run the function in the code-behind?
use !IsPostBack in Page_Load // but the page still refreshes completely. I don't want Page_Load to be called at all.
Disable AutoEventWireup. // making this true or false doesn't make a difference.
Does anyone have a solution to this, or is it really impossible?
I would place the control inside of an Update panel.
To do so, you would also need a script manager above it, so something like this:
<asp:ScriptManager runat="server" ID="sm">
</asp:ScriptManager>
<asp:updatepanel runat="server">
<ContentTemplate>
<asp:button id="button1" runat="server" Text="clickme" onclick="function" />
</ContentTemplate>
</asp:updatepanel>
if a control inside the update panel does a postback, it will only reload the part of the page inside of the upate panel.Here is a link you may find useful from the MSDN site.
I think there is a fundamental misunderstanding here of how ASP.Net works.
When a user first requests your page, an instance of your Page class is created. The ASP.Net framework runs through the page lifecycle with this page instance in order to generate html. The html response is then sent to the user's browser. When the browser receives the response it renders the page for the user. Here's the key: by the time rendering is complete, your page class instance was probably already collected by the .Net garbage collector. It's gone, never to be seen again.
From here on out, everything your page does that needs to run on the server, including your method, is the result of an entirely new http request from the browser. The user clicks the button, a new http request is posted to the web server, the entire page lifecycle runs again, from beginning to end, with a brand new instance of the page class, and an entirely new response is sent to the browser to be re-rendered from scratch. That's how ASP.Net (and pretty much any other web-based technology) works at its core.
Fortunately, there are some things you can do to get around this. One option is to put most of your current Page_Load code into an if (!IsPostBack) { } block. Another option is to set up your method with the [WebMethod] attribute and make an ajax request to the method from the button. Other options include calling web services from custom javascript and ASP.Net UpdatePanel controls.
What works best will depend on what other things are on the page that user might have changed.
That is normal behavior for asp.net, you are actually causing a postback of the the page in order for the associated event to be called on the server.
I would suggest working with update panels but if you just need something to happen on the backend without it causing any major change on the web page, I would use jquery and a web service. The main reason for me is that update panels create huge viewstate objects.
Have a look here for asp.net ajax : http://www.asp.net/ajax
And here for an example of jquery and wcf : http://www.codeproject.com/Articles/132809/Calling-WCF-Services-using-jQuery
I have a similar problem. this answer helps me a lot. in your asp button.<asp:button id="button1" runat="server" Text="clickme" OnClientClick="return SomeMethod();" /> and in the SomeMethod which is a js method do your logic like manipulating your page then return false as the mentioned answer suggest.

Gridview inside UpdatePanel, paging/sorting doesn't work ONLY when using MasterPage

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.

Double-clicking on a form control in Visual Studio 2010 design view inserts a script instead of inserting an event handler

The title pretty much precisely asks the question, but I shall repeat;
When I double click on a form control while in the design view in a Web Application project within Visual Studio 2010, say a 'button' or a 'submit' for example, it inserts a javascript function into my .aspx file. When I do this at work it automatically creates an event handler for the control in the code-behind.
How do I change this to that setting? I have used '/resetsettings' already, and other answers to similar questions do not solve my problem. I have reinstalled, gone through every menu I can find (though I may have missed something) and I'm pulling my hair out.
I don't want to type those event handler subroutines every time! Halp meee!
Thanks in advance for any helpful replies.
What it looks like is going on with this is that you are double clicking on a regular HTML element. For example, if you have
<input type="button" value="Test" id="Test" name="Test" />
and double click on it in design view it will create a JavaScript function on the page for it and an onclick event in the element. If you want to create an event handler in the code behind, you need to have an Asp.Net control like
<asp:Button runat="server" ID="Test" Text="Test" />
and then double click that to create a code event in the code behind.
Also, make sure that your page directive at the top has the correct filename for its CodeFile attribute to correctly map to an existing code behind file.

.Net Hiddenfield not rendering on client

I put an asp.net hiddenfield into one of my pages. I couldn't access it through javascript and when I went to view source, I couldn't find it in the page at all. Is there any obvious reason for this?
Here's the line with the hidden field:
<asp:HiddenField ID="HiddenEmailAddress" runat="server" Value="test" />
The problem was that the hiddenfield was placed in a table that was invisible at the time. Will self answer when system allows.
Your control is inside of another control that has it's visibility set to false, but you already knew that. :D

Trying to self contain pop ups which use the AjaxToolkit ModalPopUpExtender

I have 3 different kinds of ajax popups that need to exist across my site. I was hoping that I could simply create a user control for each one and place the panel and modal popup extender inside each one but this doesn't seem to be working. Has anyone tried this before or do you have a recommendation as to how I can avoid duplicate code for each pop up on different pages? Thanks!
Ah I figured out my issue with the User Control I believe.
The ModalPopUpExtender requires the TargetID property to be set otherwise an error occurs. Since this is sitting in a UserControl I just created a dummy link button that doesn't do anything and I set the property visible to false.
<asp:LinkButton ID="lnkBlank" runat="server" Visible="false" />
<asp:Panel ID="plContainer" style="display: none;" runat="server">
Hello?
</asp:Panel>
<cc1:ModalPopupExtender ID="mpe" runat="server"
BehaviorID="test"
TargetControlID="lnkBlank"
PopupControlID="plContainer" />
Apparently it doesn't appreciate that and the moment I set the visible property to true it started working. Not sure what the reasoning is for a TargetID since, I would think, most pop ups could be called from multiple links about the page. Perhaps I'm still not entirely clear on how this control is supposed to be used.
One option would be to write the popups in a asp.net user control (a .ascx page) and include that on the pages you need the popups. Have a public method in the ascx page that will show the popup, and call it from the parent page when you need to. If you already have a script manager on the parent page, you can't have a second one in the ascx page, but other then that there shouldn't be anything that would stop this from working. Hope this helps!
edit: here's what my modal popup extender control looks like...
<cc1:ModalPopupExtender
ID="mpeClassroom"
BackgroundCssCLass="modalBackground"
runat="server"
CancelControlID="lbClose"
OnOkScript="onOk()"
TargetControlID="Button1"
PopupControlID="pnlClassroom">
</cc1:ModalPopupExtender>
in my code behind page, my method just calls mpeClassroom.Show();
The problem with hidden link as TrgetControlID is that; when u set its visibility as false, server doesn't render it as well. PopExtender then cannot find control on the page.
Instead of setting its visibility to false, try to apply a style with display:none. This should work !

Resources