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

TreeView w/Checkboxes and Loading Panel

4 Answers 248 Views

TreeView

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

4 Answers, 1 is accepted

answered on 20 Jun 2008, 08:52 PM

Hi Jeremy,

Check out the RadAjaxLoadingPanel control - I think it might be what you are looking for. If you wrap your RadTreeView control in a RadAjaxPanel, you can used the RadAjaxPanel.LoadingPanelID to associate it with a RadAjaxLoadingPanel somewhere else on the page. If you do not want to fully hide your RadTreeView control (or any other controls inside the RadAjaxPanel), you can also set the RadAjaxLoadingPanel.Transparency property to a value between 0 (no transparency) and 100 (full transparency).

Here is an example I created which might help you better understand how to use these controls:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="RadTreeView.aspx.cs" Inherits="RadTreeView" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!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>Untitled Page</title> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
        
                    <div> 
        
                        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server"  
        
                            Height="100px" 
        
                            Width="100px" 
        
                            LoadingPanelID="RadAjaxLoadingPanel1"> 
        
                            <telerik:RadTreeView ID="RadTreeView1" runat="server"  
        
                                CheckBoxes="true" 
        
                                OnNodeCheck="RadTreeView1_NodeCheck"> 
        
                                <Nodes> 
        
                                    <telerik:RadTreeNode Text="1.0" Checkable="true"> 
        
                                        <Nodes> 
        
                                            <telerik:RadTreeNode Text="1.1" Checkable="true" /> 
        
                                            <telerik:RadTreeNode Text="1.2" Checkable="true" /> 
        
                                        </Nodes> 
        
                                    </telerik:RadTreeNode> 
        
                                    <telerik:RadTreeNode Text="2" Checkable="true"> 
        
                                         <Nodes> 
        
                                            <telerik:RadTreeNode Text="2.1" Checkable="true" /> 
        
                                            <telerik:RadTreeNode Text="2.2" Checkable="true" /> 
        
                                        </Nodes> 
        
                                    </telerik:RadTreeNode> 
        
                                    <telerik:RadTreeNode Text="3" Checkable="true" /> 
        
                                </Nodes> 
        
                            </telerik:RadTreeView> 
        
                        </telerik:RadAjaxPanel> 
        
                        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"  
        
                            Transparency="15">               
        
                            <img alt="Loading..."  
        
                                src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
        
                                style="border: 0px;" /> 
        
                        </telerik:RadAjaxLoadingPanel>   
        
                    </div> 
        
                    <div> 
        
                        Node checked:  
        
                        <asp:Literal ID="Literal1" runat="server" Text="none" /> 
        
                    </div> 
        
                </form> 
        
            </body> 
        
            </html>

    
            using System; 
        
            public partial class RadTreeView : System.Web.UI.Page 
        
            { 
        
                protected void Page_Load(object sender, EventArgs e) { } 
        
                public void RadTreeView1_NodeCheck(object sender, Telerik.Web.UI.RadTreeNodeEventArgs e) 
        
                { 
        
                    System.Threading.Thread.Sleep(5000); 
        
                    Literal1.Text = e.Node.Text; 
        
                } 
        
            }

I simulated a delay in the response by calling System.Threading.Thread.Sleep(). You would not want to do this for any reasons other than testing.

I hope this answered your question. If you have any more questions, please let me know.

Sincerely,
Kevin Babcock

answered on 25 Jun 2008, 01:19 PM

Ok, It seems to be half-working. The loading image displays when I want it to, but it never goes when the loading is done. It just stays there.

my aspx-

    
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">  
        
                 <telerik:RadTreeView ID="RadTreeView1" runat="server" Height="559" OnNodeCheck="RadTreeView1_NodeClick" Font-Size="Small"> 
        
                      <CollapseAnimation Duration="100" Type="OutQuint" /> 
        
                      <ExpandAnimation Duration="100" /> 
        
                 </telerik:RadTreeView> 
        
            </telerik:RadAjaxPanel> 
        
            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="15">                
        
                 <img alt="Loading..."  src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border: 0px;" />  
        
            </telerik:RadAjaxLoadingPanel>

and code-

    
                protected void RadTreeView1_NodeClick(object sender, RadTreeNodeEventArgs e) 
        
                { 
        
                    foreach (RadTreeNode node in e.Node.Nodes) 
        
                    { 
        
                        if (e.Node.Checked) 
        
                            node.Checked = true; 
        
                        else 
        
                            node.Checked = false; 
        
                        if (node.Nodes.Count > 0) 
        
                        { 
        
                            foreach (RadTreeNode node2 in node.Nodes) 
        
                            { 
        
                                if (node.Checked) 
        
                                    node2.Checked = true; 
        
                                else 
        
                                    node2.Checked = false; 
        
                            } 
        
                        } 
        
                    } 
        
                    generateCalendarInfo(); 
        
                }

generateCalendarInfo creates a List<T> of custom objects that are loaded into a RadScheduler. The items in the checkbox treeview are names that are associated with the calendar, and their subordinates. ie- if Susan's name is checked, you can see her stuff in the radscheduler, and her subordinates stuff.

Everything else I'm doing in the NodeClick event is making all the subordinates by default be checked or unchecked based on the parent.

Any ideas why the loading image would not go away once the server-side events are finished loading?