how to refresh controls using RadAjaxManager from codebehind.

[Ravi]

RadAjaxManager

<telerik:RadAjaxManager ID="ajaxManager" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="gvMemberList">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="gvMemberList" LoadingPanelID="ajaxLoadingPanel" />

                </UpdatedControls>
            </telerik:AjaxSetting>
         <telerik:AjaxSetting AjaxControlID="btnRefresh">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="gvMemberList" LoadingPanelID="ajaxLoadingPanel" />
                    <telerik:AjaxUpdatedControl ControlID="tabDetails" LoadingPanelID="ajaxLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
 </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel ID="ajaxLoadingPanel" runat="server" Skin="Default">
    </telerik:RadAjaxLoadingPanel>


<asp:ImageButton ID="btnRefresh" ImageUrl="~/Images/refresh.png" OnClick="btnRefresh_Click"
                            runat="server" ToolTip="Refresh all list." />

<telerik:RadGrid ID="gvMemberList" runat="server" AllowPaging="True" OnInit="gvMemberList_Init"
                            AllowCustomPaging="true" AllowSorting="True" SkinsPath="RadControls/Skins" EnableAJAX="True"
                            OnSortCommand="gvMemberList_SortCommand" OnPageIndexChanged="gvMemberList_PageIndexChanged"
                            OnItemDataBound="gvMemberList_ItemDataBound" OnItemCommand="gvMemberList_ItemCommand"
                            GridLines="None" EnableEmbeddedSkins="true" PageSize="10" Visible="true" ShowStatusBar="true"
                            LoadingTemplateTransparency="45" Width="90%" CellSpacing="0" CellPadding="0"
                            AutoGenerateColumns="false" AllowFilteringByColumn="True" Skin="WebBlue">
                            <GroupingSettings CaseSensitive="false" />

                            <MasterTableView DataKeyNames="EmpID" FilterItemStyle-Width="1%" AllowFilteringByColumn="true"
                                AllowMultiColumnSorting="false">
                                <Columns>

                                    <telerik:GridBoundColumn DataField="EmpName" HeaderText="EmployeeName" UniqueName="EmployeeName"
                                        HeaderStyle-HorizontalAlign="Center" FilterControlWidth="25px">
                                        <ItemStyle HorizontalAlign="Center" Width="1%" />
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn DataField="Address" HeaderText="Emploee Address" UniqueName="Emploee Address"
                                        HeaderStyle-HorizontalAlign="Center" FilterControlWidth="25px">
                                        <ItemStyle HorizontalAlign="Center" Width="1%" />
                                    </telerik:GridBoundColumn>
                     </Columns>
                            </MasterTableView>
 </telerik:RadGrid>

 <telerik:RadTabStrip ID="tabMemberDetails" runat="server" Skin="WebBlue" MultiPageID="tabDetails"
                            SelectedIndex="0" Align="Justify" ClickSelectedTab="true" EnableViewState="false"
                            ReorderTabsOnSelect="true" Width="1139px" OnTabClick="tabMemberDetails_Click"
                            ScrollChildren="true">
                        </telerik:RadTabStrip>
 <telerik:RadMultiPage ID="tabDetails" ScrollBars="Auto" runat="server" SelectedIndex="0"
                            CssClass="pageView" Width="1137px" Height="470px">
 </telerik:RadMultiPage>

protected void tabMemberDetails_Click(object sender, RadTabStripEventArgs e)
{
StatusNotes control = LoadControl("~/Controls/StatusNotes.ascx") as StatusNotes;
control.btnSaveClk += new StatusNotes.btnStatus_Click(control_btnSaveClk);
}

 void control_btnSaveClk(object sender, EventArgs e)
{
     btnRefresh_Click(this, new ImageClickEventArgs(0,0));
}

protected void btnRefresh_Click(object sender, ImageClickEventArgs e)
        {
            gvMemberList.Rebind();
        }

I have a problem to refresh my grid using RadAjaxManager from the button click of usercontrol. I have provided a very little portion of my code here. I have a grid,tab control and a refresh button. For partial post-back, I have used RadAjaxManger. When Rows are clicked on the grid, the grid is refreshed. Similarly, when refresh button is clicked grid and tabControl is partially refreshed thru AjaxManager. Till now there is no problem while performing Ajaxifying. Now i want to refresh the grid when user clicks a button in a usercontrol. I am dynamically loading different usercontrol inside tabMemberDetails_Click based on Tabs clicked. For Simplicity lets assume I have a button inside the dynamically loaded usercontrol and btnSaveClk is the event exposed from that usercontrol. I am calling btnRefresh_Click on occurence of that button click. when i debugged the code, everthing works, btnRefresh_Click is called and NeedDataSource of gvMemberList is called and the datasource shows the lates data. But the problem is the Grid doesnt show the lates data. The problem is obvious, Its just that the controls are not being refreshed because btnRefresh didnt occur by clicking on refresh button but another event called it.
I am having this problem for long time and I need to get over it very soon. Is it true that we can refresh control with the ones specified in the AjaxSettings in RadAjaxManager.Can anyone help me.

[Tsvetina]

Hi Ravi,

Please, take a look at this help article that explains how to add AJAX setting programmatically to RadAjaxManager and let us know if any of your questions remain unaswered afterwards.

All the best,
Tsvetina
the Telerik team

[Ravi]

Thanks Tsvetina for your reply. But I think i missed something or you didnt understand what i am asking. The link you have provided shows the way to programmatically set AjaxSettings. But its not only what I am looking for. I need to programmatically add the AjaxSettings but the control is inside the usercontrol. As shown in my code, I am dynamically loading the usercontrol depending upon the TabClicked, now i want to add some of the controls of these usercontrol in the RadAjaxManager in my main page. Could you please help me with it?

Also I found in this link http://www.telerik.com/help/aspnet-ajax/ajxusercontrols.html which says I cant have RadAjaxmanger in my main page and usercontrol but I am using it in my main page and usercontrols but they are working.

[Ravi]

I want to make my objective clear to you. I have a usercontrol which I load dynamically. I have a grid inside it. Now when I change the page index, I want the RadAjaxLoadingPanel to span through the whole browser. I have accomplished it if I click on the button or any other controls like RadTab which are in the main page. I just want this functionality when I fire event from my usercontrols aswell. For this I tried this way.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                    <script language="javascript" type="text/javascript">
                        function GetControlID() {
                            var control = "<%=ajaxLoadingPanel1.ClientID%>";
                            RequestStart1(control);
                        }
                    </script>
                </telerik:RadCodeBlock>

<telerik:RadAjaxLoadingPanel ID="ajaxLoadingPanel1" runat="server" Skin="Default"
                    IsSticky="true" Style="position: absolute; z-index: 101; top: 0; left: 0;">
                </telerik:RadAjaxLoadingPanel>

                <telerik:RadAjaxManager ID="ajaxManager" runat="server">
                   <ClientEvents OnRequestStart="GetControlID" />
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="RgChronologicalInfo">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="tabDetails" LoadingPanelID="ajaxLoadingPanel1" />
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>

<telerik:RadGrid ID="RgChronologicalInfo" runat="server" Width="99%" AutoGenerateColumns="false"
                    OnPageIndexChanged="RgChronologicalInfo_PageIndexChanged" OnNeedDataSource="RgChronologicalInfo_NeedDataSource"
                    AllowCustomPaging="true" PageSize="10" AllowPaging="true" LoadingTemplateTransparency="45"
                    EnableAJAX="True" ShowStatusBar="true" EnableViewState="false">
                    <MasterTableView>
                        <Columns>
                          .....................
                        </Columns>
                    </MasterTableView>
                    <PagerStyle AlwaysVisible="true" Mode="NumericPages"></PagerStyle>
                </telerik:RadGrid>

As you can see, I have used RadAjaxManager in my usercontrols and in the OnRequestStart I am passing clientID of the RadAjaxmanager to the external .js file. In the .js file I get the the height and width of the screen and set the height and width of RadAjaxmanger accordingly but the problem is when i change the page index, it says GetControlID() is undefined. I dont know what is the problem and is it ok to use RadAjaxmanger in Main page and usercontrols. Hoping for the replies.

[Tsvetina]

Hello Ravi,

My suggestion is that you use just one RadAjaxManager on the page, set its DefaultLoadingPanelID property to point to the loading panel in question and follow the logic from this CodeLibrary article in order to show it over the whole page.

Additionally, there is no need to ajaxify the RadAjaxLoadingPanel, this could only lead to problems with its behavior. As a whole, it is not recommended to set any controls as updated controls in AJAX settings.

When having a RadAjaxManager only in the aspx page and you want to make it ajaxify controls in the user control, you just need to get a reference to these controls in the main page's Page_Load event and make AJAX setting for them programmatically just as described in the help article you linked to, e.g.

protected void Page_Load(object sender, EventArgs e)
   {
       //Get the WebUserControl
       UserControl MyControl = (UserControl)Page.FindControl("WebUserControl1");

       //Get user control's button
       Button MyButton = (Button)MyControl.FindControl("Button1");

       //Add the necessary AJAX setting programmatically
       RadAjaxManager1.AjaxSettings.AddAjaxSetting(MyButton, Label1);
   }

For controls both residing in one and the same page/user control, you can use RadAjaxManagerProxy control.

All the best,
Tsvetina
the Telerik team

[Ravi]

Thank you so much Tsvetina

I Understood everything you said. Now I have only one confusion left. You said I need to get a reference to controls in the main page's Page_Load event. As you can see in my first post that I am loading different Usercontrols in tabMemberDetails_Click event as shown below depending upon the values of e.Tab.Level,e.Tab.Tabs.Count,e.Tab.PageViewID, e.Tab.Index(Where e is the object of RadTabStripEventArgs). How can I do this in pageLoad event?. If I had to load only one usercontrol everytime then I would have done it in PreInit but this is not the case. I have read in many forums that dynamic controls have to be loaded in PreInit Method. Can you help me how to do this in those events.

With Regards
Ravi

[Tsvetina]

Hi Ravi,

Have you tried the other way around - wire Page_Load in each user control, get a reference to the RadAjaxManager from the main page (using RadAjaxManager.GetCurrent(Page)) and also to the RadGrid (Page.FindControl("RadGrid1")) that needs to be refreshed and add a setting there. This way you will have the setting added dynamically for each control when it is loaded.

I hope this gets things working for you.

Best wishes,
Tsvetina
the Telerik team

[Ram]

Hii greetings..
I'm using radcontrols in my asp.net website. I have placed the radgrid inside asp:Panle. I'm refreshing the Panel on button click event. For this I have used Triggers of updatepanel like as below.

<asp:UpdatePanel ID="calLogUpdpnl" runat="server" UpdateMode="Conditional">
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="imgbtn_GenerateRpt" EventName="Click" />
        </Triggers>
        <ContentTemplate>
      <asp:Panel ID="bodyPnl" runat="server">
      .....................
</ContentTemplate>
</asp:UpdatePanel>

[Jennifer]

Hi Tsvetina,
I have a similar problem and I'm trying to use the method suggested here, but it doesn't seem to be working. Can I use "this" for the ajaxifiedControl, or do I have to somehow find the control on the Page?

[Tsvetina]

Hello Johan,

When adding dynamic settings you should do it in an event which is triggered on each postback, so it's best to be Page_Load or Page_PreRender. Also,  what type of object would 'this' be and in what context? Most probably such approach would not work.
Can you describe in what control hierarchy you need to access the control needed for the AjaxSetting?

All the best,
Tsvetina
the Telerik team