Lost touch with Rad Ajax basics

[TonyG]

I'll share a problem that could be embarrassing but others may be here at some point too.

I tend to wrap controls into div tags just so that I can set style position x/y.
Within that I'm often confused about when to use a RadAjaxPanel, asp:Panel, asp:UpdatePanel, or a div.
The thing is that the RadAjaxManager creates panels around controls and ajaxifies them for us. But it can only do this if the controls are visible. So what gets me is when I need to make a control visible - it's not there for Ajax to toggle Visible=true. For these controls I think I sometimes need to do the ajaxifying in code-behind. So I split ajaxification between markup and code - which seems sloppy.

Then there are timers, and I have a recent thread going on about this. You can't ajaxify a timer as the updated control directly because it's not a visible control. You "may" need to put the control on a panel and set that as the updated control.  While I've seen this stated many times, examples show timers outside of panels, and I've tried that code and it works. In my more sophisticated pages it seems like sometimes I need the timer in a panel and other times not.  I'm just never sure about which panel to try - it's just a guessing game.  So why does the RadAjaxManager wrap other controls in a panel and not a timer? And what are the firm rules about exactly how this is supposed to be coded?

Here is a simple example that demonstrates some of my confusion related to the above.
I have a tab with a multi-page and a single timer on the page. In each tab is a start/stop button which can toggle the timer. If you press Start on tab 0 the timer is enabled and the button.Text is changed to Stop. Now click Stop, timer.enabled=false and button.text gets reset to Start.  Tab 1 has the same functionality.  The timer does postbacks which perform work, and when the work is complete the timer is supposed to get disabled and the button on the current tab toggled off.  If I pre-ajaxify the buttons in markup so that Timer1 updates both of them, only one of the buttons is visible at any given time, so I'll get an error at runtime. So I think I need to ajaxify controls in page_load for each pageview, depending on which tab is active. I also find that sometimes my controls ajaxify but the timer does not, or the timer ajaxifies but the controls do not. The effect is that on a timer_tick, (1) control updates are not reflected on the client, or (2) when I set timer.enabled=false, the client doesn't get that message and the timer keeps ticking.

I have spent exactly one week on nothing but the above problems, getting absolutely nothing productive done.  The code for these things is always too extensive to send to Telerik Support, though those great people are always eager to help us workout issues like this.  Over the last year I've spent many hours trying to balance RadAjaxManager with various panels and controls and codebehind code to accomplish the task of the day, and quite often the end result is "I don't know why that worked but I'll accept it".  That's unprofessional, I want to understand this better better.  What I'd rather see is a very clearly defined set of rules for when we need specific panels, and exactly what happens in the RadControls black-box "for" us, so that I know what to expect in my code.

This situation is causing me to re-consider using web forms for this stuff, and maybe to switch to MVC to eliminate a lot of the black-box activity that makes some of these very helpful tools yet another layer for debugging.  I don't know if that will really help.  Any comments?

Thanks for your time, and any feedback or links to indepth blogs or articles on this topic.

[Iana Tsolova]

Hello Tonyg,

You questions are indeed valid and ask right on place. You are right that it is a bit hard to determine which control to use in certain situations and unfortunately there are no strict rules you can follow. Though I will try to give some light here.
- The thing you should avoid is using more than one ajax control for ajaxifying the same page content.
- Use RadAjaxPanel when the ajax initiator and the updated controls are closely situated on the page, and if the ajax updates are closed in the RadAjaxPanel. In other words, if none of the outside controls should update something in the RadAjaxPanel, and if none of the controls in the RadAjaxPanel should update outside controls.
- If you have a lot of controls on the page and you have complex ajax relation between them, you would better use RadAjaxManager for the whole setup.
- In any case you can use ASP:UpdatePanel, though them you loose the flexibility of the RadAjaxManager and if you want to show RadAjaxLoadingPanel, in this case, you should take care about it with custom code.

Of course there are scenarios which need further adjustments and tricks, however they are too specific/custom and cannot be listed. If you hit such case and something is not working as expected, it is best to contact us so we help with the particular case.

Other than this, getting more and more experience with the control, you will start finding the best approaches yourself with minimum effort. If you are new to the control, it is best to try all possible options, to see the differences, if any, and thus be able to choose the most suitable solution.

All the best,
Iana Tsolova
the Telerik team

[TonyG]

Thank you so much for your response. I thought I was being completely daft. I've been working with RadControls for a couple years now, but jut recently got tired of guessing at the most elegant ajaxifying patterns.

In code behind it seems like there are at least 3 ways to control ajaxification:

1) Ajaxify everything but don't provoke trigger events unless required
For example, in the case of a page with multiple pageviews activated by a tab (and I'll use this example below as well) the codebehind can check to see which tab is active before modifying a property on a control.  If tab0 is active, don't set a property on anything that will trigger a refresh of tab1.  This avoids the problem of an invisible control being updated by RadAjaxManager, and related errors.  A problem here is when we want a timer trigger to update different tabs.  But I think the solution is to have a different timer for each tab, and only enable a timer which has update controls for an active tab.

2) Ajaxify everything in markup but don't allow settings to get enabled.
For example:

protected void RadAjaxManager1_AjaxSettingCreating(object sender, AjaxSettingCreatingEventArgs e)
  if ( tab1.SelectedIndex == 1 && e.Initiator.ID.IndexOf("Timer1") )
  {
    e.Cancelled = true; // don't ajaxify tab  1, we're not there
    return;
  }
}

3) Don't use markup, ajaxify in codebehind as needed:
For example (this is 'pseudo-code' and may not be technically accurate):

protected void tab1_TabClick(object sender, RadTabStripEventArgs e)
{
  if ( tab1.SelectedIndex == 0)
  {
    RadAjaxManager1.AjaxSettings.AddAjaxSetting(Timer1, panelFoo);
  }
}

So, in addition to careful selection of controls, and not over-ajaxifying, is there a preference about whether to use any of the three methods above?

And I still need to find a solution to the mystery where we so,etimes cannot turn off a timer during its own timer_tick event. Here, trigger timer1 cannot have timer1 as an updated control. The timer1 needs to be in a panel1 and the timer1 trigger needs to update panel1. This sometimes works, sometimes not, depending on form complexity. As I find time in the next few days I'm going to see if a timer1 in a RadAjaxPanel will both trigger and update if I use:
RadAjaxManager1.AjaxSettings.AddAjaxSetting(radpanel1, radpanel1);

Thanks again!

[Iana Tsolova]

Hi Tonyg,

Your observations are right. For the fist case with the timer: A solution with having different timers would works. Another approach is to have one timer updating the whole MultiPage. And if the MulriPage has RenderSelectedPage only to true, as a result only the controls in the visible PageView ill be updated on the client. Other than this, the three methods are applicable and achieve the same goal. Definitely, having declarative ajax settings is good when you are sure all the controls are visible and available on the page all the time. If the above is not true for some of the controls, having dynamic ajax settings only when needed is the best
approach.
For the last questions: Yesm you are right that you cannot add the Timer as updated control. Though you can still disable it in its Tick event. Try the below sample:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="Timer1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Label3" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<asp:Timer ID="Timer1" runat="server" OnTick="Timer1_Tick" Interval="1000">
</asp:Timer>
<asp:Label ID="Label3" runat="server" Text="Label"></asp:Label>

protected void Timer1_Tick(object sender, EventArgs e)
{
    Label3.Text = DateTime.Now.ToString();
    Timer1.Enabled = false;
}

In addition to all said above: I would suggest that you add setting only when needed and whenever possible set a postback control as ajax initiator on opposite to using container controls as such. Always make sure that only the controls that need to be updated are added as updated controls to achieve better performance.

Greetings,
Iana Tsolova
the Telerik team

[TonyG]

Iana, your patience and collaboration have helped lead to the solution which I published here.

Sincere thanks. It would be nice if others posted their solutions to some of these problems, perhaps after trying some of the suggestions found in this thread. I'll continue researching this as well. For better or worse, for me this has changed from being a long-term annoyance to an in-depth research project.

I'm still wondering if anyone believes MVC is the way to escape this whole class of issues, and why.