Hello,
We have a webpage that has three key sections: a title section at the top, and below that a tree on the left and content on the right.
The tree contains categories and products, and is bound to a WebHierarchicalDataSource so that you have your root categories and different layers of categories below that with the products being at the lowest level. These nodes were turned into hyperlinks that would go to either a category listing or a product listening depending on what type of node you clicked on.
I am wanting to change that functionality to do an async postback and have the content section be inside of an update panel.I have managed to get it to work fine by doing a regular postback and handling the changes to the updatepanel in the nodeclick event, but whenever I try doing it as an async callback the updatepanel will not refresh.
I can place a breakpoint in the code, both the Page_Load event and the NodeClick event fire, the code that updates the updatepanel fires, but when it gets returned to the browser the updatepanel doesn't change.
I am not sure if there is something wrong with how the tree is doing its postback that is not triggering the update for the updatepanel, or if I did something wrong with the updatepanel so it isn't catching the async postback. It worked fine on a regular postback.
I tried changing the type of updatepanel between conditional and always with no results, tried switching events to watch for on the tree to SelectionChanged but that didn't seem to work either. I noticed that scriptmanager.IsInAsyncPostback seems to always be false and I believe it should be true when the tree does an async postback.
Below is the markup for the tree and the update panel. I'm not sure if you'll be able to spot anything right off from that or not. If needed I will try to set up a simple project with just the tree and updatepanel in it to upload.
<ig:WebDataTree ID="itemtree" class="ItemTree" runat="server" DataSourceID="hdsItem" SelectionType="Single" NodeIndent="10" InitialDataBindDepth="1"> <AutoPostBackFlags SelectionChanged="Async" /> <DataBindings> <ig:DataTreeNodeBinding DataMember="dsItemCategoryRoot_DefaultView" KeyField="CategoryID" TextField="Description" ValueField="CategoryID" TargetField="Category" /> <ig:DataTreeNodeBinding DataMember="dsItemCategory_DefaultView" KeyField="CategoryID" TextField="Description" ValueField="CategoryID" TargetField="Category" /> <ig:DataTreeNodeBinding DataMember="dsItem_DefaultView" KeyField="InventoryID" TextField="Name" ValueField="InventoryID" TargetField="Inventory" /> </DataBindings> </ig:WebDataTree>
<asp:UpdatePanel ID="upContent" runat="server"> <ContentTemplate> <asp:PlaceHolder runat="server" ID="phContent" EnableViewState="false" /> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="itemtree" EventName="SelectionChanged" /> </Triggers> </asp:UpdatePanel>
Hi kchitw,
Thank you for posting in our forum.
I have reviewed your code and changed it a bit. I replaced the SelectionChanged with NodeClick event, placed the WebDataTree in separate UpdatePanel and set AutoPostBackFlags for NodeClick to On:
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<ig:WebDataTree ID="itemtree" runat="server" OnNodeClick="itemtree_SelectionChanged">
<AutoPostBackFlags NodeClick="On" />
<Nodes>
<ig:DataTreeNode Text="Root Node 1">
</ig:DataTreeNode>
<ig:DataTreeNode Text="Root Node 2">
<ig:DataTreeNode Text="Root Node 3">
<ig:DataTreeNode Text="Root Node 4">
</Nodes>
</ig:WebDataTree>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdatePanel ID="upContent" runat="server">
<asp:Label Text="text" ID="Label1" runat="server" />
On SelectionChanged, I just change the text of the Label in the second UpdatePanel:
protected void itemtree_SelectionChanged(object sender, Infragistics.Web.UI.NavigationControls.DataTreeNodeClickEventArgs e)
{
Label1.Text = e.Node.Text;
}
And it was working as per your requirements.
Please let me know if this helps.
If you have any further questions regarding the matter, please let me know.
Hi Nikolay,
Adding the Update Panel around the tree fixed my issue, works great!
Instead of setting the AutoPostBackFlags NodeClick to On, I set it to Async to get the desired result.
Thank you for the advice
I'm glad to hear that.
Please let me know if you have any other questions.
I Have the Same Issue , i am Using WebDataTree and my Node Click Event is not Firing .
<ignav:WebDataTree ID="WebDataTree1" runat="server" OnInit="WebDataTree1_Init" OnNodeClick="WebDataTree1_NodeClick" DefaultImage="ig_treeFolder.gif" DefaultSelectedImage="ig_treeFolderOpen.gif" CheckBoxMode="BiState" CheckBoxes="true" EnableConnectorLines="True" Width="300px" FileUrl="" Height="420px" TargetFrame="" TargetUrl="" WebTreeTarget="ClassicTree" CssClass="AdminLabelTree" BorderStyle="Groove"> <AutoPostBackFlags NodeExpanded="On" /> <%--<AutoPostBackFlags NodeClick="On" />--%> <Nodes> <%--<ignav:DataTreeNode Text="Root--"> <Nodes> <ignav:DataTreeNode CheckState="Checked" Text="Child Node 1"> </ignav:DataTreeNode> <ignav:DataTreeNode Text="Child Node 2"> </ignav:DataTreeNode> </Nodes> </ignav:DataTreeNode>--%> </Nodes> </ignav:WebDataTree>