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
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.
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);
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.
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
Please take a look into this help documentation for creating closable tabs from client side.
Thanks,
Shinu.