Conditional Display of Loading Panels

4 posts, 1 answers
  1. Paul J
    Paul J avatar
    101 posts
    Member since:
    Nov 2008

    Posted 26 Aug 2010 Link to this post

    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.
  2. Dimo
    Admin
    Dimo avatar
    8480 posts

    Posted 27 Aug 2010 Link to this post

    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
  3. Paul J
    Paul J avatar
    101 posts
    Member since:
    Nov 2008

    Posted 27 Aug 2010 Link to this post

    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!
  4. Answer
    Dimo
    Admin
    Dimo avatar
    8480 posts

    Posted 30 Aug 2010 Link to this post

    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
Back to Top