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

2 posts, 0 answers
  1. Temp
    Temp avatar
    55 posts
    Member since:
    May 2007

    Posted 19 Oct 2011 Link to this post

    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">
     
    <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/>";
        }
     
    }

     

  2. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 24 Oct 2011 Link to this post

    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
Back to Top