[Solved] RadTreeView always null

[Herb Ramos]

Hi,

I am creating a SharePoint custom field which contains a RadTreeView control.  The control is contained in a table
in the Custom fields ascx file (a snippet is shown below). 

<td style="height: 100%;">
<radT:RadTreeView ID="radTreeModule" runat="server">
    <nodes>
       <radT:RadTreeNode runat="server" Text="New Item"></radT:RadTreeNode>
       <radT:RadTreeNode runat="server" Text="New Item"></radT:RadTreeNode>
    </nodes>
 </radT:RadTreeView>
 </td>

When CreateChildControls is called on the custom field rendering, I attempt to find the control and take some further action (snippet below).

 protected override void CreateChildControls()
 {
    if (Field == null) return;
           base.CreateChildControls(); 
          
    try
    {
Telerik.WebControls.RadTreeView   treeView =
(Telerik.WebControls.RadTreeView)TemplateContainer.FindControl("radTreeModule");
........

My problem is the control is never found and my treeView variable is always null.
I have successfully created other custom fields using native windows web controls.  The problem seems to be in the TemplateContainer not being able to find the control by name.

Can anyone help?

Thanks

Note:
I have the control installed in the GAC
It is in the SafeControls list.

 

 

[Lini]

Hi,

I assume that you are using SharePoint 2007 and the ASP.NET 2.0 version of RadTreeView.

If the treeview control is not yet created, then you can modify your code to add it dynamically from the server, instead of declaring it in the ASP.NET code. For example:

<td style="height: 100%;" id="tdTreeContainer" runat="server">
 </td>

and in the code:
protected override void CreateChildControls()
 {
    if (Field == null) return;
    base.CreateChildControls();  
   
    Telerik.WebControls.RadTreeView   treeView = new Telerik.WebControls.RadTreeView();
    treeView.Id = "radTreeModule";

...(create tree nodes if needed)

    System.Web.UI.HtmlControls.HtmlTableCell container = (System.Web.UI.HtmlControls.HtmlTableCell)TemplateContainer.FindControl("tdTreeContainer");
    container.Controls.Add(treeView);
....


Sincerely yours,
Lini
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Herb Ramos]

Hi Lini,

The problem appears to be in the javascript when I attempt to run client side code using the document.getElementById('<%= radTreeModule.ClientID %>);  syntax.  When ever I try to using this syntax, the control does not render or show.  If I remove this js, the control renders, but my desired js does not work.

I posted another question detailing the issue titled "How to get rad control object in javascript from custom Sharepoint..."
(http://www.telerik.com/community/forums/thread/b311D-bagham.aspx)

I've been working on this issue for about 10 hours. 
Can you look at this issue and let me know what you think.

I appreciate your help.

[Lini]

Hello,

I don't think that document.getElementById() is the proper way to get the treeview object on the client.
You should use window["<%= radTreeModule.ClientID %>"] instead. For example: 

var tree =  window["<%= radTreeModule.ClientID %>"];

If you decide to create the tree in the code file (on the server), then remember to make it a global variable, so you will be able to access it in a code block in the user control.

Kind regards,
Lini
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Herb Ramos]

Lini,

What you suggested did not work.  Namely, I tried
var tree =  window["<%= radTreeModule.ClientID %>"];
and also
var tree =  <%= radTreeModule.ClientID %>;

When I open the page, the tree control is not shown and the browser does not indicate any js errors.  If I remove the js.  The tree control shows.

To summarize, I created a custom Sharepoint 2007 control, which includes a Telerik tree control.  I have some js function inside the control
rendering html which needs to manipulate the tree.  I can't get the js function to find the tree control correctly.

Do you have any ideas?
Is there a way to include an attachment in this forum?

Here is the code for the ascx file:

<%@ Control Language="C#" Debug="true"  %>
<%@Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@Register TagPrefix="SharePoint" Assembly="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" namespace="Microsoft.SharePoint.WebControls"%>
<%@Register TagPrefix="radT" Assembly="RadTreeView.Net2, Version=6.1.1.0, Culture=neutral, PublicKeyToken=dbd98e0feff9f06b" Namespace="Telerik.WebControls"  %>
   
<!--Tells SharePoint how to render the control -->
<SharePoint:RenderingTemplate ID="GlisiModuleControl" runat="server">
    <Template>
    <script language="javascript" type="text/javascript">
    function FindNodeAndExpandParent(strand, module)
    {   
        var tree = GetTreeControl();
        tree.UnSelectAllNodes;
       
        strandNode = tree.FindNodeByText(strand);
        if (strandNode == null)
        {
            alert("can't find strand with name" + strand + 'in tree');
            return;
        }
               
        var moduleNodes = strandNode.Nodes;
        var i;
        var moduleNode;
        for(i=0; i<=moduleNodes.length; i++)
        {
            if (moduleNodes[i].Text == module)
            {
                moduleNode = moduleNodes[i];
                break;  
            }
        }
       
        //moduleNode = strandNode.FindNodeByText(module);
       
       
        if (moduleNode == null)
            alert("can't find module with name" + module + 'in tree');
        else
        {
            moduleNode.Select;
            strandNode.Expand();
        }
    }
    function TreeNodeClicked()
    {
        var tree = GetTreeControl();
        var selectedNode = tree.SelectedNode;//  GetSelectedNode();
       
        // if node is a root, do nothing
        if (selectedNode.Parent == null)
            return;
       
        // collapse this nodes parent
        selectedNode.Parent.Collapse();
       
        // show the selected value
        //var txtSelectedNode = document.getElementById('txtSelectedNode');
        //txtSelectedNode.value = selectedNode.Text;
       
        //var txtSelectedNodeParent = document.getElementById('txtSelectedNodeParent');
        //txtSelectedNodeParent.value = selectedNode.Parent.Text;

        var lblSelectedStrand = document.getElementById('lblSelectedStrand');
        lblSelectedStrand.innerText = selectedNode.Parent.Text;
       
        var lblSelectedModule = document.getElementById('lblSelectedModule');
        lblSelectedModule.innerText = selectedNode.Text;
    }
   
    // Gets a handle to the TreeView's selected node.
    function GetSelectedNode()
    {
       var tree = GetTreeControl();
       var selectedNode;

       if ( null == tree || undefined == tree )
           return null;

       var selectedNodes = tree.GetSelectedNodes();
       selectedNode = selectedNodes[0];

       if ( null == selectedNode || undefined == selectedNode )
           return null;

       return selectedNode;
    }
  
   // Gets a handle to the TreeView.
   function GetTreeControl()
   {
       // Get a handle to the TreeView.
       var tree = null;
       alert ("Tree Object " + tree);      
       alert (document.getElementById('GlisiModuleControl'));
       if ( tree == null || tree == undefined )
           return null;
       return tree;
   }  

    </script>
    <table border="0" cellpadding="0" cellspacing="0" style="text-align: left">
       <tr>
            <td style="font-size: 10pt; font-family: Arial; padding-right: 5px; border-top: darkgray 1px solid; padding-bottom: 1px; padding-top: 1px; background-color: #CCCCCC;">
               <span style="font-weight: bold;">Role:</span>&nbsp;
               <asp:Label ID="lblSelectedStrand" runat="server" Text="not chosen"></asp:Label>
            </td>
       </tr>
       <tr>
            <td style="font-size: 10pt; font-family: Arial; height: 100%; padding-right: 5px; padding-bottom: 1px; padding-top: 1px; background-color: #CCCCCC;">
               <span style="font-weight: bold;">Module:</span>&nbsp;
               <asp:Label ID="lblSelectedModule" runat="server" Text="not chosen"></asp:Label>
            </td>
       </tr>
       <tr>
            <td  style="height: 100%; font-size: 10pt; font-family: Arial; padding-bottom: 1px; padding-top: 1px; border-bottom: darkgray 1px solid; background-color: #cccccc;" align="right">
               <input id="btnShowModule" type="button" value="Choose a different Module" onclick="FindNodeAndExpandParent(document.getElementById('lblSelectedStrand').innerText,document.getElementById('lblSelectedModule').innerText);" />
            </td>
       </tr>
       <tr>
            <td style="height: 100%; font-size: 10pt; font-family: Arial; padding-bottom: 2px">To select a new module, <span style="font-weight:bold;">expand the tree and make a selection.</span></td>
       </tr>
       <tr>
            <td style="height: 100%;">
               <radT:RadTreeView ID="radTreeModule" runat="server" Height="100%" Width="407px" AfterClientClick="TreeNodeClicked();" >
                   <nodes>
                       <radT:RadTreeNode runat="server" Text="New Item"></radT:RadTreeNode>
                       <radT:RadTreeNode runat="server" Text="New Item"></radT:RadTreeNode>
                   </nodes>
               </radT:RadTreeView>
               &nbsp;&nbsp;&nbsp;
               <br />
            </td>
      </tr>
    </table>  
    </Template>
</SharePoint:RenderingTemplate>

[Lini]

Hello Herb Ramos,

I have tried the code you sent, replacing the lines
  // Get a handle to the TreeView.
       var tree = null;

with
  // Get a handle to the TreeView.
       var tree = window["<%= radTreeModule.ClientID %>"];

and the tree control was found successfully.

Perhaps the problem is related to your SharePoint installation itself. I think that by default, code blocks (<%= %>) are not allowed in SharePoint 2007 pages. You need to make sure that code blocks work from inside your template. If they don't then you will need another way of getting the treeview ID on the client.
Greetings,
Lini
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center