Conditionally updating user controls from other controls with ajax

[Brett]

telerik Rad Controls version: v.2010.3.1317.20
Visual Studio 2005, using VB

I have a master page with a RadAjaxManger. Our content pages have RadAjaxManagerProxies.

My problem is simple I think, but I have not been able to find a solution after scouring your forum and support documents.
I have a page with a radgrid and 2 user controls. I want the user controls to be Ajaxified so they only update themselves and dont cause full page postbacks. I want the radgrid to be the same way, except when the user selects a row on the radgrid, I want to be able to update the user controls data through a code behind by setting the a property on the UC.

so far I have gotten close by using this javascript on the radgrid's ClientEvents OnRowSelected:

function MyAjaxRequest(sender, args)
        {
            var id = args.getDataKeyValue("AuditEntryID").toString();
            var ajaxObj = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
            ajaxObj.ajaxRequest("id:" + id);
        }

and on my user controls' code behinds:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    Dim manager As RadAjaxManager = RadAjaxManager.GetCurrent(Page)
    AddHandler manager.AjaxRequest, AddressOf manager_AjaxRequest
End Sub
Private Sub manager_AjaxRequest(ByVal sender As Object, ByVal e As AjaxRequestEventArgs)
    Dim result As String = e.Argument.Split(":")(1)
    AuditID = result
End Sub

stepping through the code behind breakpoints, the functionality works (setting AuditID property changes all the data in the user controls). But the user controls are not being updated at all on the page. I read somewhere on this site you could call ajaxRequest on a radajaxpanel, but it seems to do nothing call a panel's ajaxRequest method. Also,the client side documentation for RadAjaxPanel here makes no mention of AjaxRequest.
Fiddling around with ajaxRequestWithTarget (targetting my usercontrols) causes a full page postback and doesnt even call my manager_AjaxRequest(...) subroutines.

Additionally, I have to tie the ajaxpanel's to themselves in the proxy ajaxsettings, otherwise everything does a full page postback for some reason (i thought that radajaxpanel's were supposed to 'Ajaxify' their contents). If I omit the radajaxpanel's and instead tie the controls to themselves in the ajaxsettings, then my grid and usercontrols all have incorrect heights on the webpage which makes them virtually unusable.

I greatly appreciate any advice you can offer.

Here's some of the ASPX (some radgrid cols omitted, as well as datasources):

<asp:Content ID="Content1" ContentPlaceHolderID="cphMain" runat="Server">

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

    <script type="text/javascript" language="javascript">

        function LR_Collapsed()

        {

         var left = $find("<%=LeftPane.ClientID%>");

         var right = $find("<%=RightPane.ClientID%>");

         var bottom = $find("<%=BottomPane.ClientID%>");

         if (left.get_collapsed() && right.get_collapsed())

         {

            bottom.expand(1);

         }

        }

        function LR_Expanded()

        {

         var bottom = $find("<%=BottomPane.ClientID%>");

         bottom.collapse(1);

        }

         

         

        function MyAjaxRequest(sender, args)

        {

            var id = args.getDataKeyValue("AuditEntryID").toString();

            var ajaxObj = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");

            //ajaxObj.ajaxRequestWithTarget('<%=AccordionExisting1.UniqueID%>',"id:" + id);

            ajaxObj.ajaxRequest("id:" + id);

        }

 

    </script>

    </telerik:RadCodeBlock>

     

    <telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">

        <AjaxSettings>

            <telerik:AjaxSetting AjaxControlID="RadAjaxPanelExisting">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="RadAjaxPanelExisting" />

                </UpdatedControls>

            </telerik:AjaxSetting>

            <telerik:AjaxSetting AjaxControlID="RadAjaxPanelProposed">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="RadAjaxPanelProposed" />

                </UpdatedControls>

            </telerik:AjaxSetting>

            <telerik:AjaxSetting AjaxControlID="RadAjaxPanel1">

                <UpdatedControls>

                    <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" />

                </UpdatedControls>

            </telerik:AjaxSetting>

        </AjaxSettings>

    </telerik:RadAjaxManagerProxy>

 <telerik:RadSplitter ID="RadSplitter1" runat="server" Skin="Office2007" Width="100%" Height="100%">

 <telerik:RadPane ID="LeftPane" runat="server" Scrolling="None" Width="25%" OnClientCollapsed="LR_Collapsed" OnClientExpanded="LR_Expanded">

 <telerik:RadAjaxPanel id="RadAjaxPanelExisting" runat="server" height="100%" width="100%">

     <uc2:AccordionExisting ID="AccordionExisting1" runat="server" />

     </telerik:RadAjaxPanel>

 </telerik:RadPane>

 <telerik:RadSplitBar ID="RadSplitBar1" runat="server" CollapseMode="Forward" Width="25px" EnableTheming="True" />

 <telerik:RadPane ID="MiddlePane" runat="server" Scrolling="None">   

  

 <telerik:RadSplitter ID="RadSplitterMid" runat="server" Skin="Office2007" Width="100%" Height="100%" Orientation="Horizontal">

 <telerik:RadPane ID="TopPane" runat="server" Scrolling="None" Height = "0%">

 </telerik:RadPane>

 <telerik:RadSplitBar ID="RadSplitBar3" runat="server" CollapseMode="Forward" Width="25px" />

 <telerik:RadPane ID="BottomPane" runat="server" Scrolling="None">

     <telerik:RadAjaxPanel id="RadAjaxPanel1" runat="server" height="100%" width="100%">

     <telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlDataSourceAudit" AutoGenerateColumns="False" GridLines="None" Width="100%" Height = "100%" AllowPaging="False" PageSize="8">

         <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default">

         </HeaderContextMenu>

         <MasterTableView DataSourceID="SqlDataSourceAudit" CommandItemDisplay="Top" ClientDataKeyNames="AuditEntryID">

             <CommandItemSettings ExportToPdfText="Export to Pdf" />

             <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

             </RowIndicatorColumn>

             <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

             </ExpandCollapseColumn>

             <Columns>

                 <telerik:GridTemplateColumn HeaderText="Building" UniqueName="Building" FilterControlAltText="Filter Building column">  

                  <ItemTemplate> 

                      <telerik:RadComboBox ID="rcbBuilding" runat="server" AllowCustomText="True" Filter="Contains" Width="100%">

                      </telerik:RadComboBox>

                  </ItemTemplate> 

                     <HeaderStyle Width="100px" />

                </telerik:GridTemplateColumn>

                


                 <telerik:GridBoundColumn DataField="AuditEntryID" UniqueName="AuditEntryID"  FilterControlAltText="Filter AuditEntryID column"

                     Display="False">

                 </telerik:GridBoundColumn>

                <telerik:GridButtonColumn ConfirmText="Delete this audit entry?" ConfirmDialogType="RadWindow"

                  ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"

                  UniqueName="DeleteColumn" ImageUrl="~/images/16/remove_16.png" FilterControlAltText="Filter DeleteColumn column">

                  <ItemStyle HorizontalAlign="Center"/>

                  <HeaderStyle Width="25px" />

                </telerik:GridButtonColumn>

             </Columns>

             <EditFormSettings>

                 <EditColumn FilterControlAltText="Filter EditCommandColumn column">

                 </EditColumn>

             </EditFormSettings>

             <CommandItemTemplate>

                 <table>

                  <tr>

                    <td align="left">

                     <asp:ImageButton ID="btnAdd"

                      Tooltip="Add" CommandName="Insert" Runat="server" ImageUrl = "~/images/16/add_16.png"></asp:ImageButton>

                     <asp:ImageButton ID="btnSave"

                      Tooltip="Save" CommandName="Save" Runat="server" ImageUrl = "~/images/16/floppy_disk_16.png"></asp:ImageButton>

                    </td>

                    <td align="right">

                     <asp:ImageButton ID="btnRefresh" Tooltip="Refresh data"

                      CommandName="Cancel" Runat="server" ImageUrl="~/images/16/refresh_16.png"></asp:ImageButton>

                    </td>

                  </tr>

                 </table>

            </CommandItemTemplate>

         </MasterTableView>

         <FilterMenu EnableImageSprites="False">

         </FilterMenu>

         <ClientSettings>

             <Selecting AllowRowSelect="True" />

             <Resizing AllowColumnResize="True" />

             <Scrolling AllowScroll="True" UseStaticHeaders="True" />

             <ClientEvents OnRowSelected="MyAjaxRequest" />

         </ClientSettings>

         <PagerStyle Mode="Slider" />

     </telerik:RadGrid>

     </telerik:RadAjaxPanel>

 </telerik:RadPane></telerik:RadSplitter>

  

 </telerik:RadPane>

 <telerik:RadSplitBar ID="RadSplitBar2" runat="server" CollapseMode="Backward" Width="25px" />

 <telerik:RadPane ID="RightPane" runat="server" Scrolling="None" Width="25%" OnClientCollapsed="LR_Collapsed" OnClientExpanded="LR_Expanded">

 <telerik:RadAjaxPanel id="RadAjaxPanelProposed" runat="server" height="100%" width="100%">

     <uc3:AccordionProposed ID="AccordionProposed1" runat="server" />

     </telerik:RadAjaxPanel>

 </telerik:RadPane>

</telerik:RadSplitter>

</asp:Content>

[Cori]

Hello Brett,

The first problem is that you're not supposed to mix RadAjaxPanel with RadAjaxManager, you have to use one over the other. I would suggest keeping RadAjaxManager. So in that case you would change your RadAjaxPanels to standard asp:Panel controls and update your settings accordingly.

The reason your ajaxRequest call does nothing is because the RadAjaxPanel the user control is contained in is the one who handles the ajax requests, not the RadAjaxManager, thus the reason they shouldn't be combined in the same page.

Lastly, another reason why your RadAjaxManager's ajaxRequest method does nothing is because you didn't setup the RadAjaxManager in the AjaxSettings to update the user controls, so it will not do anything on the page, even though it raises the AjaxRequest event in the code-behind.

I hope that helps.

[Brett]

Cori,
That helps, thanks for the timely response.
If I change the RadAjaxPanels to asp:Panels and use the RadAjaxManagerProxy to update those Panels, all the controls in these panels have terribly incorrect heights, e.g. my Radgrid is so short that I cannot see anything below its header, which makes it unusable. It also effects my user controls heights. I have determined that the cause of this is the fact that I've added the Panels to the settings in the RadAjaxManagerProxy (when I remove each Ajaxsetting, the associated panel returns to its normal size).
Has anyone seen anything like this before? Perhaps a bug with using Ajax-enabled Panels inside of a RadSplitter's RadPanes?

[Cori]

Hello Brett,

The reason for the height issue when you put the Panel as the UpdatedControl, is because the panel now gets wrapped by a RadAjaxPanel, which has no height set, so the panel can't take 100% of it. I think if you set the UpdatePanelHeight property of the UpdatedControl that it would solve that issue.

I hope that helps.

[Brett]

Thanks! Everything seems to work ok now.