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

[Solved] TabStrip selection changed on client isn't right in postback

1 Answer 114 Views

TabStrip

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

Christian asked on 17 Feb 2010, 07:37 PM

I have a simple project where I have a TreeView in a TabStrip. On expending node of the treeview, I add a node with the selected tab as the value. But even if I click on a tab, on the server, the SelectedTab is always the first.

Here's my code :
Repro.aspx

    
            <%@ Page Language="VB" AutoEventWireup="false" Inherits="Stavibel.Intranet.WebSite.Repro" 
        
              EnableEventValidation="false" CodeBehind="Repro.aspx.vb" %> 
        
            <%@ 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>Page sans titre</title> 
        
            </head> 
        
            <body> 
        
              <form id="form1" runat="server">  
        
              <asp:ScriptManager ID="ScriptManager1" runat="server">  
        
              </asp:ScriptManager> 
        
              <div> 
        
                <telerik:RadTabStrip ID="tabStrip" runat="server"   
        
                  ScrollButtonsPosition="Middle" PerTabScrolling="true" ScrollChildren="true" Width="320px" 
        
                  AutoPostBack="false">  
        
                </telerik:RadTabStrip> 
        
                <telerik:RadTreeView ID="treeFolders" runat="server" CheckBoxes="True" TriStateCheckBoxes="false" 
        
                  OnNodeExpand="treeFolders_NodeExpand">  
        
                </telerik:RadTreeView> 
        
                <br /> 
        
              </div> 
        
              </form> 
        
            </body> 
        
            </html>

Repro.aspx.cs

    
            Imports System.IO  
        
            Imports System.Collections.Generic  
        
            Imports System.Xml  
        
            Imports System.Net  
        
            Imports Telerik.Web.UI  
        
            Imports System.Xml.Linq  
        
            Imports System.Xml.XPath  
        
            Imports System.Linq  
        
            Imports System.ServiceModel  
        
            Partial Class Repro  
        
                Inherits System.Web.UI.Page  
        
                Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load  
        
                    If treeFolders.Nodes.Count = 0 Then  
        
                        tabStrip.Tabs.Add(New RadTab("Montreal", "100"))  
        
                        tabStrip.Tabs.Add(New RadTab("Quebec", "200"))  
        
                        If tabStrip.SelectedIndex = -1 Then  
        
                            tabStrip.SelectedIndex = 0 
        
                        End If  
        
                        FillTreeRootNodes()  
        
                    End If  
        
                End Sub  
        
                Protected Sub treeFolders_NodeExpand(ByVal sender As Object, ByVal e As RadTreeNodeEventArgs)  
        
                    e.Node.Nodes.Add(New RadTreeNode(tabStrip.SelectedTab.Text))  
        
                End Sub  
        
                Private Sub FillTreeRootNodes()  
        
                    Dim xProject = New XElement("Node", _  
        
                                                New XAttribute("Text", "ST0001 - Project 1"), _  
        
                                                New XAttribute("Value", "ST0001"), _  
        
                                                New XAttribute("ImageURL", "~/Images/iconSmall_Folder.jpg"), _  
        
                                                New XAttribute("Expanded", "true"), _  
        
                                                New XAttribute("Project", "true") _  
        
                                                )  
        
                    Dim xTree = New XElement("Tree", xProject)  
        
                    Dim xSub = New XElement("Node", _  
        
                                            New XAttribute("Text", "001 - Sub 1"), _  
        
                                            New XAttribute("Value", "001"), _  
        
                                            New XAttribute("ImageURL", "~/Images/iconSmall_Folder.jpg"), _  
        
                                            New XAttribute("Expanded", "False"), _  
        
                                              New XAttribute("ExpandMode", "ServerSideCallBack"), _  
        
                                              New XAttribute("SubProject", "true") _  
        
                                            )  
        
                    xProject.Add(xSub)  
        
                    xSub = New XElement("Node", _  
        
                                            New XAttribute("Text", "002 - Sub 2"), _  
        
                                            New XAttribute("Value", "002"), _  
        
                                            New XAttribute("ImageURL", "~/Images/iconSmall_Folder.jpg"), _  
        
                                            New XAttribute("Expanded", "False"), _  
        
                                              New XAttribute("ExpandMode", "ServerSideCallBack"), _  
        
                                              New XAttribute("SubProject", "true") _  
        
                                            )  
        
                    xProject.Add(xSub)  
        
                    Dim test = xTree.ToString()  
        
                    treeFolders.LoadXmlString(test)  
        
                End Sub  
        
            End Class

To repro:
- Select the Quebec tab.
- Expand a node
- Should add a node Quebec

This repros on Q3sp1 and 2010 Q1 beta.

UPDATE: This works fine if AutoPostBack is set to true for the tabStrip, but that's not what I want

Am I doing something wrong?

1 Answer, 1 is accepted

answered on 19 Feb 2010, 12:36 PM

tabstriprepro.zip

Hello Christian,

The problem is that when you're using ServerSideCallBack ExpandMode of the nodes, actually an asynchronous request is sent to the server, but at this time the selected tab is not updated on the server yet.
One solution is to use ServerSide ExpandMode instead. The other way is to subscribe to OnClientNodePopulating event of the treeview and set the text of the selected tab as a custom attribute of the expanding node:

<script type="text/javascript">

function nodePopulating(sender, args) {

var node = args.get_node();

sender.trackChanges();

node.get_attributes().setAttribute("selTab", $find("<%=tabStrip.ClientID %>").get_selectedTab().get_text());

sender.commitChanges();

}

</script>

and then receive it in NodeExpand event handler like this:

Protected Sub treeFolders_NodeExpand(ByVal sender As Object, ByVal e As RadTreeNodeEventArgs)

e.Node.Nodes.Add(New RadTreeNode(e.Node.Attributes("selTab")))

End Sub

I've also attached the modified page for a reference.

Greetings,
Yana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.