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

TreeView in TabStrip

8 Answers 73 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
P
Top achievements
Rank 1
P asked on 04 Mar 2010, 09:44 AM
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();
%>

8 Answers, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 09 Mar 2010, 04:24 PM
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.
0
Stepney
Top achievements
Rank 1
answered on 06 Apr 2010, 05:22 PM
Any progress with this?

I have just run into the same problem.
0
P
Top achievements
Rank 1
answered on 07 Apr 2010, 06:57 AM
I used jquery tabs instead of teleriks.
0
Alex Gyoshev
Telerik team
answered on 07 Apr 2010, 08:54 AM
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.
0
Stepney
Top achievements
Rank 1
answered on 07 Apr 2010, 11:32 AM
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
0
Stepney
Top achievements
Rank 1
answered on 09 Apr 2010, 04:37 PM
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.
0
dly
Top achievements
Rank 1
answered on 12 Apr 2010, 10:34 PM
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.
0
dly
Top achievements
Rank 1
answered on 13 Apr 2010, 03:28 AM

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(thisthis._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(thisthis._click)) 

 

 

 

 

Tags
TreeView
Asked by
P
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Stepney
Top achievements
Rank 1
P
Top achievements
Rank 1
Alex Gyoshev
Telerik team
dly
Top achievements
Rank 1
Share this question
or