|
|
Rank: Member
Groups: Member
Joined: 2/9/2009
Posts: 23
|
Hi,
I have a set of dynamically created TabItems in my Tabstrip. I wonder if it is possible to add a button or linkbutton on the TabItem when the tabitem is selected. I would use it for a "Close Tab" button.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, The easiest way is to do with raw HTML. For example, instead of setting the TabItem's Text to "Tab1", you would set it to "Tab1 <a href='javascript:closeTab(0)'>X<a>". At here "closeTab" is a JavaScript function you would provide. Inside the function you can call back to the server (either with an AJAX based solution, for example, ASP.NET AJAX or our Callback control, or calling __doPostBack directly). If you are not familiar with either one, you can also place a dummy LinkButton inside your page. Run the page and then view page source and you will see the LinkButton is rendered as something similar to the <a> element above with a href="javascript:....." attribute. Copy that part and place it into your Tab item. That way when the "close button" is clicked on your TabItem, it will trigger the original LinkButton's Click event. You may also want to consider to place the original LinkButton inside a “<div style=’display:none’></div>” block so that the LinkButton itself is not visible to end users. Thanks!
|
|
Rank: Member
Groups: Member
Joined: 2/9/2009
Posts: 23
|
OK, thanks.
I already did that, but I can't find a smooth way to only display the link in selected mode. Have to use a lot of stringmanipulation
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Hi, There is a cleaner way to do it with CSS without doing any string manipulations. You would first put something like this in your page:
Code: HTML/ASPX
<style type="text/css">
.normal_tab a
{
display: none;
}
.selected_tab a
{
display: inline;
}
</style>
Then go to TabStrip Builder and edit the _Default look item's (or other look item that you may use) NormalStyle and SelectedStyle property. You would set NormalStyle.CssClass to "normal_tab" and SelectedStyle.CssClass to "selected_tab". In another word, to apply CSS rule "normal_tab" to non selected tabs and CSS rule "selected_tab" to the selected tab. Because the selector names end with an element name (in this case "a"), the rules are actually not applied to the tab itself. It is applied to "a" element that is a descendant of the tab. So indirectly you are applying "display:inline" to "a" element in the selected tab and "display:none" to "a" element in other tabs. Hope this helps. Thanks!
|
|
Rank: Member
Groups: Member
Joined: 2/9/2009
Posts: 23
|
Hi. NEAT!
Thanks a lot. That did the work.
|
|
Rank: Administration
Groups: Administration
Joined: 5/27/2007
Posts: 24,194
|
Cool. Glad that it works for you!
|
|