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

Waiting for an Ajax Request in progress to end.

4 Answers 137 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 21 Aug 2014, 02:48 PM
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.

4 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 22 Aug 2014, 08:09 AM
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.
0
Daniel
Top achievements
Rank 1
answered on 27 Aug 2014, 01:20 PM
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.
0
Accepted
Eyup
Telerik team
answered on 01 Sep 2014, 01:13 PM
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.

 
0
Daniel
Top achievements
Rank 1
answered on 03 Sep 2014, 11:09 AM
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.
Tags
Ajax
Asked by
Daniel
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Daniel
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or