Open a new tab in the Tab Container

Question

User1077245351 posted

I have one tab in asp.net ajax tab container with web-based application with textbox, button search, and gridview with hyperlink navigateURL : http://www.abc.org/AllNames/PersonalNames?By=Names=john

When I clicked the hyperlink, I would like  to open the second tab in same tab container with title name and results of numbers of records count.

 ___________________________   _______________________________________________________________

|__Tab one________________| |_Tab Two with title name & number of records found_|

No a new window, just open the second tab.

 

 

 

Answer 1

User555306248 posted

You can activate tab using ActiveTabIndex property.

http://www.asp.net/ajaxlibrary/ajaxcontroltoolkitsamplesite/tabs/tabs.aspx

Answer 2

User-417640953 posted

No a new window, just open the second tab.

Hi slb2012,

Thank you post this issue to our forum.

As known that hyperlink control has no the OnClick event and it will not cause the postback to code behind.

So I think you can change the TabContainer selected tab panel using the javascript when hyperlink clicked.

  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(function () {

            $(".MyHyperLink").click(function () {

                $find('TabContainer1').set_activeTabIndex(1);
                window.returnValue = false;
                return window.returnValue;
            });
        })
    </script>
<div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"></asp:ToolkitScriptManager>
        <asp:TabContainer ID="TabContainer1" runat="server"  ClientIDMode="Static" >
             <asp:TabPanel runat="server" ID="Panel1">
                <HeaderTemplate>Panel1</HeaderTemplate>
                <ContentTemplate>
                    I'm panel 1
                    <asp:HyperLink ID="HyperLink1" CssClass="MyHyperLink" runat="server" NavigateUrl="http://www.abc.org/AllNames/PersonalNames?By=Names=john">HyperLink</asp:HyperLink>
                </ContentTemplate>
            </asp:TabPanel>
             <asp:TabPanel runat="server" ID="Panel2">
                <HeaderTemplate>Panel2</HeaderTemplate>
                <ContentTemplate>
                    I'm panel 2
                </ContentTemplate>
            </asp:TabPanel>
        </asp:TabContainer>
    </div>

Above codes works fine in my side, please try it. Thanks.

Best Regards!

Answer 3

User1077245351 posted

Thanks for your response.

I test your code and works fine, but since the hyperlink is inside of gridview is not working.
I am trying to do this:

<asp:TemplateField HeaderText ="Names" >
<HeaderStyle></HeaderStyle>

<ItemStyle Width ="175px"
Font-Names ="Tahoma" 
Font-Size ="10pt"
ForeColor ="Crimson"
HorizontalAlign ="Center" />
<ItemTemplate>

<asp:HyperLink 
ID="HplNames" 
runat="server"
CssClass ="myhyperlink"
NavigateUrl ='<%# String.Format("http://www.abc.org/AllNames/PersonalNames?By=Names={0}"))%>'
Text='<%# DataBinder.Eval(Container.DataItem, "Names").ToString%>' >
</asp:HyperLink> 
</ItemTemplate>
</asp:TemplateField>

Doesn't read CssClass myhypelink from JQuery script.

Answer 4

User-417640953 posted

Doesn't read CssClass myhypelink from JQuery script.

Hi slb2012,

Thanks for your response.

Jquery can select the HyperLink cssclass which inside a gridview, please check below demo and try it again.

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script>
        $(function () {

            $(".myhyperlink").click(function () {

                alert('done');
            });
        })
    </script> 
<asp:GridView ID="GridView1" runat="server">
            <Columns>
                <asp:TemplateField HeaderText ="Names" >
                    <HeaderStyle></HeaderStyle>

                    <ItemStyle Width ="175px"
                    Font-Names ="Tahoma" 
                    Font-Size ="10pt"
                    ForeColor ="Crimson"
                    HorizontalAlign ="Center" />
                    <ItemTemplate>

                    <asp:HyperLink 
                    ID="HplNames" 
                    runat="server"
                    CssClass ="myhyperlink"
                    NavigateUrl ='#'
                    Text='<%#  Container.DataItem %>' >
                    </asp:HyperLink> 
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

Code behind:

   protected void Page_Load(object sender, EventArgs e)
        {
            this.GridView1.DataSource = new List<string> { "asadx", "asda", "asd" };
            this.GridView1.DataBind();
        }

Thanks.

Best Regards!