Hi I am working on a project which has a user control containing a Telerik Tree View on a page, with an information panel on the main page. The user can traverse the tree in the usercontrol which contains folders and items, and if they click an item it loads the information for that item into the main page.
This is handled by using delegates in the user control, and subscribing to that bubbled event in the master page.
I have wrapped this up with a RadAjaxManager, and I want the information panel to have a LoadingPanel displayed over it ONLY when an item is selected, but not a folder. In the user control we do not raise the event if the item is a folder.
I haven't had any luck with this.
I have created a project which displays this behaviour. You can see that when the folders are clicked they also display the loading panel over the main panel, which is what I want to prevent. This is because in production environment, clicking a folder expands the folder but does not reload the main information, but having the loading panel put over it gives the user the impression that it is reloaded.
Can you please help me get this working?
My project contains two files, Default.aspx and FolderView.ascx
Default.aspx.cs
This is handled by using delegates in the user control, and subscribing to that bubbled event in the master page.
I have wrapped this up with a RadAjaxManager, and I want the information panel to have a LoadingPanel displayed over it ONLY when an item is selected, but not a folder. In the user control we do not raise the event if the item is a folder.
I haven't had any luck with this.
I have created a project which displays this behaviour. You can see that when the folders are clicked they also display the loading panel over the main panel, which is what I want to prevent. This is because in production environment, clicking a folder expands the folder but does not reload the main information, but having the loading panel put over it gives the user the impression that it is reloaded.
Can you please help me get this working?
My project contains two files, Default.aspx and FolderView.ascx
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register TagPrefix="testlab" TagName="treeview" Src="~/FolderView.ascx" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html
xmlns
=
"http://www.w3.org/1999/xhtml"
>
<
head
runat
=
"server"
>
<
title
></
title
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
telerik:RadScriptManager
id
=
"RadScriptManager1"
runat
=
"server"
/>
<
telerik:RadAjaxManager
ID
=
"RadAjaxManager1"
runat
=
"server"
>
<
AjaxSettings
>
<
telerik:AjaxSetting
AjaxControlID
=
"pnlTreeView1"
>
<
UpdatedControls
>
<
telerik:AjaxUpdatedControl
ControlID
=
"pnlTreeView1"
/>
<
telerik:AjaxUpdatedControl
ControlID
=
"pnl1"
LoadingPanelID
=
"LoadingPanel1"
/>
</
UpdatedControls
>
</
telerik:AjaxSetting
>
</
AjaxSettings
>
</
telerik:RadAjaxManager
>
<
telerik:RadAjaxLoadingPanel
ID
=
"LoadingPanel1"
runat
=
"server"
Skin
=
"Windows7"
/>
<
div
>
<
table
>
<
tr
>
<
td
valign
=
"top"
>
<
asp:Panel
ID
=
"pnlTreeView1"
runat
=
"server"
>
<
testlab:treeview
runat
=
"server"
id
=
"treeview1"
OnItemSelected
=
"treeview1_ItemSelected"
>
</
testlab:treeview
>
</
asp:Panel
>
</
td
>
<
td
valign
=
"top"
>
<
asp:Panel
ID
=
"pnl1"
runat
=
"server"
Width
=
"450"
Height
=
"450"
>
Select a node.<
br
/>
<
asp:Label
ID
=
"lbl1"
runat
=
"server"
/>
</
asp:Panel
>
</
td
>
</
tr
>
</
table
>
</
div
>
</
form
>
</
body
>
</
html
>
Default.aspx.cs
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
public
partial
class
_Default : System.Web.UI.Page
{
protected
void
Page_Load(
object
sender, EventArgs e)
{
}
protected
void
treeview1_ItemSelected(
object
sender, LAB_FolderView.ItemSelectedEventArgs e)
{
lbl1.Text += e.SeletedItemText +
" clicked, category = "
+ e.StorageItemType +
"<br/>"
;
}
}
FolderView.ascx
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="FolderView.ascx.cs" Inherits="LAB_FolderView" %>
<
telerik:RadAjaxManagerProxy
ID
=
"RadAjaxManagerProxy1"
runat
=
"server"
/>
<
div
style
=
"border:solid 1px black;"
>
<
telerik:RadTreeView
ID
=
"RadTreeView1"
runat
=
"server"
OnNodeExpand
=
"RadTreeView1_NodeExpand"
OnNodeClick
=
"RadTreeView1_NodeClick"
Width
=
"300"
Height
=
"300"
>
<
Nodes
>
<
telerik:RadTreeNode
Value
=
"FRUIT"
Text
=
"Fruit"
Expanded
=
"false"
Category
=
"FOLDER"
ImageUrl
=
"folder.gif"
ExpandedImageUrl
=
"FolderOpen.gif"
>
<
Nodes
>
<
telerik:RadTreeNode
Value
=
"ORANGE"
Text
=
"Orange"
Category
=
"ITEM"
/>
<
telerik:RadTreeNode
Value
=
"BANANA"
Text
=
"Banana"
Category
=
"ITEM"
/>
<
telerik:RadTreeNode
Value
=
"APPLE"
Text
=
"Apple"
Category
=
"ITEM"
/>
<
telerik:RadTreeNode
Value
=
"TAMARILLO"
Text
=
"Tamarillo"
Category
=
"ITEM"
/>
</
Nodes
>
</
telerik:RadTreeNode
>
<
telerik:RadTreeNode
Value
=
"VEGETABLE"
Text
=
"Vegetable"
Expanded
=
"false"
Category
=
"FOLDER"
ImageUrl
=
"folder.gif"
ExpandedImageUrl
=
"FolderOpen.gif"
>
<
Nodes
>
<
telerik:RadTreeNode
Value
=
"LETTUCE"
Text
=
"Lettuce"
Category
=
"ITEM"
/>
<
telerik:RadTreeNode
Value
=
"POTATO"
Text
=
"Potato"
Category
=
"ITEM"
/>
<
telerik:RadTreeNode
Value
=
"BROCCOLI"
Text
=
"Brocolli"
Category
=
"ITEM"
/>
<
telerik:RadTreeNode
Value
=
"ONION"
Text
=
"Onion"
Category
=
"ITEM"
/>
</
Nodes
>
</
telerik:RadTreeNode
>
</
Nodes
>
</
telerik:RadTreeView
>
<
div
id
=
"divDebug"
runat
=
"server"
/>
</
div
>
FolderView.ascx.cs
using
System;
using
System.Collections.Generic;
using
System.Linq;
using
System.Web;
using
System.Web.UI;
using
System.Web.UI.WebControls;
using
Telerik;
using
Telerik.Web.UI;
public
partial
class
LAB_FolderView : System.Web.UI.UserControl
{
#region Event Bubbling
public
enum
StorageFolderItemType
{
FOLDER,
ITEM
}
public
class
ItemSelectedEventArgs : EventArgs
{
public
string
SelectedItemsValue {
get
;
set
; }
public
string
SeletedItemText {
get
;
set
; }
public
StorageFolderItemType StorageItemType {
get
;
set
; }
}
public
class
ItemDeletedEventArgs : EventArgs
{
public
string
SelectedItemsValue {
get
;
set
; }
public
string
SeletedItemText {
get
;
set
; }
public
StorageFolderItemType StorageItemType {
get
;
set
; }
}
// Item Selected
public
delegate
void
ItemSelectedEventHandler(
object
sender, ItemSelectedEventArgs e);
public
event
ItemSelectedEventHandler ItemSelected;
protected
virtual
void
OnItemSelected(RadTreeNodeEventArgs e)
{
ItemSelectedEventArgs args =
new
ItemSelectedEventArgs();
args.SelectedItemsValue = e.Node.Value;
args.SeletedItemText = e.Node.Text;
args.StorageItemType = e.Node.Category ==
"FOLDER"
? StorageFolderItemType.FOLDER : StorageFolderItemType.ITEM;
ItemSelected(
this
, args);
}
#endregion
protected
void
Page_Load(
object
sender, EventArgs e)
{
}
protected
void
RadTreeView1_NodeClick(
object
sender, RadTreeNodeEventArgs e)
{
Debug(e.Node.Text +
" clicked, category = "
+ e.Node.Category);
if
(e.Node.Category ==
"ITEM"
)
{
// LoadIDPDevelopmentNeedItem(Int32.Parse(e.Node.Value.TrimStart("I".ToCharArray())), VIEW_MODE.VIEW);
OnItemSelected(e);
}
}
protected
void
RadTreeView1_NodeExpand(
object
sender, RadTreeNodeEventArgs e)
{
Debug(
"NodeExpand called on "
+ e.Node.ID);
}
protected
void
Debug(
object
o)
{
divDebug.InnerHtml += o.ToString() +
"<br/>"
;
}
}