We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

TreeView disables itself and shows indicator gif while loading

Thread ID:

Created:

Updated:

Platform:

Replies:

104758 Aug 15,2012 11:12 AM Aug 29,2012 03:12 AM ASP.NET Web Forms (Classic) 3
loading
Tags: Tools
Adam Bruss
Asked On August 15, 2012 11:12 AM

In the asp.net online samples for the tree view the tree exhibits a behavior where it becomes disabled and shows a progress/indicator gif until it's done loading. For example this page http://asp.syncfusion.com/demos/ui/tools/TreeView/CoreFeatures/cs/CoreFeatures.aspx exhibits the behavior when expanding and collapsing a node. How can I implement this behavior on my tree?

Using Essential Studio 10.2.0.56.

Thanks,
Adam

Varalakshmi R.S [Syncfusion]
Replied On August 17, 2012 12:56 AM

Hi Adam,

 

Thanks for contacting Syncfusion forums.

 

This behavior can be achieved by adding WaitingPopup control in the sample and triggering the control while expanding/collapsing the TreeView nodes. Please refer the below code snippet to achieve this,

<code>

[ASPX]

<script type="text/javascript">

            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);

            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

            function BeginRequestHandler(sender, args) {

                Popup.ShowPopup();

            }

            function EndRequestHandler(sender, args) {

                Popup.HidePopup();

            }

        </script>

<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">

            <ContentTemplate>

                <syncfusion:TreeView ID="TreeView1" MultipleSelection="true" AutoPostBackOnNodeCheckChanged="true"

                    AutoPostBackOnNodeCollapse="true" AutoPostBackOnNodeDrop="true" AutoPostBackOnNodeExpand="true"

                    AutoPostBackOnNodeSelect="false" AutoPostBackOnNodeRename="true" DragAndDropEnabled="true"

                    runat="server" CustomCSS="css/TreeStyle.css" ExpandSinglePath="true"

                    OnNodeCheckChanged="TreeView1_NodeCheckChanged" OnNodeCollapsed="TreeView1_NodeCollapsed"

                    OnNodeDropped="TreeView1_NodeDropped" OnNodeExpanded="TreeView1_NodeExpanded"

                    OnNodeSelected="TreeView1_NodeSelected" ShowLines="true" NodeEditCssClass="NodeEdit"

                    CssClass="TreeView" Width="220" Height="300" OnNodeRenamed="TreeView1_NodeRenamed"

                    Font-Names="Trebuchet MS" Font-Size="12px">

                    <ItemLooks>

                        <syncfusion:TreeViewItemLook ID="Look1">

                            <StateDataDefault ItemCSSClass="Def_ItemCss" TextCellCSSClass="Def_TextCellCss">

                            </StateDataDefault>

                            <StateDataExpanded ItemCSSClass="Def_ItemCss" TextCellCSSClass="Def_TextCellCss">

                            </StateDataExpanded>

                            <StateDataActive ItemCSSClass="Act_ItemCss" TextCellCSSClass="Act_TextCellCss" TextContainerCSSClass="Act_TextCont"

                                ItemRowCSSClass="Act_ItemRowCss"></StateDataActive>

                            <StateDataHover TextContainerCSSClass="Hov_TextCont"></StateDataHover>

                        </syncfusion:TreeViewItemLook>

                        <syncfusion:TreeViewItemLook ID="DisabledLook1">

                            <StateDataDefault TextCellCSSClass="Def_DisabledTextContCss" TextContainerCSSClass="Def_DisabledTextContCss">

                            </StateDataDefault>

                            <StateDataExpanded TextCellCSSClass="Def_DisabledTextContCss" TextContainerCSSClass="Def_DisabledTextContCss">

                            </StateDataExpanded>

                            <StateDataActive TextCellCSSClass="Def_DisabledTextContCss" TextContainerCSSClass="Def_DisabledTextContCss">

                            </StateDataActive>

                            <StateDataHover TextCellCSSClass="Def_DisabledTextContCss" TextContainerCSSClass="Def_DisabledTextContCss">

                            </StateDataHover>

                        </syncfusion:TreeViewItemLook>

                    </ItemLooks>

                    <Items>

                        <syncfusion:TreeViewNode ImagePath="root.gif" Text="Mailbox" Look="Look1">

                            <syncfusion:TreeViewNode ImagePath="calendar.gif" Text="Calendar" Look="Look1">

                            </syncfusion:TreeViewNode>

                            <syncfusion:TreeViewNode ImagePath="contacts.gif" Text="Contacts" Look="Look1">

                            </syncfusion:TreeViewNode>

                            <syncfusion:TreeViewNode ImagePath="deleted.gif" Text="DeletedItems" Look="Look1">

                            </syncfusion:TreeViewNode>

                            <syncfusion:TreeViewNode ImagePath="drafts.gif" Text="Drafts" Look="Look1">

                            </syncfusion:TreeViewNode>

                        </syncfusion:TreeViewNode>

                        <syncfusion:TreeViewNode ImagePath="inbox.gif" Text="Inbox" Look="Look1">

                            <syncfusion:TreeViewNode ImagePath="folders.gif" Expanded="True" Text="Syncfusion"

                                Look="Look1">

                                <syncfusion:TreeViewNode ImagePath="folder.gif" Text="Admin" Look="Look1">

                                </syncfusion:TreeViewNode>

                                <syncfusion:TreeViewNode ImagePath="folder.gif" Text="Alpha" Look="Look1">

                                </syncfusion:TreeViewNode>

                                <syncfusion:TreeViewNode ImagePath="folder.gif" Text="Corporate" Look="Look1">

                                </syncfusion:TreeViewNode>

                                <syncfusion:TreeViewNode ImagePath="folder.gif" Text="Finance" Look="Look1">

                                </syncfusion:TreeViewNode>

                                <syncfusion:TreeViewNode ImagePath="folder.gif" Text="Projects" Look="Look1">

                                </syncfusion:TreeViewNode>

                            </syncfusion:TreeViewNode>

                            <syncfusion:TreeViewNode ImagePath="folders.gif" Text="Personal" Look="Look1">

                                <syncfusion:TreeViewNode ImagePath="folder.gif" Text="Admin" Look="Look1">

                                </syncfusion:TreeViewNode>

                                <syncfusion:TreeViewNode ImagePath="folder.gif" Text="Alpha" Look="Look1">

                                </syncfusion:TreeViewNode>

                                <syncfusion:TreeViewNode ImagePath="folder.gif" Text="Business Planning" Look="Look1">

                                </syncfusion:TreeViewNode>

                                <syncfusion:TreeViewNode ImagePath="folder.gif" Text="Corporate" Look="Look1">

                                </syncfusion:TreeViewNode>

                                <syncfusion:TreeViewNode ImagePath="folder.gif" Text="Projects" Look="Look1">

                                </syncfusion:TreeViewNode>

                            </syncfusion:TreeViewNode>

                        </syncfusion:TreeViewNode>

                        <syncfusion:TreeViewNode ImagePath="junk.gif" Text="Junk E-mail[5]" Look="Look1">

                        </syncfusion:TreeViewNode>

                        <syncfusion:TreeViewNode ImagePath="notes.gif" Text="Notes" Look="Look1">

                        </syncfusion:TreeViewNode>

                        <syncfusion:TreeViewNode ImagePath="outbox.gif" Text="Outbox" Look="Look1">

                        </syncfusion:TreeViewNode>

                        <syncfusion:TreeViewNode ImagePath="sentitems.gif" Text="Sent Items" Look="Look1">

                        </syncfusion:TreeViewNode>

                        <syncfusion:TreeViewNode ImagePath="folders.gif" Expanded="True" Text="Mailbox - News"

                            Look="Look1">

                            <syncfusion:TreeViewNode ImagePath="folder.gif" Text="World" Look="Look1">

                            </syncfusion:TreeViewNode>

                            <syncfusion:TreeViewNode ImagePath="folder.gif" Text="Business" Look="Look1">

                            </syncfusion:TreeViewNode>

                            <syncfusion:TreeViewNode ImagePath="folder.gif" Text="Science" Look="Look1">

                            </syncfusion:TreeViewNode>

                        </syncfusion:TreeViewNode>

                    </Items>

                </syncfusion:TreeView>

            </ContentTemplate>          

        </asp:UpdatePanel>

<div>

        <syncfusion:WaitingPopup ID="WaitingPopup1" runat="server" Alignment="MiddleCentre"

            AutoFormat="Rollers" ClientObjectId="Popup" DisableOnShowElementID="TreeView1"

            Height="50px" Width="125px" DisabledBackgroundColor="221, 227, 238">

        </syncfusion:WaitingPopup>

    </div>

 

</code>

Please refer the source section of the following sample to get more details on this behavior,

http://asp.syncfusion.com/demos/ui/tools/TreeView/CoreFeatures/cs/CoreFeatures.aspx

 

Regards,

Varalakshmi


Adam Bruss
Replied On August 21, 2012 11:43 AM

Thanks Varalakshmi I got it working.

Varalakshmi R.S [Syncfusion]
Replied On August 29, 2012 03:12 AM

Hi Adam,
Thanks for your reply and we are glad that your issue is resolved.
Regards,
Varalakshmi

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;