Telerik Forums / UI for ASP.NET AJAX
This is a migrated thread and some comments may be shown as answers.

Conditional Display of Loading Panels

3 Answers 142 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Paul J
Top achievements
Rank 1
Paul J asked on 26 Aug 2010, 06:49 PM
Scenario:

2 RadGrids

Users can page both RadGrids, and both are AJAXIFIED on themselves, so paging throws up the loading panel overlayed on the grid and done through the ajax call. RadGrid1 rows can be dragged to RadGrid2. Doing so then shows the loading panel overtop both grids, which is fine. the problem is when paging RadGrid1, the loading panel gets displayed overtop RadGrid 2. Now, I understand this is happening because of my AjaxManager updatecontrols code, having RadGrid1 updating itself and RadGrid2.

Is there a way to say "if only paging (or any particular action) RadGrid1, only show its loading panel and not the loading panel for RadGrid2? In essence, it would be conditionally showing the loading panels for the Grids.

 AjaxManager code is below.

<telerik:AjaxSetting AjaxControlID="RadGrid1">
           <UpdatedControls>           
               <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
               <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1" />                   
           </UpdatedControls>
   </telerik:AjaxSetting>  
 <telerik:AjaxSetting AjaxControlID="RadGrid2">
           <UpdatedControls>                   
               <telerik:AjaxUpdatedControl ControlID="RadGrid2" LoadingPanelID="RadAjaxLoadingPanel1" />                     
           </UpdatedControls>
   </telerik:AjaxSetting> 

Thanks.

3 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 27 Aug 2010, 10:07 AM
Hello Paul,

You can use the event arguments of the following client events to determine what kind of an AJAX request is being executed:

+ RadAjaxManager's OnRequestStart
+ RadAjaxLoadingPanel's OnClientShowing

Please inspect the demo below:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
 
<script runat="server">
 
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 15;
        string colName = "Column";
 
        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }
 
        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();
 
            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }
 
        (sender as RadGrid).DataSource = dt;
    }
 
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
<head runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
 
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista" OnClientShowing="MyClientShowing" />
 
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <ClientEvents OnRequestStart="MyRequestStart" />
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                <telerik:AjaxUpdatedControl ControlID="RadGrid2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadGrid2">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
 
<script type="text/javascript">
 
var isRadGrid1Initiator = false;
 
function MyRequestStart(sender, args)
{
    if (args.get_eventArgument().indexOf("RowDropped") == -1 && args.get_eventTarget().indexOf("RadGrid1") != -1)
        isRadGrid1Initiator = true;
}  
 
function MyClientShowing(sender, args)
{
    if (isRadGrid1Initiator && args.get_updatedElement().id.indexOf("RadGrid2") != -1)
    {
        args.set_cancelNativeDisplay(true);
        isRadGrid1Initiator = false;
    }
}
 
</script>
 
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Skin="Vista"
    AllowPaging="true"
    OnNeedDataSource="RadGrid_NeedDataSource">
    <ClientSettings AllowRowsDragDrop="true">
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
</telerik:RadGrid>
 
<br /><br />
 
<telerik:RadGrid
    ID="RadGrid2"
    runat="server"
    Skin="Vista"
    AllowPaging="true"
    OnNeedDataSource="RadGrid_NeedDataSource">
     
</telerik:RadGrid>
 
</form>
</body>
</html>


Greetings,
Dimo
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
Paul J
Top achievements
Rank 1
answered on 27 Aug 2010, 08:48 PM
Dimo,

thanks so much. code worked great. I now realize I need to expand this a little as I also have a button in RadGrid1 that, when clicked, affects RadGrid2, but with your code it does not show the loading panel overtop radGrid2 when the button is pressed.

so how would i tell it to show the loading panel (over RadGrid2) also when this grid button is pressed?

RadGrid1 column's code that has the button:

<telerik:GridButtonColumn UniqueName="gbcAdd" Text="" HeaderText="Add" ItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center"
   ButtonType="PushButton" ButtonCssClass="btnAdd" Visible="true" CommandName="AddUser">                  
    </telerik:GridButtonColumn>

Thanks!
0
Accepted
Dimo
Telerik team
answered on 30 Aug 2010, 08:32 AM
Hi Paul,

Since it is hard to determine that the RadGrid1 button column has triggered the AJAX request, you need to attach a click handler to all buttons from the column on the server and use an additional flag:

<%@ Page Language="C#" %>
<%@ Import Namespace="System.Data" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
  
<script runat="server">
  
    protected void RadGrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable dt = new DataTable();
        DataRow dr;
        int colsNum = 4;
        int rowsNum = 15;
        string colName = "Column";
  
        for (int j = 1; j <= colsNum; j++)
        {
            dt.Columns.Add(String.Format("{0}{1}", colName, j));
        }
  
        for (int i = 1; i <= rowsNum; i++)
        {
            dr = dt.NewRow();
  
            for (int k = 1; k <= colsNum; k++)
            {
                dr[String.Format("{0}{1}", colName, k)] = String.Format("{0}{1} Row{2}", colName, k, i);
            }
            dt.Rows.Add(dr);
        }
  
        (sender as RadGrid).DataSource = dt;
    }
 
    protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            ((e.Item as GridDataItem)["gbcAdd"].Controls[0] as Button).OnClientClick = "isRadGrid1ButtonPressed = true;";
        }
    }
     
</script>
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
  
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Vista" OnClientShowing="MyClientShowing" />
  
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
    <ClientEvents OnRequestStart="MyRequestStart" />
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" />
                <telerik:AjaxUpdatedControl ControlID="RadGrid2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="RadGrid2">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>
  
<script type="text/javascript">
  
var isRadGrid1Initiator = false;
var isRadGrid1ButtonPressed = false;
  
function MyRequestStart(sender, args)
{
    if (!isRadGrid1ButtonPressed && args.get_eventArgument().indexOf("RowDropped") == -1 && args.get_eventTarget().indexOf("RadGrid1") != -1)
        isRadGrid1Initiator = true;
} 
  
function MyClientShowing(sender, args)
{
    if (isRadGrid1Initiator && args.get_updatedElement().id.indexOf("RadGrid2") != -1)
    {
        args.set_cancelNativeDisplay(true);
        isRadGrid1Initiator = false;
    }
    isRadGrid1ButtonPressed = false;
}
  
</script>
  
<telerik:RadGrid
    ID="RadGrid1"
    runat="server"
    Skin="Vista"
    AllowPaging="true"
    OnNeedDataSource="RadGrid_NeedDataSource" OnItemCreated="RadGrid1_ItemCreated">
    <ClientSettings AllowRowsDragDrop="true">
        <Selecting AllowRowSelect="true" />
    </ClientSettings>
    <MasterTableView>
        <Columns>
            <telerik:GridButtonColumn UniqueName="gbcAdd" Text=" " HeaderText="Add"
                ButtonType="PushButton" ButtonCssClass="rgAdd" Visible="true" CommandName="AddUser">                 
            </telerik:GridButtonColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>
  
<br /><br />
  
<telerik:RadGrid
    ID="RadGrid2"
    runat="server"
    Skin="Vista"
    AllowPaging="true"
    OnNeedDataSource="RadGrid_NeedDataSource">
      
</telerik:RadGrid>
  
</form>
</body>
</html>


All the best,
Dimo
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
Tags
Ajax
Asked by
Paul J
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Paul J
Top achievements
Rank 1
Share this question
or