This is a migrated thread and some comments may be shown as answers.

RadAjaxManager and, UpdatePanels problem

14 Answers 896 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Brad
Top achievements
Rank 1
Brad asked on 11 Oct 2011, 08:00 AM

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?



14 Answers, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 12 Oct 2011, 02:11 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Brad
Top achievements
Rank 1
answered on 19 Oct 2011, 03:20 AM
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.





0
Brad
Top achievements
Rank 1
answered on 21 Oct 2011, 05:57 AM
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.





 




0
Maria Ilieva
Telerik team
answered on 21 Oct 2011, 10:55 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Brad
Top achievements
Rank 1
answered on 23 Oct 2011, 11:58 PM
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.

0
Maria Ilieva
Telerik team
answered on 26 Oct 2011, 10:07 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Vignesh
Top achievements
Rank 1
answered on 28 Nov 2011, 12:49 PM
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>

0
Maria Ilieva
Telerik team
answered on 30 Nov 2011, 04:46 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Vignesh
Top achievements
Rank 1
answered on 10 Dec 2011, 08:39 AM
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>

0
Maria Ilieva
Telerik team
answered on 12 Dec 2011, 04:34 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
0
Vignesh
Top achievements
Rank 1
answered on 13 Dec 2011, 07:02 AM
Maria...
   Thank u soo much its working Fine....
0
Rishi
Top achievements
Rank 1
answered on 22 Dec 2013, 11:50 PM
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 ?





 
 
 
0
Shinu
Top achievements
Rank 2
answered on 23 Dec 2013, 06:46 AM
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.
0
Rishi
Top achievements
Rank 1
answered on 15 Jan 2014, 07:46 PM


 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>






 
Tags
General Discussions
Asked by
Brad
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Brad
Top achievements
Rank 1
Vignesh
Top achievements
Rank 1
Rishi
Top achievements
Rank 1
Shinu
Top achievements
Rank 2
Share this question
or