Hello, guys.
I'm thinking about the one thing.
During development of our aspx page it acquires controls which must be updated in this or that situation. And there are cases when one so to say "central" control ajaxifies many other controls. But those controls haven't to be updated each time the "central" control changes it's properties. I mean that some of them have to be updated in this particular case while others should be updated in other cases.
What we have with AjaxManager is that we setting those "dependant" controls as update targets and "central" control updates them all each time it changes itself. As some of those controls could be very complex themselves we're wasting noticable amount of time for nothing but redrawing of what is already drew inside the browser's window.
So I wonder if there any way to make AjaxManager more flexible and prevent updating some controls when situation does not suppose that those "dependable" controls will be changed in any manner?
With respect, Sergey.
I'm thinking about the one thing.
During development of our aspx page it acquires controls which must be updated in this or that situation. And there are cases when one so to say "central" control ajaxifies many other controls. But those controls haven't to be updated each time the "central" control changes it's properties. I mean that some of them have to be updated in this particular case while others should be updated in other cases.
What we have with AjaxManager is that we setting those "dependant" controls as update targets and "central" control updates them all each time it changes itself. As some of those controls could be very complex themselves we're wasting noticable amount of time for nothing but redrawing of what is already drew inside the browser's window.
So I wonder if there any way to make AjaxManager more flexible and prevent updating some controls when situation does not suppose that those "dependable" controls will be changed in any manner?
With respect, Sergey.
7 Answers, 1 is accepted
0
Hi Batoha,
RadAjaxManager does not automatically support this scenario. When you have a collection of updated controls for an AJAX settings, all the updated controls get wrapped in UpdatePanels. When an AJAX initiator makes an asynchronous postback, all the update panels specified in its AJAX setting are updated.
If I understand you correctly, you need to be able to update only some of these update panels at a time. Even though this scneario is not supported by any of the RadAjax controls, implementing it is relatively straightforward.
You need to wrap all your individually updated controls in RadAjaxPanels. Then you can initiate AJAX requests from individual AJAX panels from javascript. Thus, your central control can initiate requests from javascript, selectively updating one panel or another. Here is a sample page you can try:
Regards,
Veli
the Telerik team
RadAjaxManager does not automatically support this scenario. When you have a collection of updated controls for an AJAX settings, all the updated controls get wrapped in UpdatePanels. When an AJAX initiator makes an asynchronous postback, all the update panels specified in its AJAX setting are updated.
If I understand you correctly, you need to be able to update only some of these update panels at a time. Even though this scneario is not supported by any of the RadAjax controls, implementing it is relatively straightforward.
You need to wrap all your individually updated controls in RadAjaxPanels. Then you can initiate AJAX requests from individual AJAX panels from javascript. Thus, your central control can initiate requests from javascript, selectively updating one panel or another. Here is a sample page you can try:
<%@ Page Language="C#" AutoEventWireup="true" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script type="text/C#" runat="server"> protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) { RadGrid1.DataSource = SampleData; } public System.Data.DataTable SampleData { get { if (Session["_data"] == null || !Page.IsPostBack) { System.Data.DataTable table = new System.Data.DataTable(); table.Columns.Add("ID", Type.GetType("System.Int32")); table.Columns.Add("Name", Type.GetType("System.String")); table.Columns.Add("Date", Type.GetType("System.DateTime")); table.Columns.Add("Value", Type.GetType("System.Double")); Random rand = new Random(); for (int i = 0; i < 100; i++) { table.Rows.Add(i, "Item " + i.ToString(), DateTime.Today.AddDays(-10).AddDays(rand.NextDouble() * 20), rand.NextDouble() * 1000); } Session["_data"] = table; } return (System.Data.DataTable)Session["_data"]; } } protected void AjaxPanel_AjaxRequest(object sender, AjaxRequestEventArgs e) { switch (e.Argument) { case "RadGrid1": RadGrid1.MasterTableView.GetItems(GridItemType.Pager)[0].FireCommandEvent(RadGrid.PageCommandName, "Next"); break; case "RadCalendar1": RadCalendar1.SelectedDate = RadCalendar1.SelectedDate.AddDays(1); break; case "RadDatePicker1": RadDatePicker1.SelectedDate = RadDatePicker1.SelectedDate.Value.AddDays(1); break; } }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> #RadCalendar1_wrapper{display:inline;} </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadSkinManager runat="server" Skin="Hay"></telerik:RadSkinManager> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" AnimationDuration="300"> </telerik:RadAjaxLoadingPanel> <fieldset style="position:absolute; left:700px; top:100px; width:30px; padding:20px;"> <legend>Update through RadAjaxManager</legend> <input type="button" value="Update RadGrid" onclick="updatePanel('RadGrid1')" /> <input type="button" value="Update RadCalendar" onclick="updatePanel('RadCalendar1')" /> <input type="button" value="Update RadDatePicker" onclick="updatePanel('RadDatePicker1')" /> <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> <script type="text/javascript"> function updatePanel(id) { var panel = getParentAjaxPanel($get(id)); if (panel.constructor.getName() === "Telerik.Web.UI.RadAjaxPanel") { panel.ajaxRequest(id); } } function getParentAjaxPanel(element) { if (element.id && element.id.indexOf("Panel") > -1) { var panel = $find(element.id); return panel; } if (element !== document.body) { return getParentAjaxPanel(element.parentNode); } return null; } </script> </telerik:RadScriptBlock> </fieldset> <div> <telerik:RadAjaxPanel ID="GridPanel" runat="server" OnAjaxRequest="AjaxPanel_AjaxRequest" LoadingPanelID="RadAjaxLoadingPanel1" RenderMode="Inline"> <telerik:RadGrid Id="RadGrid1" runat="server" Width="600px" OnNeedDataSource="RadGrid1_NeedDataSource" AllowPaging="true"> </telerik:RadGrid> </telerik:RadAjaxPanel> <br /> <telerik:RadAjaxPanel ID="CalendarPanel" runat="server" OnAjaxRequest="AjaxPanel_AjaxRequest" LoadingPanelID="RadAjaxLoadingPanel1" RenderMode="Inline"> <telerik:RadCalendar ID="RadCalendar1" runat="server" SelectedDate="09/3/2010"> </telerik:RadCalendar> </telerik:RadAjaxPanel> <br /> <telerik:RadAjaxPanel ID="PickerPanel" runat="server" OnAjaxRequest="AjaxPanel_AjaxRequest" LoadingPanelID="RadAjaxLoadingPanel1" RenderMode="Inline"> <telerik:RadDatePicker ID="RadDatePicker1" runat="server" SelectedDate="09/3/2010"> </telerik:RadDatePicker> </telerik:RadAjaxPanel> </div> </form></body></html>Regards,
Veli
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0
Batoha
Top achievements
Rank 1
Rank 1
answered on 28 Sep 2010, 02:53 PM
Hello, Veli.
You're simplifying the problem. First thing coming to my mind is that I'd like to have a possibility to use server side data. For example SQL server queries results, session variable or some page properties. I could also have some complex calculations which would lead to update or not update some of the controls described as dependant on central control.
So this would be good if I could prevent updating particular control from the server side during execution of the request depending on some circumstances. On my opinion (may be I see situation wrong, though) this is just a question of one event which should arise while a final HTML code is being created for the control.
The second thing which is comming is that this would also let me not to use javascript which is always a "hotbed" of errors for me.
With respect, Sergey.
You're simplifying the problem. First thing coming to my mind is that I'd like to have a possibility to use server side data. For example SQL server queries results, session variable or some page properties. I could also have some complex calculations which would lead to update or not update some of the controls described as dependant on central control.
So this would be good if I could prevent updating particular control from the server side during execution of the request depending on some circumstances. On my opinion (may be I see situation wrong, though) this is just a question of one event which should arise while a final HTML code is being created for the control.
The second thing which is comming is that this would also let me not to use javascript which is always a "hotbed" of errors for me.
With respect, Sergey.
0
Hi Sergey,
I understand. You can try the following approach:
1. When you want to update some controls, send their IDs to the server.
2. Use RadAjaxManager's AjaxSettingCreating event to check if the ID of the current updated control is in the collection of control IDs sent from the client.
3. If the control ID is not in the collection, cancel the event (setting e.Canceled = true)
The result is that you cancel the creation of AJAX settings selectively on postback for those controls that should not be updated. The effect is that the markup of the update panels AJAX-ifying those excluded controls won't be sent to the browser.
A test page to demonstrate this would be:
You can note I cancel the AJAX settings for all controls except for the one that needs to be updated. In the browser, even though I have a loadign panel shown around all my AJAX-ified controls, I received the HTML markup only for the updated control whose AJAX setting creation has not been canceled. You can verify this by using a tool like Firebug to inspect the server response.
Note, however, that this scenario is not supported by the RadAjaxManager and we cannot guarantee it will work in all AJAX scenarios otherwise supported by the control. Still, you can give it a try and see how it fares for your needs.
Veli
the Telerik team
I understand. You can try the following approach:
1. When you want to update some controls, send their IDs to the server.
2. Use RadAjaxManager's AjaxSettingCreating event to check if the ID of the current updated control is in the collection of control IDs sent from the client.
3. If the control ID is not in the collection, cancel the event (setting e.Canceled = true)
The result is that you cancel the creation of AJAX settings selectively on postback for those controls that should not be updated. The effect is that the markup of the update panels AJAX-ifying those excluded controls won't be sent to the browser.
A test page to demonstrate this would be:
<%@ Page Language="C#" AutoEventWireup="true" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script type="text/C#" runat="server"> protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e) { RadGrid1.DataSource = SampleData; } public System.Data.DataTable SampleData { get { if (Session["_data"] == null || !Page.IsPostBack) { System.Data.DataTable table = new System.Data.DataTable(); table.Columns.Add("ID", Type.GetType("System.Int32")); table.Columns.Add("Name", Type.GetType("System.String")); table.Columns.Add("Date", Type.GetType("System.DateTime")); table.Columns.Add("Value", Type.GetType("System.Double")); Random rand = new Random(); for (int i = 0; i < 100; i++) { table.Rows.Add(i, "Item " + i.ToString(), DateTime.Today.AddDays(-10).AddDays(rand.NextDouble() * 20), rand.NextDouble() * 1000); } Session["_data"] = table; } return (System.Data.DataTable)Session["_data"]; } } protected void RadAjaxManager_AjaxRequest(object sender, AjaxRequestEventArgs e) { if (e.Argument.IndexOf("UpdateControl") > -1) { updatedControlId = e.Argument.Split(':')[1]; switch (updatedControlId) { case "RadGrid1": RadGrid1.MasterTableView.GetItems(GridItemType.Pager)[0].FireCommandEvent(RadGrid.PageCommandName, "Next"); break; case "RadCalendar1": RadCalendar1.SelectedDate = RadCalendar1.SelectedDate.AddDays(1); break; case "RadDatePicker1": RadDatePicker1.SelectedDate = RadDatePicker1.SelectedDate.Value.AddDays(1); break; } } } string updatedControlId = String.Empty; protected void RadAjaxManager1_AjaxSettingCreating(object sender, AjaxSettingCreatingEventArgs e) { if (!String.IsNullOrEmpty(updatedControlId) && e.Updated.ClientID != updatedControlId) { e.Canceled = true; } }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title></title> <style type="text/css"> #RadCalendar1_wrapper{display:inline;} </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <telerik:RadSkinManager runat="server" Skin="Hay"></telerik:RadSkinManager> <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" UpdatePanelsRenderMode="Inline" OnAjaxRequest="RadAjaxManager_AjaxRequest" OnAjaxSettingCreating="RadAjaxManager1_AjaxSettingCreating"> <AjaxSettings> <telerik:AjaxSetting AjaxControlID="RadAjaxManager1"> <UpdatedControls> <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> <telerik:AjaxUpdatedControl ControlID="RadCalendar1" /> <telerik:AjaxUpdatedControl ControlID="RadDatePicker1" /> </UpdatedControls> </telerik:AjaxSetting> </AjaxSettings> </telerik:RadAjaxManager> <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"> </telerik:RadAjaxLoadingPanel> <fieldset style="position:absolute; left:700px; top:100px; width:30px; padding:20px;"> <legend>Update through RadAjaxManager</legend> <input type="button" value="Update RadGrid" onclick="updateControl('RadGrid1')" /> <input type="button" value="Update RadCalendar" onclick="updateControl('RadCalendar1')" /> <input type="button" value="Update RadDatePicker" onclick="updateControl('RadDatePicker1')" /> <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server"> <script type="text/javascript"> function updateControl(id) { var manager = $find('<%= RadAjaxManager.GetCurrent(Page).ClientID %>'); manager.ajaxRequest("UpdateControl:" + id); } </script> </telerik:RadScriptBlock> </fieldset> <div> <telerik:RadGrid Id="RadGrid1" runat="server" Width="600px" OnNeedDataSource="RadGrid1_NeedDataSource" AllowPaging="true"> </telerik:RadGrid> <br /> <telerik:RadCalendar ID="RadCalendar1" runat="server" SelectedDate="09/3/2010"> </telerik:RadCalendar> <br /> <telerik:RadDatePicker ID="RadDatePicker1" runat="server" SelectedDate="09/3/2010"> </telerik:RadDatePicker> </div> </form></body></html>You can note I cancel the AJAX settings for all controls except for the one that needs to be updated. In the browser, even though I have a loadign panel shown around all my AJAX-ified controls, I received the HTML markup only for the updated control whose AJAX setting creation has not been canceled. You can verify this by using a tool like Firebug to inspect the server response.
Note, however, that this scenario is not supported by the RadAjaxManager and we cannot guarantee it will work in all AJAX scenarios otherwise supported by the control. Still, you can give it a try and see how it fares for your needs.
Veli
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0
Batoha
Top achievements
Rank 1
Rank 1
answered on 29 Sep 2010, 11:41 AM
Hello, Veli
Thanks for your code.
But I'm not sure I understand what you mean by:
"Note, however, that this scenario is not supported by the RadAjaxManager and we cannot guarantee it will work in all AJAX scenarios otherwise supported by the control."
You didn't use anything but AjaxManager's methods and events. How could it happen that it is not supported by RadAjaxManager?
With respect, Sergey
Thanks for your code.
But I'm not sure I understand what you mean by:
"Note, however, that this scenario is not supported by the RadAjaxManager and we cannot guarantee it will work in all AJAX scenarios otherwise supported by the control."
You didn't use anything but AjaxManager's methods and events. How could it happen that it is not supported by RadAjaxManager?
With respect, Sergey
0
Hello Sergey,
You are canceling the creation of an AJAX setting. This implies that the update panels of those settings will not be initialized. As a result, you will not get the regular AJAX behavior of a control whose update panel is not initialized.
Example. In the test page I attached, you can use the buttons in the right panel to selectively update either the RadGrid, RadCalendar or RadDatePicker instances. Using those buttons only, the AJAX behavior is maintained. However, if you:
1. Update RadCalendar through the button
2. Try to page RadGrid through its pager
you will notice the pager performs full postback. This is because the update panel for the RadGrid skipped initialization when you wanted to update the calendar only. All update panels that skipped initialization will not work on the next postback.
Regards,
Veli
the Telerik team
You are canceling the creation of an AJAX setting. This implies that the update panels of those settings will not be initialized. As a result, you will not get the regular AJAX behavior of a control whose update panel is not initialized.
Example. In the test page I attached, you can use the buttons in the right panel to selectively update either the RadGrid, RadCalendar or RadDatePicker instances. Using those buttons only, the AJAX behavior is maintained. However, if you:
1. Update RadCalendar through the button
2. Try to page RadGrid through its pager
you will notice the pager performs full postback. This is because the update panel for the RadGrid skipped initialization when you wanted to update the calendar only. All update panels that skipped initialization will not work on the next postback.
Regards,
Veli
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items
0
Batoha
Top achievements
Rank 1
Rank 1
answered on 29 Sep 2010, 12:15 PM
Hello, Veli.
Oh, I see now. That is what I was talking about. We just need to cancel redrawing portion of the process. So to to say last step which is probably most expensive from the timing point of view.
Ok. Here is nothing to discuss anymore, I suppose. This is not supported at the moment.
You could probably offer a suggestion to add this feature in future releases, could you?
With respect, Sergey.
Oh, I see now. That is what I was talking about. We just need to cancel redrawing portion of the process. So to to say last step which is probably most expensive from the timing point of view.
Ok. Here is nothing to discuss anymore, I suppose. This is not supported at the moment.
You could probably offer a suggestion to add this feature in future releases, could you?
With respect, Sergey.
0
Sure, I will forward your request to the dev team.
Good luck,
Veli
the Telerik team
Good luck,
Veli
the Telerik team
Do you want to have your say when we set our development plans?
Do you want to know when a feature you care about is added or when a bug fixed?
Explore the
Telerik Public Issue Tracking
system and vote to affect the priority of the items