add close button on tab

[Johnny]

hi i want to add close button on the tab if user click the close button n close the hide the tab how to achive this

[Princy]

Hello,

Take a look into the following demo.
TabStrip / Templates

Thanks,
Princy.

[Kevin]

Hello,

This is exactly what I was looking for except I'm having a problem. My tab names are not showing up.

They are added server side in the on load event.  All I see is a blank tab with the "X" close button.  Any idea how to have the tab names show up?

protected void Page_Load(object sender, System.EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                AddTab("Customers");
                AddPageView(RadTabStrip1.FindTabByText("Customers"));
                AddTab("Orders");
                AddTab("Products");
            }
        }

Thanks!
Kevin

[Princy]

Hello,

Try the following code snippet.
C#:

protected void Page_Load(object sender, EventArgs e)
  {
    if (!IsPostBack)
     {
      RadTab tab = new RadTab();
      tab.Text = "tab";
      tab.ImageUrl = "~/Images/button_edit_grey.gif";
      RadTabStrip1.Tabs.Add(tab);
    }
 }

Thanks,
princy.

[Bozhidar]

Hi Kevin,

When you use templates you have to call the DataBind() method of RadTabStrip on each Page_Load event in order for the binding expressions to work and show the text.
 
Greetings,
Bozhidar
the Telerik team

[Johnny]

hi i don't want to show close button for all tab
i need to hide the close button for First tab how to acive this?

and

i remove the tab and related pageview from client side
how do i add it back from client side
i add it back from client side using following code but the template doesn't show
am i missing something

var tabStrip = $find("ctl00_ContentPlaceHolder1_PageTab");
var multiPage = $find("ctl00_ContentPlaceHolder1_MultiPage");

var tab = tabStrip.findTabByText("Search");
var pageView = tab.get_pageView();

 tabStrip.get_tabs().add(tab);
 multiPage.get_pageViews().add(pageView);

[Bozhidar]

Hello Johnny,

To answer your first question, aside from the global template that you set on RadTabStrip, you can also assign templates to tabs individually, overriding the global template for that tab. Using the TabStrip from the demo mentioned earlier, here's how you can set the first node so that it doesn't have the delete button:

<telerik:RadTabStrip runat="server" ID="RadTabStrip1" Orientation="HorizontalTop"
    Skin="WebBlue" SelectedIndex="0" MultiPageID="RadMultiPage1">
    <TabTemplate>
        <div class="textWrapper">
            <%# DataBinder.Eval(Container, "Text") %>
        </div>
        <span class="ie6shim"></span>
        <img src="delete.gif" alt="delete" onclick="deleteTab('<%# DataBinder.Eval(Container, "Text") %>')" />
    </TabTemplate>
    <Tabs>
        <telerik:RadTab Text="Products">
            <TabTemplate>
                <div class="textWrapper">
                    <%# DataBinder.Eval(Container, "Text") %>
                </div>
                <span class="ie6shim"></span>
            </TabTemplate>
        </telerik:RadTab>
        <telerik:RadTab Text="Services">
        </telerik:RadTab>
        <telerik:RadTab Text="Corporate">
        </telerik:RadTab>
    </Tabs>
</telerik:RadTabStrip>

And when you add new tabs, you always have to call the DataBind() method from the server, otherwise the databinding expressions wouldn't work. For this purpose you can use RadAjaxManager to make a partial postback and rebind the TabStrip whenever you add a new tab.
 
Kind regards,
Bozhidar
the Telerik team

[Johnny]

hi Bozhidar

i don't want page postback on tab closingso i decided to hide 2nd and 3rd tab while page loading
In the AjaxLoadingPanel RequestEnd event i check the Hidden Variable Value then show or Hide the 2nd and 3rd Tab
my problem is when i close the 2nd tab by clicking close btn and select First tab by client side tab.set_selected(true); the fisrt tab
doesn't selected how to achive this
Page_Load Code

var tabStrip = $find("ctl00_ContentPlaceHolder1_PageTab");
  var multiPage = $find("ctl00_ContentPlaceHolder1_MultiPage");

  var tab = tabStrip.findTabByText("Search");
  var pageView = tab.get_pageView();
  tab.set_visible(false);
  pageView.hide();
  //        tabStrip.get_tabs().remove(tab);
  //        multiPage.get_pageViews().remove(pageView);

  tab = tabStrip.findTabByText("Viewer");
  pageView = tab.get_pageView();
  //        tabStrip.get_tabs().remove(tab);
  //        multiPage.get_pageViews().remove(pageView);
  tab.hide();
  pageView.hide();

AjaxLoading Panel OnRequestEnd event code

var tabStrip = $find("ctl00_ContentPlaceHolder1_PageTab");
        var multiPage = $find("ctl00_ContentPlaceHolder1_MultiPage");

        tabStrip.trackChanges();

        var tab = tabStrip.findTabByText("Search");
        var pageView = tab.get_pageView();


        if ($("#ContentPlaceHolder1_ResultTabVisibleHidden").attr("value") == "1") {
//            tabStrip.get_tabs().add(tab);
            //            multiPage.get_pageViews().add(pageView);
            tab.set_visible(true);
            pageView.show();
        }
        else {
//            tabStrip.get_tabs().remove(tab);
            //            multiPage.get_pageViews().remove(pageView);
            tab.set_visible(false);
            pageView.hide();
        }

        var tab = tabStrip.findTabByText("Viewer");
        var pageView = tab.get_pageView();
        if ($("#ContentPlaceHolder1_ViewerTabVisibleHidden").attr("value") == "1") {
//            tabStrip.get_tabs().add(tab);
            //            multiPage.get_pageViews().add(pageView);
            tab.show();
            pageView.show();

        }
        else {
//            tabStrip.get_tabs().remove(tab);
            //            multiPage.get_pageViews().remove(pageView);
            tab.hide();
            pageView.hide();
        }

        tabStrip.commitChanges();

This is my coseTab Code

function CloseTab(tabText) {


      var tabStrip = $find("ctl00_ContentPlaceHolder1_PageTab");
      var multiPage = $find("ctl00_ContentPlaceHolder1_MultiPage");
      var tab = tabStrip.findTabByText(tabText);
      var pageView = tab.get_pageView();

      var tabToSelect = tabStrip.findTabByText("Mail");

      tab.set_visible(false);
      pageView.hide();



      if (tabText == "Search") {
          $("#ContentPlaceHolder1_ResultTabVisibleHidden").attr("value", "0");

      }
      else if (tabText == "Viewer") {
          $("#ContentPlaceHolder1_ViewerTabVisibleHidden").attr("value", "0");
      }

      if (tabToSelect)
          tabToSelect.set_selected(true);


  }

[Johnny]

i achived by adding 2 extra lines in CloseTab event

function CloseTab(tabText) {


       var tabStrip = $find("ctl00_ContentPlaceHolder1_PageTab");
       var multiPage = $find("ctl00_ContentPlaceHolder1_MultiPage");
       var tab = tabStrip.findTabByText(tabText);
       var pageView = tab.get_pageView();

       var tabToSelect = tabStrip.findTabByText("Mail");

       tab.set_visible(false);
       pageView.hide();

       tab.unselect();
       tab.disable();

       if (tabText == "Search") {
           $("#ContentPlaceHolder1_ResultTabVisibleHidden").attr("value", "0");

       }
       else if (tabText == "Viewer") {
           $("#ContentPlaceHolder1_ViewerTabVisibleHidden").attr("value", "0");
       }

       if (tabToSelect)
           tabToSelect.set_selected(true);


   }