RadAjaxManager and, UpdatePanels problem

[Brad]

I have a fairly complex page I have been working on but have been having some trouble of late adding some ajax to some of the page items.

The problem seems to be one of compatibility between the RadAjaxManager and the regular ASP.NET AJAX UpdatePanels.

Below I have put together a skeleton of how my page is constructed. I have stripped out all the guts of the various controls for the sake of brevity (and relevance). 

In this format the page does not work. For one, clicking a row on the parent grid should make the child grids update. That does not happen. I have been on this page all day and just can't seem to get all the bits working together.

Yesterday I had an UpdatePanel around pretty much the whole page. The child grids updates but other bits started to break.

Here it is

<masterpage> << Contains the ScriptManager

    <script>
        // Javascript in here
    </script>

    <asp:UpdatePanel>
        <telerik:RadWindowManager>
            <telerik:RadWindow>
                <asp:TabContainer>
                    <asp:TabPanel />
                    <asp:TabPanel />
                    <asp:TabPanel />
                </asp:TabContainer>
        </telerik:RadWindowManager>
    </asp:UpdatePanel>

    <asp:UpdatePanel>
        <table>
            [various standard form elements]
            <telerik:RadComboBox />
            <input type="Button"/>
        </table>
    </asp:UpdatePanel>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
         <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="ParentGrid" />
                            <telerik:AjaxUpdatedControl ControlID="ChildGrid1" />
                            <telerik:AjaxUpdatedControl ControlID="ChildGrid2" />
                            <telerik:AjaxUpdatedControl ControlID="ChildGrid3" />
                           </UpdatedControls>
                    </telerik:AjaxSetting>
            </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadGrid ID="ParentGrid">

    </telerik:RadGrid>

    <asp:TabContainer ID="tc1" runat="server">
        <asp:TabPanel ID="tp1" runat="server">
            <telerik:RadGrid ID="ChildGrid1"/>
        </asp:TabPanel>

        <asp:TabPanel ID="tp2" runat="server">
            <telerik:RadGrid ID="ChildGrid2"/>
        </asp:TabPanel>

        <asp:TabPanel ID="tp3" runat="server">
            <telerik:RadGrid ID="ChildGrid3"/>
        </asp:TabPanel>
    </asp:TabContainer>

</masterpage>

One forum post I read somewhere suggested that I should not use the RadAjaxManager and instead just put UpdatePanels around all the things that need it. But that would not work for me as I have some popup forms that on closing call this bit of javascript to refresh the grids managed by the RadAjaxManager.

function refreshGrid(arg) {
    $find("<%# RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
}

So ditching the RadAjaxManager is not an option.

Could someone please suggest the correct way to set out a page like this with the RadAjaxManager?

[Maria Ilieva]

Hello Brad,

In this scenario it will be better to remove the asp UpdatePanels and add the following settings in the RadAjaxManager:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ParentGrid" />
                        <telerik:AjaxUpdatedControl ControlID="tc1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="tc1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="tc1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

Give this a try and let me know if it works for you.

All the best,
Maria Ilieva
the Telerik team

[Brad]

Maria

Your code results in this error

TabPanelCollection can only contain TabPanel controls

When 'tc1' is one of my TabContainers.

I still have not worked this one out.

Right now I am trying this after removing the Update Panels from my page.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
     <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ParentGrid" />
                        <telerik:AjaxUpdatedControl ControlID="ChildGrid1" />
                        <telerik:AjaxUpdatedControl ControlID="ChildGrid2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ChildGrid1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ChildGrid1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ChildGrid2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ChildGrid2" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

However, now clicking a row on the parent grid does NOT update any of the child panels. And clicking a row on one of the child panels does not execute it's code.

And as the page is posting back to itself left, right and center it is safe to say that the RadAjaxManager is doing nothing on this page.

[Brad]

Ok, I got this sorted. The error below

TabPanelCollection can only contain TabPanel controls

was caused when I had the RadAjaxManager pointing to a TabPanel. On rendering it was putting it's own ajax div stuff around the panel, hence the error above.

I fixed this issue by putting a DIV around just the content within each panel that I want ajaxed, and making each as runat=server and giving each an ID. This id was put into the RadAjax manager like so.

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="rgLocations">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rgLocations" />
                        <telerik:AjaxUpdatedControl ControlID="StatusDiv" />
                        <telerik:AjaxUpdatedControl ControlID="DetailsDiv" />
                        <telerik:AjaxUpdatedControl ControlID="NoteDiv" />
                        <telerik:AjaxUpdatedControl ControlID="ActivityDiv" />
                        <telerik:AjaxUpdatedControl ControlID="ProspectDiv" />
                        <telerik:AjaxUpdatedControl ControlID="ContactDiv" />
                        <telerik:AjaxUpdatedControl ControlID="AddressDiv" />
                        <telerik:AjaxUpdatedControl ControlID="AttributeDiv" />
                    </UpdatedControls>
                </telerik:AjaxSetting>

                <telerik:AjaxSetting AjaxControlID="NoteDiv">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="NoteDiv" />
                    </UpdatedControls>
                </telerik:AjaxSetting>

                <telerik:AjaxSetting AjaxControlID="ProspectDiv">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ActivityDiv" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ActivityDiv">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ActivityDiv" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="ContactDiv">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="ContactDiv" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="AddressDiv">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="AddressDiv" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="AttributeDiv">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="AttributeDiv" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

Now each panel has it's own little div to play ajax in.

HOWEVER, doing this has caused a problem with my app that I'm not sure how to fix.

On my page the top content in most panels is an Add and Edit button.

Clicking say the Add button opens a RadWindow with an Add item form.

When the user saves this item I register some javascript to the page that calls a method that 'use to', causes the all of the grids to refresh. Crucial if you just added one of the types to the database.

The Javascript that I am called that use to make all the grids refresh was this

function CloseAndRebind(args) {
      GetRadWindow().Close();
      GetRadWindow().BrowserWindow.refreshGrid(args);
  }

  function GetRadWindow() {
      var oWindow = null;
      if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog
      else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz az well)

      return oWindow;
  }

In a nutshell, putting each grid into it's own ajax div controlled by the RadAjaxManager has stopped them being reloaded when an item is Added or Edited.

If it's not one thing it's another.





 

[Maria Ilieva]

Hello Brad,

Could you please let me know how the client script is registered after the ajax request. Note that you should use one of the approaches provided in the following help topic:
http://www.telerik.com/help/aspnet-ajax/ajax-execute-custom-javascript.html

Regards,
Maria Ilieva
the Telerik team

[Brad]

Maria

When you click say the Add Contact button a RadWindow opens, the contents of which is the AddContact.aspx page. That page has on it a form. When you hit SAVE on the form this bit of server side code..

string jScript = "CloseAndRebind();";
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "", jScript, true);

... calls this bit of javascript when the page refreshes.

function CloseAndRebind(args) {
    GetRadWindow().Close();
    GetRadWindow().BrowserWindow.refreshGrid(args);

}

Which Ajax request are you talking about?

My issue is that after removing the UpdatePanels from this page, relying on the RadAjaxManager and putting my various detail tabs each in their own <div>, the javascript above as stopped rebinding the child grids.

The page you linked me too shows the use of this syntax.

RadAjaxManager1.ResponseScripts.Add

In my case the RadAjaxManger1 does not exist on my AddContact page. It is on the parent  page. So I'm not sure if that link is relevant.

[Maria Ilieva]

Hi Brad,

I'm not completely sure if I correctly understand your scenario and the exact architecture of the application you have. Could you please elaborate a bit more on this matter. Also I suppose that the problematic behaviour is caused by incorrect ajax settings. Could you please post your Ajax settings and the related code behind so we could further research on the problem.


Kind regards,
Maria Ilieva
the Telerik team

[Vignesh]

Hi maria....

Control Focus is Missing.. while working in Key Board Focus goes to Page not to the next control.. Here my code Snippets.
<telerik:RadAjaxManager ID="ajaxManager1" runat="server" UpdatePanelsRenderMode="Inline">

    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="ajaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="ddlCountry" />
                <telerik:AjaxUpdatedControl ControlID="ddlCity" />
                <telerik:AjaxUpdatedControl ControlID="ddlState" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="ddlCountry">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="ddlCity" />
                <telerik:AjaxUpdatedControl ControlID="ddlState" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="ddlState">
            <UpdatedControls>
                 <telerik:AjaxUpdatedControl ControlID="ddlCity" />
            </UpdatedControls>
        </telerik:AjaxSetting>
       </AjaxSettings>
</telerik:RadAjaxManager>

[Maria Ilieva]

Hello Vignesh,

Could you please elaborate a bit more on the focus issue you are facing. Does it appear only when ajax is enabled on the page. Also i would suggest you to use the RadAjaxManager.Focus() method to set the focus to particular control on the page after ajax request.

All the best,
Maria Ilieva
the Telerik team

[Vignesh]

Hi Maria thanks for ur reply...  But still the problem is there.. My problem is i want to update 3 drop down list box simultaneously for that i'm using telerik:RadAjaxManager . while i'm using this after i select the country i want to choose state but the focus is not moving to state control focus is moving to page. By pressing tab multiple times in keyboard after that only its focusing to state control.. I hope u will get this, can u help in this scenario . here my code Snippets.

<telerik:RadAjaxManager ID="ajaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ddlCountry">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ddlCity" UpdatePanelRenderMode="Inline" />
                    <telerik:AjaxUpdatedControl ControlID="ddlState" UpdatePanelRenderMode="Inline" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ddlState">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ddlCity" UpdatePanelRenderMode="Inline" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rdpDateofBirth">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="txtAge" UpdatePanelRenderMode="Inline" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

<tr>
                                        <td valign="top">
                                            Country
                                        </td>
                                        <td>
                                            <asp:DropDownList ID="ddlCountry" runat="server" Width="405px" Enabled="false" CssClass="txtBoxStyl"
                                                Height="25px">
                                            </asp:DropDownList>
                                            <asp:RequiredFieldValidator ID="rfvCountry" runat="server" ControlToValidate="ddlCountry"
                                                CssClass="error" ErrorMessage="Please select your country" InitialValue="0" Display="Dynamic" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td valign="top">
                                            State
                                        </td>
                                        <td>
                                            <asp:DropDownList ID="ddlState" runat="server" Width="405px" CssClass="txtBoxStyl"
                                                AutoPostBack="true" OnSelectedIndexChanged="ddlState_SelectedIndexChanged" Height="25px">
                                            </asp:DropDownList>
                                            <asp:RequiredFieldValidator ID="rfvState" runat="server" ControlToValidate="ddlState"
                                                CssClass="error" ErrorMessage="Please select your state" InitialValue="0" Display="Dynamic" />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td valign="top">
                                            City
                                        </td>
                                        <td>
                                            <asp:DropDownList ID="ddlCity" runat="server" Width="405px" CssClass="txtBoxStyl"
                                                Height="25px">
                                            </asp:DropDownList>
                                            <asp:RequiredFieldValidator ID="rfvCity" runat="server" ControlToValidate="ddlCity"
                                                CssClass="error" ErrorMessage="Please select your city" InitialValue="0" Display="Dynamic" />
                                        </td>
                                    </tr>

[Maria Ilieva]

Hello Vignesh,

I would suggest you to handle the ddlCountry SelectedIndexChanged event and call RadAjaxManager.FocusControl(ddlCity). Give this a try and let me know if this works for you.

Kind regards,
Maria Ilieva
the Telerik team

[Vignesh]

Maria...
   Thank u soo much its working Fine....

[Rishi]

Hi

I am using the same code snippet, or the similar.. have one drop down - whose selected value drives the loading and enabling of the other drop down.. 

But I am not able to proceed any further with the code because I keep getting this error soon after the first drop down list is loaded ?

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>). 

I am lost trying to achieve this, can you please give some input for the issue and If i need to define any asp panels around the drop down lists ?

 
 
 

[Shinu]

Hi Rishi,

Please have a look into the sample code snippet which works fine at my end.

ASPX:

<telerik:RadAjaxManager ID="ajaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="ddlCountry">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="ddlCity" UpdatePanelRenderMode="Inline" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
<asp:DropDownList ID="ddlCountry" runat="server" DataSourceID="SqlDataSource1" DataTextField="Countryname"
    AutoPostBack="true" OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged">
</asp:DropDownList>
<asp:DropDownList ID="ddlCity" runat="server">
</asp:DropDownList>

C#:

protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
{
    String connstring = WebConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
    SqlConnection conn = new SqlConnection(connstring);
    SqlDataAdapter adapter = new SqlDataAdapter();
    DropDownList country = (DropDownList)sender;
    adapter.SelectCommand = new SqlCommand("SELECT Cityname from City WHERE Countryname LIKE '" + country.SelectedItem.Text + "%'", conn);
    DataTable data = new DataTable();
    conn.Open();
    try
    {
        adapter.Fill(data);
        DropDownList city = (DropDownList)this.FindControl("ddlCity");
        city.DataSource = data;
        city.DataTextField = "Cityname";
        city.DataBind();
    }
    finally
    {
        conn.Close();
    }
}

Let me know if you have any concern.
Thanks,
Shinu.

[Rishi]

 This was what worked for my case... wrapping every combobox or control that would be updated inside of a span tag solved it for me.. For example the second drop down should not be standalone but rather be like this
<span id="Span1" runat="server">
<asp:DropDownList ID="ddlCity" runat="server" />
</span>