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

RadTreeView not showing properly after migrating to 2010.

1 Answer 106 Views
WebParts for SharePoint
This is a migrated thread and some comments may be shown as answers.
Asset Manager
Top achievements
Rank 1
Asset Manager asked on 23 Aug 2011, 07:44 PM
 The telerik rad tree view is not behaving properly, we have it as a left navigation menu into a user control that gets loaded inside the master page. This issue is just  in some subsites of a big site collection migrated.

The menu will display the sites and subsites that SharePoint has.
The problem is that the arrows that it has on the left, ( see attached image please),  sometimes those arrows are pointing in a right direction ( right  for  the subsites of the site that im visiting ) , but in some other sites, the arrows wiill not show up correctly. This is all in the same site collection.

Here is the code. See atached image to know .

<

 

 

script type="text/javascript">

 

 

 

function ClientDoubleClick(sender, args) {

 

 

 

var node = args.get_node();

 

args.set_cancel(

 

true);

 

}

 

 

function ClientNodeClicking(sender, args) {

 

 

 

var node = args.get_node();

 

args.set_cancel(

 

true);

 

}

 

 

function ClientNodeExpanded(sender, args) {

 

 

 

var node = args.get_node();

 

 

 

if (node.get_level() == 0) {

 

args.set_cancel(

 

true);

 

}

 

 

else {

 

ResetNodes(node,

 

"up");

 

ResetNodes(node,

 

"down");

 

 

 

var attributes = node.get_attributes();

 

 

 

var level = node.get_level();

 

 

 

var nodeID = attributes.getAttribute("nodeID");

 

 

 

var nodeDiv = document.getElementById(nodeID);

 

 

 

var nextNodeDiv;

 

 

 

if (node.get_nextNode() != null) {

 

 

 

var nextNode = node.get_nextNode();

 

 

 

var nextNodeAttributes = nextNode.get_attributes();

 

 

 

var nextNodeID = nextNodeAttributes.getAttribute("nodeID");

 

nextNodeDiv = document.getElementById(nextNodeID);

}

 

 

if (level == 1) {

 

 

 

var endTreeViewDiv = document.getElementById("ctl00_CardinalLeftNav_endTreeView");

 

endTreeViewDiv.className =

 

"cahCollaspedEnd";

 

nodeDiv.className =

 

"cahLevel1 cahExpanded1";

 

 

 

if (node.get_nextNode() != null)

 

nextNodeDiv.className =

 

"cahLevel1 cahSiblingExpanded1";

 

 

 

else

 

endTreeViewDiv.className =

 

"cahExpandedEnd";

 

}

 

 

else if (level == 2) {

 

nodeDiv.className =

 

"cahLevel2 cahExpanded2";

 

}

 

 

else if (level == 3) {

 

nodeDiv.className =

 

"cahLevel3 cahExpanded3";

 

 

 

if (node.get_nextNode() != null)

 

nextNodeDiv.className =

 

"cahLevel3 cahSiblingExpanded3";

 

}

 

 

else if (level == 4) {

 

nodeDiv.className =

 

"cahLevel4 cahExpanded4";

 

}

}

}

 

 

function ClientNodeCollapsed(sender, args) {

 

 

 

var node = args.get_node();

 

 

 

if (node.get_level() == 0) {

 

args.set_cancel(

 

true);

 

}

 

 

else {

 

ResetNodes(node,

 

"up");

 

ResetNodes(node,

 

"down");

 

}

}

 

 

function ResetNodes(node, direction) {

 

 

 

if (node != null) {

 

 

 

var attributes = node.get_attributes();

 

 

 

var level = node.get_level();

 

 

 

var nodeID = attributes.getAttribute("nodeID");

 

 

 

var nodeDiv = document.getElementById(nodeID);

 

 

 

if (level == 1) {

 

nodeDiv.className =

 

"cahLevel1";

 

 

 

var endTreeViewDiv = document.getElementById("ctl00_CardinalLeftNav_endTreeView");

 

endTreeViewDiv.className =

 

"cahCollaspedEnd";

 

}

 

 

else if (level == 2) {

 

nodeDiv.className =

 

"cahLevel2";

 

}

 

 

else if (level == 3) {

 

nodeDiv.className =

 

"cahLevel3";

 

}

 

 

else if (level == 4) {

 

nodeDiv.className =

 

"cahLevel4";

 

}

 

 

if (direction == "up")

 

ResetNodes(node.get_previousNode(), direction)

 

 

else

 

ResetNodes(node.get_nextNode(), direction)

}

}

</

 

 

script>

 

<

 

 

telerik1:RadTreeView ID="CardinalRadTreeView" runat="server" Skin="" EnableTheming="false" OnNodeExpand="RadTreeView1_NodeExpand"

 

 

 

SingleExpandPath="true" ShowLineImages="False" OnClientNodeExpanded="ClientNodeExpanded"

 

 

 

OnClientDoubleClick="ClientDoubleClick" OnClientNodeCollapsed="ClientNodeCollapsed"

 

 

 

OnClientNodeClicking="ClientNodeClicking"></telerik1:RadTreeView>


Is there any known issue about the styles or the misbehaving look & feel on the radtreeview on SharePoint 2010???

Help Please.

 

1 Answer, 1 is accepted

Sort by
0
Cat Cheshire
Top achievements
Rank 1
answered on 29 Aug 2011, 04:41 PM

As I can see - you use custom css styles and images to display the expanded and collapsed states of the RadTreeNode.
There is an easier way to achieve the same.
Instead of implementing a complex client-side functionality to switch expand/collapse arrow you can simply override some of the build-in RadTreeView styles in this manner:
<style type="text/css">
 
div.RadTreeView  .rtMinus
{
    background-image: url("images/down.jpg");
    background-position: 0 0px;
}
     
div.RadTreeView  .rtPlus
     
{
    background-image: url("images/right.jpg");
    background-position: 0 0px;
}
</style>

<telerik:RadTreeView ID="CardinalRadTreeView" runat="server"
    Skin="" EnableTheming="false"
    SingleExpandPath="true" ShowLineImages="False" >
    <Nodes>
        <telerik:RadTreeNode runat="server" Text="Africa"
            Expanded="true" nodeID="1">
            <Nodes>
                <telerik:RadTreeNode runat="server" Text="Egypt" nodeID="2">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Cairo" nodeID="3">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode runat="server" Text="Australia" nodeID="4">
            <Nodes>
                <telerik:RadTreeNode runat="server" Text="South East Australia" nodeID="5">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Sydney" nodeID="6">
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
        <telerik:RadTreeNode runat="server" Text="Asia" Expanded="true" nodeID="7">
            <Nodes>
                <telerik:RadTreeNode runat="server" Text="China" nodeID="8">
                    <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Bejing" nodeID="9">
                        <Nodes>
                        <telerik:RadTreeNode runat="server" Text="Bejing2"
                            nodeID="10"></telerik:RadTreeNode>
                        </Nodes>
                        </telerik:RadTreeNode>
                    </Nodes>
                </telerik:RadTreeNode>
            </Nodes>
        </telerik:RadTreeNode>
    </Nodes>
</telerik:RadTreeView>

Tags
WebParts for SharePoint
Asked by
Asset Manager
Top achievements
Rank 1
Answers by
Cat Cheshire
Top achievements
Rank 1
Share this question
or