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

How can i do conditional ajax updates from a tree view in a usercontrol

1 Answer 61 Views

Ajax

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

Temp asked on 20 Oct 2011, 12:38 AM

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

<%@ 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/>";

}

1 Answer, 1 is accepted

answered on 24 Oct 2011, 09:18 AM

Hello Temp,

To achieve your goal, and control the appearance of the RadAjaxLoadingPanel, I suggest that you do not set the loading panel ID directly in the ajax setting, but show and hide the loading panel manually.
See the below demos:
http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/explicitshowhide/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx

Best wishes,
Iana Tsolova
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now