add close button on tab

9 posts, 0 answers
  1. Johnny
    Johnny avatar
    86 posts
    Member since:
    Dec 2010

    Posted 20 Dec 2011 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Dec 2011 Link to this post

    Hello,

    Take a look into the following demo.
    TabStrip / Templates

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin
    Kevin avatar
    8 posts
    Member since:
    Feb 2012

    Posted 02 Feb 2012 Link to this post

    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
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 03 Feb 2012 Link to this post

    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.
  6. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 03 Feb 2012 Link to this post

    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
  7. Johnny
    Johnny avatar
    86 posts
    Member since:
    Dec 2010

    Posted 19 Feb 2012 Link to this post

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

  8. Bozhidar
    Admin
    Bozhidar avatar
    1103 posts

    Posted 20 Feb 2012 Link to this post

    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 >>
  9. Johnny
    Johnny avatar
    86 posts
    Member since:
    Dec 2010

    Posted 20 Feb 2012 Link to this post

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



  10. Johnny
    Johnny avatar
    86 posts
    Member since:
    Dec 2010

    Posted 20 Feb 2012 Link to this post

    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);
     
     
       }
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017