Waiting for an Ajax Request in progress to end.

[Daniel]

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.

[Princy]

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.

[Daniel]

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.

[Eyup]

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

 

 

[Daniel]

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.