RadAjaxManager and, UpdatePanels problem

15 posts, 0 answers
  1. Brad
    Brad avatar
    93 posts
    Member since:
    Jan 2011

    Posted 11 Oct 2011 Link to this post


    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?



  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 12 Oct 2011 Link to this post

    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
  3. Brad
    Brad avatar
    93 posts
    Member since:
    Jan 2011

    Posted 18 Oct 2011 Link to this post

    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.





  4. Brad
    Brad avatar
    93 posts
    Member since:
    Jan 2011

    Posted 21 Oct 2011 Link to this post

    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.





     




  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 21 Oct 2011 Link to this post

    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
  6. Brad
    Brad avatar
    93 posts
    Member since:
    Jan 2011

    Posted 23 Oct 2011 Link to this post

    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.

  7. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 26 Oct 2011 Link to this post

    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
  8. Vignesh
    Vignesh avatar
    12 posts
    Member since:
    Nov 2011

    Posted 28 Nov 2011 Link to this post

    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>

  9. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 30 Nov 2011 Link to this post

    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
  10. Vignesh
    Vignesh avatar
    12 posts
    Member since:
    Nov 2011

    Posted 10 Dec 2011 Link to this post

    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>

  11. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 12 Dec 2011 Link to this post

    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
  12. Vignesh
    Vignesh avatar
    12 posts
    Member since:
    Nov 2011

    Posted 13 Dec 2011 Link to this post

    Maria...
       Thank u soo much its working Fine....
  13. Rishi
    Rishi avatar
    43 posts
    Member since:
    Feb 2010

    Posted 22 Dec 2013 Link to this post

    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 ?





     
     
     
  14. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 23 Dec 2013 Link to this post

    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.
  15. Rishi
    Rishi avatar
    43 posts
    Member since:
    Feb 2010

    Posted 15 Jan 2014 Link to this post



     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>






     
Back to Top