TreeView disables itself and shows indicator gif while loading

[Adam Bruss]

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]

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]

Thanks Varalakshmi I got it working.

[Varalakshmi R.S]

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