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

Rad AJAX Control Update indepenence

2 Answers 62 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Mark
Top achievements
Rank 1
Mark asked on 09 Oct 2008, 04:12 PM

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 Answers, 1 is accepted

Sort by
0
Kevin Babcock
Top achievements
Rank 1
answered on 13 Oct 2008, 03:18 AM
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:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %> 
 
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"
     <title>RadAjaxPanel with the RadGrid Example</title> 
</head> 
<body> 
    <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" Runat="server" /> 
 
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"
            <telerik:RadGrid ID="RadGrid1" runat="server"  
                AllowPaging="True" 
                DataSourceID="SqlDataSource1"  
                GridLines="None" 
                PageSize="3"
                <MasterTableView  
                    AutoGenerateColumns="False" 
                    DataKeyNames="EmployeeID"  
                    DataSourceID="SqlDataSource1"
                    <Columns> 
                        <telerik:GridBoundColumn DataField="EmployeeID" /> 
                        <telerik:GridBoundColumn DataField="LastName" /> 
                        <telerik:GridBoundColumn DataField="FirstName" /> 
                        <telerik:GridBoundColumn DataField="HireDate" /> 
                        <telerik:GridBoundColumn DataField="Address" /> 
                        <telerik:GridBoundColumn DataField="City" /> 
                        <telerik:GridBoundColumn DataField="Region" /> 
                        <telerik:GridBoundColumn DataField="PostalCode" /> 
                        <telerik:GridBoundColumn DataField="Country" /> 
                    </Columns> 
                </MasterTableView> 
            </telerik:RadGrid> 
             
            <asp:Button ID="Button1" runat="server"  
                Text="Reset RadGrid 1" onclick="Button1_Click" />    
        </telerik:RadAjaxPanel> 
             
        <telerik:RadAjaxPanel ID="RadAjaxPanel2" runat="server"
            <telerik:RadGrid ID="RadGrid2" runat="server" 
                AllowPaging="True" 
                DataSourceID="SqlDataSource2"  
                GridLines="None" 
                PageSize="3"
                <MasterTableView  
                    AutoGenerateColumns="False"  
                    DataKeyNames="CustomerID"  
                    DataSourceID="SqlDataSource2"
                    <Columns> 
                        <telerik:GridBoundColumn DataField="CustomerID" /> 
                        <telerik:GridBoundColumn DataField="CompanyName" /> 
                        <telerik:GridBoundColumn DataField="Address" /> 
                        <telerik:GridBoundColumn DataField="City" /> 
                        <telerik:GridBoundColumn DataField="Region" /> 
                        <telerik:GridBoundColumn DataField="PostalCode" /> 
                        <telerik:GridBoundColumn DataField="Country" /> 
                        <telerik:GridBoundColumn DataField="Phone" /> 
                    </Columns> 
                </MasterTableView> 
            </telerik:RadGrid>       
             
            <asp:Button ID="Button2" runat="server"  
                Text="Reset RadGrid 2" onclick="Button2_Click" /> 
        </telerik:RadAjaxPanel> 
 
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"  
            SelectCommand="SELECT * FROM [Employees]"
        </asp:SqlDataSource> 
         
        <asp:SqlDataSource ID="SqlDataSource2" runat="server"  
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"  
            SelectCommand="SELECT * FROM [Customers]"
        </asp:SqlDataSource> 
         
    </form> 
</body> 
</html> 
 

using System; 
 
public partial class _Default : System.Web.UI.Page 
    protected void Button1_Click(object sender, EventArgs e) 
    { 
        RadGrid1.CurrentPageIndex = 0
        RadGrid1.DataBind(); 
    } 
 
    protected void Button2_Click(object sender, EventArgs e) 
    { 
        RadGrid2.CurrentPageIndex = 0
        RadGrid2.DataBind(); 
    } 
 



RadAjaxManager example:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %> 
 
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %> 
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"
    <title>RadAjaxManager with the RadGrid Example</title> 
</head> 
<body> 
    <form id="form1" runat="server"
        <telerik:RadScriptManager ID="RadScriptManager1" Runat="server" /> 
 
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"
            <AjaxSettings> 
                <telerik:AjaxSetting AjaxControlID="RadGrid1"
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
                <telerik:AjaxSetting AjaxControlID="RadGrid2"
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="RadGrid2" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
                <telerik:AjaxSetting AjaxControlID="Button1"
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
                <telerik:AjaxSetting AjaxControlID="Button2"
                    <UpdatedControls> 
                        <telerik:AjaxUpdatedControl ControlID="RadGrid2" /> 
                    </UpdatedControls> 
                </telerik:AjaxSetting> 
            </AjaxSettings> 
        </telerik:RadAjaxManager> 
 
        <telerik:RadGrid ID="RadGrid1" runat="server"  
            AllowPaging="True" 
            DataSourceID="SqlDataSource1"  
            GridLines="None" 
            PageSize="3"
            <MasterTableView  
                AutoGenerateColumns="False" 
                DataKeyNames="EmployeeID"  
                DataSourceID="SqlDataSource1"
                <Columns> 
                    <telerik:GridBoundColumn DataField="EmployeeID" /> 
                    <telerik:GridBoundColumn DataField="LastName" /> 
                    <telerik:GridBoundColumn DataField="FirstName" /> 
                    <telerik:GridBoundColumn DataField="HireDate" /> 
                    <telerik:GridBoundColumn DataField="Address" /> 
                    <telerik:GridBoundColumn DataField="City" /> 
                    <telerik:GridBoundColumn DataField="Region" /> 
                    <telerik:GridBoundColumn DataField="PostalCode" /> 
                    <telerik:GridBoundColumn DataField="Country" /> 
                </Columns> 
            </MasterTableView> 
        </telerik:RadGrid> 
         
        <telerik:RadGrid ID="RadGrid2" runat="server" 
            AllowPaging="True" 
            DataSourceID="SqlDataSource2"  
            GridLines="None" 
            PageSize="3"
            <MasterTableView  
                AutoGenerateColumns="False"  
                DataKeyNames="CustomerID"  
                DataSourceID="SqlDataSource2"
                <Columns> 
                    <telerik:GridBoundColumn DataField="CustomerID" /> 
                    <telerik:GridBoundColumn DataField="CompanyName" /> 
                    <telerik:GridBoundColumn DataField="Address" /> 
                    <telerik:GridBoundColumn DataField="City" /> 
                    <telerik:GridBoundColumn DataField="Region" /> 
                    <telerik:GridBoundColumn DataField="PostalCode" /> 
                    <telerik:GridBoundColumn DataField="Country" /> 
                    <telerik:GridBoundColumn DataField="Phone" /> 
                </Columns> 
            </MasterTableView> 
        </telerik:RadGrid> 
         
        <asp:Button ID="Button1" runat="server"  
            Text="Reset RadGrid 1" onclick="Button1_Click" /> 
         
        <asp:Button ID="Button2" runat="server"  
            Text="Reset RadGrid 2" onclick="Button2_Click" /> 
 
        <asp:SqlDataSource ID="SqlDataSource1" runat="server"  
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"  
            SelectCommand="SELECT * FROM [Employees]"
        </asp:SqlDataSource> 
         
        <asp:SqlDataSource ID="SqlDataSource2" runat="server"  
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"  
            SelectCommand="SELECT * FROM [Customers]"
        </asp:SqlDataSource> 
 
    </form> 
</body> 
</html> 
 

using System; 
 
public partial class _Default : System.Web.UI.Page 
    protected void Button1_Click(object sender, EventArgs e) 
    { 
        RadGrid1.CurrentPageIndex = 0; 
        RadGrid1.DataBind(); 
    } 
 
    protected void Button2_Click(object sender, EventArgs e) 
    { 
        RadGrid2.CurrentPageIndex = 0; 
        RadGrid2.DataBind(); 
    } 
 


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

Sincerely,
Kevin Babcock
0
Mark
Top achievements
Rank 1
answered on 13 Oct 2008, 12:53 PM
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
Tags
General Discussions
Asked by
Mark
Top achievements
Rank 1
Answers by
Kevin Babcock
Top achievements
Rank 1
Mark
Top achievements
Rank 1
Share this question
or