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

Treeview Display issues in IE7

2 Answers 69 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
AP
Top achievements
Rank 1
Veteran
AP asked on 30 Nov 2012, 04:05 PM

I have an application based around a Kendo treeview, which displays fairly complex hierarchical data (with html passed via a kendo datasource).

 

This works fine in IE 8,9 and 10, and also Chrome. However, when using IE7 (or IE8 in compatibility mode), there are two issues:-

  •  If the number of parent items exceeds the div height, the treeview isn't clipped (although the div scrollbar is shown), resulting in the treeview overwriting other interface elements.
  • Initially the expand arrows are shown, but all except the top level arrows have a tendency to disappear when hovered over.

The treeview is defined as a div:-

<div id="AjaxTreeView" style="height:600px; width:490px;" ></div>
</div>

And then initialised on the page load:-

var treeSource = new kendo.data.HierarchicalDataSource({
            schema:{
                model:{
                    hasChildren: "HasChildren",
                   
                     
                    children: "Items",
                    id:"Id"
                    
                }
            }
             
        });
 
         
 
$('#AjaxTreeView').kendoTreeView({
            dataSource: treeSource,
            template: "#=  item.Text # ",
            loadOnDemand: false,
            dragAndDrop: @ViewBag.DragDrop,
            select: onSelect,
            dragstart: onNodeDragStart,
            drag: onNodeDragging,
            drop : onNodeDrop
});

The drag/drop option is set via the .NET MVC view bag, based upon a users permissions.

Unfortunately, IE7 is still the default browser for most of the users who will use this application, and it would be nice to enable the application to work with it, rather than have to get them all to upgrade.

Thanks

2 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 03 Dec 2012, 11:30 AM
Hello Andrew,

The first problem is probably caused by the fact that there are positioned elements inside the TreeView, which trigger a known IE bug. It is resolved by applying a position:relative style to the scrollable container, i.e. the TreeView <div>.

The second problem is probably hasLayout-related, so I advise you to experiment whether triggering layout with a zoom:1 style to specific elements will fix the issue. For example, you can apply zoom:1 to the TreeView <div> or <ul>, or item <li>s, or the icons, etc.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
AP
Top achievements
Rank 1
Veteran
answered on 03 Dec 2012, 11:58 AM
Thanks for this. Setting the DIV to position:relative worked a treat. The expand arrows are still problematic (setting the DIV to zoom:1 didn't change anything).

I will experiment with the tree items html, however as this is generated dynamically server side (differently for each level) it will be fiddly.

Thanks
Tags
TreeView
Asked by
AP
Top achievements
Rank 1
Veteran
Answers by
Dimo
Telerik team
AP
Top achievements
Rank 1
Veteran
Share this question
or