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.
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
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:
C#:
Thanks,
Princy.
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.
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
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
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:
Regards,
Daniel.
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.