This is a migrated thread and some comments may be shown as answers.

Apply TabTemplate to a tab created client side

6 Answers 117 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
mzn developer
Top achievements
Rank 1
mzn developer asked on 15 Aug 2008, 06:16 PM
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.

6 Answers, 1 is accepted

Sort by
0
mzn developer
Top achievements
Rank 1
answered on 15 Aug 2008, 06:50 PM
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.
0
mzn developer
Top achievements
Rank 1
answered on 15 Aug 2008, 08:46 PM
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);

0
Robert Boucher
Top achievements
Rank 1
answered on 23 Apr 2010, 07:02 PM
I would also love to know how to apply a template, created at design time, to a tab created via client-side API.
0
Yana
Telerik team
answered on 26 Apr 2010, 07:59 AM
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.
0
Olivier
Top achievements
Rank 2
answered on 10 Mar 2014, 06:22 PM
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
0
Shinu
Top achievements
Rank 2
answered on 12 Mar 2014, 08:51 AM
Hi Olivier,

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

Thanks,
Shinu.
Tags
TabStrip
Asked by
mzn developer
Top achievements
Rank 1
Answers by
mzn developer
Top achievements
Rank 1
Robert Boucher
Top achievements
Rank 1
Yana
Telerik team
Olivier
Top achievements
Rank 2
Shinu
Top achievements
Rank 2
Share this question
or