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.
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
