TreeView in TabStrip

[P]

Hi,
When i put Telerik treeview control into Tab control, it appears as another tabstrip (nested).
Any idea, how to add styles/class to treeView to view it normally in tabstrip?
Cheers
http://img16.imageshack.us/img16/7080/treeintab.jpg
<% Html.Telerik().TabStrip()
.Name("TabStripEditClient")
.Items(parent =>
{
parent.Add()
.Text("TreeC")
.Selected(true)
.Content(() =>
{%>
Tree view  <%= Html.Telerik().TreeView()
.Name("TreeView").AssetKey("Id")
.ClientEvents(events => events
.OnSelect("onSelectNode"))
.BindTo(Model, mappings =>
{
mappings.For<Models.ProductCategory>(binding => binding
.ItemDataBound((item, category) =>
{
item.Text =  category.Name;
item.Value = category.Id.ToString();

})
.Children(category => category.Children));
})
%>
<%
});
parent.Add()
.Text("Other")
.Content(() =>
{%>something
<%
});

})
.Render();
%>

[Georgi Krustev]

Hello P,

The described behavior, even not desired, is expected, because of the used primitives css styles. The treeview t-item style inherits the t-item CSS class from the tabstrip and etc. I will forward this issue to our developers for further investigation. I will let you know once I have a concrete solution of the problem.

Best regards,
Georgi Krustev
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.

[Stepney]

Any progress with this?

I have just run into the same problem.

[P]

I used jquery tabs instead of teleriks.

[Alex Gyoshev]

Hello P, Tim,

I just fixed the issue. You can find the updated stylesheet attached. The other required change is that you add a "t-tabstrip-items" class to the UL element that holds the tabstrip items - this can be done in the TabStripHtmlBuilder.cs, like this:

            new HtmlTag("ul").AddClass(UIPrimitives.ResetStyle, "t-tabstrip-items").AppendTo(div);

(the bolded is the new code).

All the best,
Alex Gyoshev
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.

[Stepney]

Well done it works.

I would have confirmed this an hour ago, but I ran into version hell. I rebuilt the dll but the only sources I have are those that were released for version 2010.1.309. However, you guys put out a 2010.1.329 version to fix another bug (with the grid column headers) and so I've lot that fix.

Tim

[Stepney]

Can we have a version of 329 (or later) that has this fix in?

I've built a dll with this fix, but it from the release 309. I've lost the other fixes that have been made like the hidden column headers in the grid.

[dly]

I made the changes as you described to version 2010.1.309.  The treeview now renders correctly in the tabstrip but the hover is not working correctly.  It wants to select the outter <li> or <div> and sometimes the outter treeview <div>.  See attached image.

However, the treeview renders and hovers correctly if used outside the tabstrip.

[dly]

Found solution: 

Modified telerik.tabstrip.js

Changed: 

$('.t-item:not(.t-state-disabled)', element)
   .live('mouseenter', $t.hover)
   .live('mouseleave', $t.leave)
   .live(options.activateEvent, $t.delegate(this, this._click))

To:

 

 

$('.t-tabstrip-items > .t-item:not(.t-state-disabled)', element)
   .live('mouseenter', $t.hover)
   .live('mouseleave', $t.leave)
   .live(options.activateEvent, $t.delegate(this, this._click))