Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > TabStrip > add close button on tab

• Johnny Intermediate

  Posted on Dec 20, 2011 (permalink)

  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

  Reply

• Princy MVP

  Posted on Dec 21, 2011 (permalink)

  Hello,
  
  Take a look into the following demo.
  TabStrip / Templates
  
  Thanks,
  Princy.

  Reply


• Kevin

  Posted on Feb 2, 2012 (permalink)

  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

  Reply

• Princy MVP

  Posted on Feb 3, 2012 (permalink)

  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.

  Reply

• Bozhidar Bozhidar

  Posted on Feb 3, 2012 (permalink)

  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

  If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now

  Reply

• Johnny Intermediate

  Posted on Feb 19, 2012 (permalink)

  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);

  
  

  Reply

• Bozhidar Bozhidar

  Posted on Feb 20, 2012 (permalink)

  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

  Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>

  Reply

• Johnny Intermediate

  Posted on Feb 20, 2012 (permalink)

  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);

   

   

    }

  
  
  
  

  Reply

• Johnny Intermediate

  Posted on Feb 20, 2012 (permalink)

  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);

   

   

     }

  Reply

Back to Top

Home / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > TabStrip > add close button on tab