Treeview Display issues in IE7

[AP]

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

[Dimo]

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

[AP]

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