0

I am using Kendo UI treeview to display certain data dynamically. I have no issues with the data loaded. But found one scenario which is as follows

When I click on the expand icon to the left of the node(which has a child node), the expand icon and the collapse icon overlaps with that of the nodes. When the focus moves out of that tabstrip which has the treeview data, then the expand/collapse icon does not overlap and it is to the left of the node. When I hover to the tab strip containing the data , then both the icons overlap with that of the nodes.

Following is the pane and the tab strip declaration

<div id="inner-1"   class="configuration k-widget k-header" style="height: 100%; border: 0;background-   color:#E1E5E7;"></div>

var leftTabStip=null;
leftTabStip = $("#inner-1").kendoTabStrip().data("kendoTabStrip");
leftTabStip.append({
            animation:  {
                open: {
                    effects: "fadeIn"
                }
            },
            text: "Sample",
            content: '<div id="treeSample" style="overflow:auto;position:relative;border:1px solid #B0B0B0;">  </div><ul class="options"> ',
            encoded: false
 });

finalPath is the array that contains the tree hierarchy data and I am using these 3 properties id,text and encoded..

var localDataSource = new kendo.data.HierarchicalDataSource({
    data:finalPath
});

var groupTree1 = $("#treeSample").kendoTreeView({
    dataSource: localDataSource
}).data("kendoTreeView");

Is there any way to ensure that the icons and nodes do not overlap and that even if i hover/ move out of tab strip or click on the icon, the data should be displayed properly like the expand/collapse icon should be to the left of the node and not overlap. Please guide me.

Thanks in advance.

mick_000
  • 69
  • 3
  • 9

1 Answers1

0

I had the same problem with IE 8 running in compatibility view settings (i.e. IE 7 document mode)

Found this link quite useful:

...The problem is probably hasLayout related in IE 7, so I advise you to experiment whether triggering layout with a zoom:1 style to specific elements will fix the issue...

This css I applied to treeview, fixed the same problem in my case:

 li
    {
       zoom: 1;
    }
voodie99
  • 11
  • 1