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

how to refresh controls using RadAjaxManager from codebehind.

9 Answers 1220 Views

Ajax

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

Ravi asked on 16 Nov 2010, 08:34 AM

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.

9 Answers, 1 is accepted

answered on 22 Nov 2010, 12:28 PM

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.

answered on 22 Nov 2010, 01:05 PM

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.

answered on 24 Nov 2010, 12:41 PM

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

Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 24 Nov 2010, 01:55 PM

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

answered on 26 Nov 2010, 03:17 PM

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

answered on 24 Aug 2011, 06:57 AM

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>

answered on 24 May 2012, 04:50 PM

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

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.