Apply TabTemplate to a tab created client side

7 posts, 0 answers
  1. mzn developer
    mzn developer avatar
    68 posts
    Member since:
    Jul 2005

    Posted 15 Aug 2008 Link to this post

    Is there a way to create a tab client side and apply a tab template to it?  I have the template being applied to all tabs and it works if they were created on the initial load of the page but when I add a tab using client-only code the tab template is not applied. 

    Update.  I was creating the template server side which would explain why the template would not be applied to tabs created client side.  Does anyone have more information on making a global tab template that will be applied to all tabs (hopefully including newly created tabs client side).

    I've seen this example (http://www.telerik.com/DEMOS/ASPNET/Prometheus/TabStrip/Examples/Functionality/Templates/DefaultCS.aspx) which is done by applying tab specific templates, not a global template.  I've also seen the help information here:
    http://www.telerik.com/help/aspnet-ajax/tab_add-templates-design-time.html

    These are not helpful at explaining simple things like getting the tab text using Databinder.Eval so you can set it in a global template (which is required for dynamically created tabs).  I would like to do a little more advanced work with tab templates but need a small push in the right direction.
  2. mzn developer
    mzn developer avatar
    68 posts
    Member since:
    Jul 2005

    Posted 15 Aug 2008 Link to this post

    Ok.  After further searching I found how to use Eval to get the data from the tab (http://www.telerik.com/community/forums/thread/b311D-bkatcd.aspx).  Although that still brings me back to my original question.  I'm applying a global template to my tabs and it looks fine with the tabs created on the initial load but any tabs created client side do not get the template applied to them.

    Is there a way to manually apply the template when I add it client side.  Or would there even be a way for me to manually add my items individually that I have in the template to the tab. 
    For example, the global template is applied to all tabs on the initial load and includes the tab text and an image on the right side of it.  When I create a new tab client side is there a way for me to create a new image object and add it as a child control of that tab, similar to what applying the template does.

    Thanks.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. mzn developer
    mzn developer avatar
    68 posts
    Member since:
    Jul 2005

    Posted 15 Aug 2008 Link to this post

    Guess I'm answering all my own questions.  After more digging & much trial and error, I have got it so when I create a new tab client side I can create new elements in javascript and basically re-create the same formatting that I have in my template. 

    Although this is not the ideal way to do it I'm assuming that it can't be done by applying templates client side, they're probably applied to each tab during the server side rendering process even if the template is laid out in the design view.

    But still, if anyone knows how to apply a template to a tab created client side I'd love to hear it.

    For anyone that needs my solution here is what I have:

    In the global template I'm adding an image (an X) that I can use to close a tab.  

    <TabTemplate>
        <label style="cursor: pointer"><%# DataBinder.Eval(Container, "Text") %></label>
        <img alt="Delete Tab" title="Delete Tab" src="Images/delete_8x8_disabled.gif" onclick="RemoveTab(<%# DataBinder.Eval(Container, "Index") %>, event);" class="tab_DeleteImage" onmouseover="this.src='Images/delete_8x8.gif';" onmouseout="this.src='Images/delete_8x8_disabled.gif';" />
    </TabTemplate>

    This will apply the template (a label for the text and an image for the close button) to all tabs created on the initial load of the page.

    Then I created a javascript function that creates a new image and returns it. This also sets the same attributes as were set on the image on the template (I have it so when you hover the mouse over the image it will change from a greyed out image to a colored one):

    function CreateDeleteImage(inTabIndex){
        var deleteImage = document.createElement("img");
        deleteImage.src=
    "Images/delete_8x8_disabled.gif";
        deleteImage.title = deleteImage.alt =
    "Delete Tab";
        deleteImage.className =
    "tab_DeleteImage";
        deleteImage.setAttribute(
    "OnClick", "RemoveTab(" + inTabIndex + ", event);");
        deleteImage.setAttribute(
    "onmouseover", "this.src='Images/delete_8x8.gif';");
        deleteImage.setAttribute(
    "onmouseout", "this.src='Images/delete_8x8_disabled.gif';");
        return deleteImage;
    }

    Then in the "AddNewTab" javascript function, after you create the new tab, you must add it to the tab collection.  Then get the new image using the CreateDeleteImage function and append it to the tab:

    var

    deleteImage = CreateDeleteImage(tab.get_index());
    tab.get_element().firstChild.firstChild.firstChild.appendChild(deleteImage);

  5. Robert Boucher
    Robert Boucher avatar
    2 posts
    Member since:
    Apr 2010

    Posted 23 Apr 2010 Link to this post

    I would also love to know how to apply a template, created at design time, to a tab created via client-side API.
  6. Yana
    Admin
    Yana avatar
    4554 posts

    Posted 26 Apr 2010 Link to this post

    Hello,

    I'm afraid that you cannot apply the template to tabs created at the client.

    Greetings,
    Yana
    the Telerik team

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
  7. Olivier
    Olivier avatar
    146 posts
    Member since:
    Nov 2010

    Posted 10 Mar 2014 Link to this post

    Hello

    i want to user tabTemplate in a tab created client side, to do same like mzn developper
    A picture to remove tab , like a firefox mozilla.

    Do it the news for 2008 or 2010  , please ?

    thanks
    OLivier
  8. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Mar 2014 in reply to Olivier Link to this post

    Hi Olivier,

    Please take a look into this help documentation for creating closable tabs from client side.

    Thanks,
    Shinu.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017