RadTreeView not showing properly after migrating to 2010.

2 posts, 0 answers
  1. Asset Manager
    Asset Manager avatar
    1 posts
    Member since:
    Jul 2009

    Posted 23 Aug 2011 Link to this post

     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.

     

  2. Cat Cheshire
    Cat Cheshire avatar
    128 posts
    Member since:
    Jun 2010

    Posted 29 Aug 2011 Link to this post


    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>


Back to Top