Rad AJAX Control Update indepenence

3 posts, 0 answers
  1. Mark
    Mark avatar
    2 posts
    Member since:
    Oct 2008

    Posted 09 Oct 2008 Link to this post

    I am working on an AJAX page with two radgrid controls.
    The update response times for the two controls are very different, one short , one very long.
    No matter how I hook up grids the ajax update of both controls is determined by the longest delay.

    I have the controls on two separate RadAjaxPanels and I have created two buttons to use javascript to separately fire an ajaxManager.ajaxRequestWithTarget for one or the other RadAjaxPanel.

    ie button 1 fires panel 1 holding grid 1
       button  2 fires panel 2 holding grid 2

    No matter which panel is fired, both data requests are made and the page waits for the longest to complete before updating anything.  Oddly, only the appropriate grid actually updates, but the data for the other grid must be cached, since clicking the other button updates the page without another data request.

    I need these controls to be truly independent, or else why bother with Ajax at all.

    Does anyone have an example of page where the controls are truly independent?

  2. Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 12 Oct 2008 Link to this post

    Hello Mark,

    I am sorry you are having difficulty implementing AJAX functionality with your RadGrid. I am going to assume (without having seen your code) that you are either firing both AJAX requests at the same time or are firing one and then firing the other before the first completes. What you need to understand about Microsoft's ASP.NET AJAX framework (which is what the RadControls are built on top of) is that once an AJAX request is made, any subsequent request that is made before it completes will cancel it. So if you click the button which updates RadGrid #1 and then click the button which updates RadGrid #2 before RadGrid #1 is updated, the first request will be cancelled.

    Also, let me explain briefly how the RadAjax controls work. The RadAjaxPanel updates any content inside of it when an AJAX request is made to the server either by a postback initiated from a control inside of it or from another control which calls the ajaxRequest() or ajaxRequestWithTarget() functions. So if you have multiple controls inside of a RadAjaxPanel and an AJAX request is sent, all controls inside of the RadAjaxPanel will update when the request completes. You can learn more about the RadAjaxPanel here.

    On the other hand, the RadAjaxManager allows you to specify controls which you want to update and which controls initiates the AJAX request. This allows for a much higher level of control. So you can hook a Button control up with one or more RadGrid controls (or any other control) and clicking on that Button will cause the controls it is associated with to update when the AJAX request completes. You can learn more about the RadAjaxManager here.

    I have created simple examples below which demonstrate how to use both RadAjax controls to update two RadGrids.

    RadAjaxPanel example:

    1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %> 
    2  
    3 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    4  
    5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    6  
    7 <html xmlns="http://www.w3.org/1999/xhtml" > 
    8 <head runat="server"
    9      <title>RadAjaxPanel with the RadGrid Example</title> 
    10 </head> 
    11 <body> 
    12     <form id="form1" runat="server"
    13         <telerik:RadScriptManager ID="RadScriptManager1" Runat="server" /> 
    14  
    15         <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"
    16             <telerik:RadGrid ID="RadGrid1" runat="server"  
    17                 AllowPaging="True" 
    18                 DataSourceID="SqlDataSource1"  
    19                 GridLines="None" 
    20                 PageSize="3"
    21                 <MasterTableView  
    22                     AutoGenerateColumns="False" 
    23                     DataKeyNames="EmployeeID"  
    24                     DataSourceID="SqlDataSource1"
    25                     <Columns> 
    26                         <telerik:GridBoundColumn DataField="EmployeeID" /> 
    27                         <telerik:GridBoundColumn DataField="LastName" /> 
    28                         <telerik:GridBoundColumn DataField="FirstName" /> 
    29                         <telerik:GridBoundColumn DataField="HireDate" /> 
    30                         <telerik:GridBoundColumn DataField="Address" /> 
    31                         <telerik:GridBoundColumn DataField="City" /> 
    32                         <telerik:GridBoundColumn DataField="Region" /> 
    33                         <telerik:GridBoundColumn DataField="PostalCode" /> 
    34                         <telerik:GridBoundColumn DataField="Country" /> 
    35                     </Columns> 
    36                 </MasterTableView> 
    37             </telerik:RadGrid> 
    38              
    39             <asp:Button ID="Button1" runat="server"  
    40                 Text="Reset RadGrid 1" onclick="Button1_Click" />    
    41         </telerik:RadAjaxPanel> 
    42              
    43         <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server"
    44             <telerik:RadGrid ID="RadGrid2" runat="server" 
    45                 AllowPaging="True" 
    46                 DataSourceID="SqlDataSource2"  
    47                 GridLines="None" 
    48                 PageSize="3"
    49                 <MasterTableView  
    50                     AutoGenerateColumns="False"  
    51                     DataKeyNames="CustomerID"  
    52                     DataSourceID="SqlDataSource2"
    53                     <Columns> 
    54                         <telerik:GridBoundColumn DataField="CustomerID" /> 
    55                         <telerik:GridBoundColumn DataField="CompanyName" /> 
    56                         <telerik:GridBoundColumn DataField="Address" /> 
    57                         <telerik:GridBoundColumn DataField="City" /> 
    58                         <telerik:GridBoundColumn DataField="Region" /> 
    59                         <telerik:GridBoundColumn DataField="PostalCode" /> 
    60                         <telerik:GridBoundColumn DataField="Country" /> 
    61                         <telerik:GridBoundColumn DataField="Phone" /> 
    62                     </Columns> 
    63                 </MasterTableView> 
    64             </telerik:RadGrid>       
    65              
    66             <asp:Button ID="Button2" runat="server"  
    67                 Text="Reset RadGrid 2" onclick="Button2_Click" /> 
    68         </telerik:RadAjaxPanel> 
    69  
    70         <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
    71             ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"  
    72             SelectCommand="SELECT * FROM [Employees]"
    73         </asp:SqlDataSource> 
    74          
    75         <asp:SqlDataSource ID="SqlDataSource2" runat="server"  
    76             ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"  
    77             SelectCommand="SELECT * FROM [Customers]"
    78         </asp:SqlDataSource> 
    79          
    80     </form> 
    81 </body> 
    82 </html> 
    83  

    1 using System; 
    2  
    3 public partial class _Default : System.Web.UI.Page 
    4
    5     protected void Button1_Click(object sender, EventArgs e) 
    6     { 
    7         RadGrid1.CurrentPageIndex = 0
    8         RadGrid1.DataBind(); 
    9     } 
    10  
    11     protected void Button2_Click(object sender, EventArgs e) 
    12     { 
    13         RadGrid2.CurrentPageIndex = 0
    14         RadGrid2.DataBind(); 
    15     } 
    16
    17  



    RadAjaxManager example:

    1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %> 
    2  
    3 <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
    4  
    5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    6  
    7 <html xmlns="http://www.w3.org/1999/xhtml" > 
    8 <head runat="server"
    9     <title>RadAjaxManager with the RadGrid Example</title> 
    10 </head> 
    11 <body> 
    12     <form id="form1" runat="server"
    13         <telerik:RadScriptManager ID="RadScriptManager1" Runat="server" /> 
    14  
    15         <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
    16             <AjaxSettings> 
    17                 <telerik:AjaxSetting AjaxControlID="RadGrid1"
    18                     <UpdatedControls> 
    19                         <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
    20                     </UpdatedControls> 
    21                 </telerik:AjaxSetting> 
    22                 <telerik:AjaxSetting AjaxControlID="RadGrid2"
    23                     <UpdatedControls> 
    24                         <telerik:AjaxUpdatedControl ControlID="RadGrid2" /> 
    25                     </UpdatedControls> 
    26                 </telerik:AjaxSetting> 
    27                 <telerik:AjaxSetting AjaxControlID="Button1"
    28                     <UpdatedControls> 
    29                         <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
    30                     </UpdatedControls> 
    31                 </telerik:AjaxSetting> 
    32                 <telerik:AjaxSetting AjaxControlID="Button2"
    33                     <UpdatedControls> 
    34                         <telerik:AjaxUpdatedControl ControlID="RadGrid2" /> 
    35                     </UpdatedControls> 
    36                 </telerik:AjaxSetting> 
    37             </AjaxSettings> 
    38         </telerik:RadAjaxManager> 
    39  
    40         <telerik:RadGrid ID="RadGrid1" runat="server"  
    41             AllowPaging="True" 
    42             DataSourceID="SqlDataSource1"  
    43             GridLines="None" 
    44             PageSize="3"
    45             <MasterTableView  
    46                 AutoGenerateColumns="False" 
    47                 DataKeyNames="EmployeeID"  
    48                 DataSourceID="SqlDataSource1"
    49                 <Columns> 
    50                     <telerik:GridBoundColumn DataField="EmployeeID" /> 
    51                     <telerik:GridBoundColumn DataField="LastName" /> 
    52                     <telerik:GridBoundColumn DataField="FirstName" /> 
    53                     <telerik:GridBoundColumn DataField="HireDate" /> 
    54                     <telerik:GridBoundColumn DataField="Address" /> 
    55                     <telerik:GridBoundColumn DataField="City" /> 
    56                     <telerik:GridBoundColumn DataField="Region" /> 
    57                     <telerik:GridBoundColumn DataField="PostalCode" /> 
    58                     <telerik:GridBoundColumn DataField="Country" /> 
    59                 </Columns> 
    60             </MasterTableView> 
    61         </telerik:RadGrid> 
    62          
    63         <telerik:RadGrid ID="RadGrid2" runat="server" 
    64             AllowPaging="True" 
    65             DataSourceID="SqlDataSource2"  
    66             GridLines="None" 
    67             PageSize="3"
    68             <MasterTableView  
    69                 AutoGenerateColumns="False"  
    70                 DataKeyNames="CustomerID"  
    71                 DataSourceID="SqlDataSource2"
    72                 <Columns> 
    73                     <telerik:GridBoundColumn DataField="CustomerID" /> 
    74                     <telerik:GridBoundColumn DataField="CompanyName" /> 
    75                     <telerik:GridBoundColumn DataField="Address" /> 
    76                     <telerik:GridBoundColumn DataField="City" /> 
    77                     <telerik:GridBoundColumn DataField="Region" /> 
    78                     <telerik:GridBoundColumn DataField="PostalCode" /> 
    79                     <telerik:GridBoundColumn DataField="Country" /> 
    80                     <telerik:GridBoundColumn DataField="Phone" /> 
    81                 </Columns> 
    82             </MasterTableView> 
    83         </telerik:RadGrid> 
    84          
    85         <asp:Button ID="Button1" runat="server"  
    86             Text="Reset RadGrid 1" onclick="Button1_Click" /> 
    87          
    88         <asp:Button ID="Button2" runat="server"  
    89             Text="Reset RadGrid 2" onclick="Button2_Click" /> 
    90  
    91         <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
    92             ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"  
    93             SelectCommand="SELECT * FROM [Employees]"
    94         </asp:SqlDataSource> 
    95          
    96         <asp:SqlDataSource ID="SqlDataSource2" runat="server"  
    97             ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"  
    98             SelectCommand="SELECT * FROM [Customers]"
    99         </asp:SqlDataSource> 
    100  
    101     </form> 
    102 </body> 
    103 </html> 
    104  

    1 using System; 
    2  
    3 public partial class _Default : System.Web.UI.Page 
    4
    5     protected void Button1_Click(object sender, EventArgs e) 
    6     { 
    7         RadGrid1.CurrentPageIndex = 0; 
    8         RadGrid1.DataBind(); 
    9     } 
    10  
    11     protected void Button2_Click(object sender, EventArgs e) 
    12     { 
    13         RadGrid2.CurrentPageIndex = 0; 
    14         RadGrid2.DataBind(); 
    15     } 
    16
    17  


    I hope this has helped you. I you have further questions, please let me know.

    Sincerely,
    Kevin Babcock
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark
    Mark avatar
    2 posts
    Member since:
    Oct 2008

    Posted 13 Oct 2008 Link to this post

    Thanks Kevin,

    So I guess it's back to frames so I can separate the execution paths. Given the LIFO nature of the asp.ajax framework it's a wonder anyone bothers.

    In any case, thanks for the info.

    Mark Singletary
Back to Top