Waiting for an Ajax Request in progress to end.

5 posts, 1 answers
  1. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 21 Aug 2014 Link to this post

    Hello,

    I am working on a project with a RadGrid and a RadTreeView.
    Each time the user clicks on a node it fills a RadGrid with data.
    The controls work in an Ajax environment.
    Pressing on a RadTreeView node influences the RadGrid.
    Sometimes it takes time to load data into the RadGrid.

    The project requirement is that when user clicks on a node in the RadTreeView during an AJAX request/postback, show a JS alert to the user to wait for the reply and only then make another request.

    How to perform this?

    Thank,
    Daniel.
  2.
  3. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 Aug 2014 in reply to Daniel Link to this post

    Hi Daniel,

    Please have a look into the sample code snippet which works fine at my end.

    ASPX:
    <telerik:RadTreeView ID="rtreeviewDemo" runat="server" OnNodeClick="rtreeviewDemo_NodeClick">
        <Nodes>
            <telerik:RadTreeNode Text="Node1">
            </telerik:RadTreeNode>
            <telerik:RadTreeNode Text="Node2">
            </telerik:RadTreeNode>
        </Nodes>
    </telerik:RadTreeView>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="rtreeviewDemo">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="rtreeviewDemo" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    C#:
    protected void rtreeviewDemo_NodeClick(object sender, Telerik.Web.UI.RadTreeNodeEventArgs e)
    {
        string script = "function f(){alert('Click event is under processing,please wait for some time'); Sys.Application.remove_load(f);}Sys.Application.add_load(f);";
        ScriptManager.RegisterStartupScript(Page, Page.GetType(), "key", script, true);
    }

    Thanks,
    Princy.
  5. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 27 Aug 2014 in reply to Princy Link to this post

    Hi Princy,

    Thank you for offering a solution.

    In your code, the message always shows when the user presses on a node.

    The project requirements are:
    The JS alert will show only when an Ajax – postback occurs right now. If an Ajax – postback has finished,
    pressing on a node won’t show the alert.

    I have attached a video that shows the project requirements. [See Video]

    Thank you,
    Daniel.
  7. Answer
    Eyup
    Admin
    Eyup avatar
    4080 posts

    Posted 01 Sep 2014 Link to this post

    Hi Daniel,

    To achieve the requested functionality, using javascript you can cancel the node-clicking event of the treelist  depending on whether the loading panel is currently visible or not. Alternatively, you can just display a loading panel over the treelist itself, too.

    Hope this helps.

    In addition, please note that using DataBind() to bind the grid is not recommended. Performing complex grid operations such as Inserting, Deleting, Updating, Hierarchy relations, Grouping, Exporting, Paging, Sorting, Filtering, etc. require accommodating appropriate database operations.  Therefore, we suggest you to avoid Simple Databinding and strongly recommend the use of more advanced databinding methods, which automatically handle the aforementioned functions:
    Declarative DataSource
    Advanced Data Binding

    You can check this article for a similar implementation:
    http://www.telerik.com/help/aspnet-ajax/grid-changing-structure-dynamically.html

    Regards,
    Eyup
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  8.
  9. Daniel
    Daniel avatar
    159 posts
    Member since:
    Feb 2014

    Posted 03 Sep 2014 in reply to Eyup Link to this post

    Hi Eyup,

    Your solution worked!!
    Thank you very much!

    I added a Boolean onPostBack flag and its work perfect:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                <script type="text/javascript">
                    function OnClientNodeChecking(sender, eventArgs) {
                         
                        if (onPostBack) {
                            alert('wait the process to end');
                            eventArgs.set_cancel(true);
                        }
                    }
      
                    var onPostBack = false;
                    function OnClientHiding(sender, eventArgs) {
                        onPostBack = false;
                    }
               
                    function OnClientShowing(sender, eventArgs) {
                        onPostBack = true;
                    }
      
                </script>
            </telerik:RadCodeBlock>
     
     
     <telerik:RadTreeView ID="RadTreeView1" Runat="server" OnClientNodeClicking="OnClientNodeChecking">
                               <Nodes>
                                  <telerik:RadTreeNode runat="server" Text="Root RadTreeNode1">
                                </telerik:RadTreeNode>
                                <telerik:RadTreeNode runat="server" Text="Root RadTreeNode2">
                                </telerik:RadTreeNode>
                            </Nodes>
                        </telerik:RadTreeView>
     
     <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default" OnClientShowing="OnClientShowing" OnClientHiding="OnClientHiding"></telerik:RadAjaxLoadingPanel>

    Regards,
    Daniel.
Back to Top