Hierarchical tab selection in page load

[Sharon]

I have a hierarchical tab, by default this is how my tab structure is rendered,

Tab1  Tab2  Tab3  Tab4
Tab1.1 Tab1.2  Tab1.3 Tab1.4
Tab1.1.1 Tab1.1.2

but in page load I want my tab to render this way, and want Tab2.7.1 selected,

Tab1 Tab2 Tab3 Tab4
Tab2.1 Tab2.2 Tab2.3 Tab2.4 Tab2.5 Tab2.6 Tab2.7
Tab2.7.1 Tab2.7.2 Tab2.3

Please do help me in solving this issue.

[Princy]

Hi Sharon,

Try the following client side code and see whether it helps.

ASPX:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" SelectedIndex="1">
    <Tabs>
        <telerik:RadTab runat="server" Text="Tab1">
            <Tabs>
                <telerik:RadTab runat="server" Text="Tab 1.1">
                </telerik:RadTab>
                <telerik:RadTab runat="server" Text="Tab 1.2">
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTab>
        <telerik:RadTab runat="server" Text="Tab2" Selected="True">
            <Tabs>
                 . . .
                <telerik:RadTab runat="server" Text="Tab 2.7">
                    <Tabs>
                        <telerik:RadTab runat="server" Text="Tab 2.7.1">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="Tab 2.7.2">
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTab>
            </Tabs>
        </telerik:RadTab>
         . . .
    </Tabs>
</telerik:RadTabStrip>

JavaScript:

<script type="text/javascript">
function pageLoad()
{
    var tabStrip= $find("<%= RadTabStrip1.ClientID %>");
    var tab = tabStrip.findTabByText("Tab 2.7.1");
    if(tab)
    {
        if(tab.get_level() != 0)
        {
            var parentItem = tab;

            for(var i = 0; parentItem.get_level() >0; i++)
            {
                parentItem = parentItem.get_parent();
                parentItem.set_selected(true);
            }
        }
        tab.set_selected(true);
    }
}
</script>

Thanks,
Princy.

[Sharon]

Hi Princy,
Thanks for your reply and it worked like a gem but, I want this client side code to be called only when my page is not posted back.

Thanks,
Sharon.

[Paul]

Hello Sharon,

Just rename the pageLoad() function and call it whenever you need it. pageLoad() is a shortcut for the Sys.Application.load event. For details on the matter please refer to the following ASP.NET article.

Best wishes,
Paul
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Sharon]

HI Paul,
I tried doing that, renaming the function as myfunction() and calling it from the codebehind. I end up getting a script errror null is not an object. I fired alerts to check how far the script is excuted, the function is called, but it does not give the client id of my radstrip.

Please help.....

Thanks,
Sharon Johnson

[Shinu]

Hi Sharon,

Try adding Sys.Application.add_load() method for calling the client side function from code behind, and see whether it is working fine.

CS:

string script = "<script language='javascript' type='text/javascript'>Sys.Application.add_load(myfunction);</script>";
ClientScript.RegisterStartupScript(this.GetType(), "myfunction", script);

Thanks,
Shinu.

[Sharon]

I tried your code but I end up with the same situation I'm not able to select any other tab, the function is getting called on each post back I want that to be called the first time and not during every post back

this is my page load
 protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string script = "<script language='javascript' type='text/javascript'>Sys.Application.add_load(myfunction);</script>";
            ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "myfunction", script, false);
        }
   }

this is my script

<script type="text/javascript">  
function myfunction()  
{   
    
    var tabStrip= $find("<%= langcate_tab.ClientID %>");    
    var tab = tabStrip.findTabByText("Ek Nayee Zindagi");     
    if(tab)     
    {    
        if(tab.get_level() != 0)    
        {    
            var parentItem = tab;    
                
            for(var i = 0; parentItem.get_level() >0; i++)    
            {    
                parentItem = parentItem.get_parent();    
                parentItem.set_selected(true);                      
            }                    
        }         
        tab.set_selected(true);     
    }
}  
</script>


I get runtime error when I use ClientScript, so I used ScriptManager.RegisterStartupScript.


Thanks,
Sharon.