Object doesn't support id property

[Michael Weiss]

Hello
I am trying to add a tooltip to a RadTreeView component using a web service. I get several errors stating that the "Object doesn't support this property or method" beginning with the id property as shown in the attached screen shots.
My RadToolTipManager object is:

<telerik:RadToolTipManager ID="RadToolTipManager1" Width="300px" Skin="Black" Height="200px" HideDelay="3" RelativeTo="Element" runat="server" EnableShadow="true" OffsetX="5" Position="MiddleRight">
<WebServiceSettings Path="~/TreeViewWebService.asmx" Method="GetTestScenarioExecutionResultToolTip" />
</telerik:RadToolTipManager>

My RadTreeView object is:

<telerik:RadTreeView ID="RadTreeViewParts" runat="server" Height="100%" Width="100%" OnClientNodePopulating="nodePartsPopulating" OnNodeClick="RadTreeViewParts_NodeClick" OnClientNodeDataBound="OnClientNodeDataBoundHandler" OnClientMouseOver="OnPartsTreeNodeMouseOver">
<WebServiceSettings Path="~/TreeViewWebService.asmx" Method="GetPartNodes" />
</telerik:RadTreeView>

My client side javascript code is:

<script type="text/javascript">
 function nodePartsPopulating(sender, eventArgs)
{
var node = eventArgs.get_node();
var context = eventArgs.get_context();
context["Text"] = node.get_text();
context["Value"] = node.get_value();
context["Level"] = node.get_level();
context["Category"] = node.get_category();
}



function OnClientNodeDataBoundHandler(sender, e)

{

   var node = e.get_node();

    var nodeLevel = node.get_level();

    if (nodeLevel == 5)

    {

        //node.set_toolTip(node.get_attributes().getAttribute("ToolTip"));

    }

}

function OnPartsTreeNodeMouseOver(sender, eventArgs)

{

      

var node = eventArgs.get_node();

//  var node = sender.get_node();

    var nodeLevel = node.get_level();

    if (nodeLevel == 5)

    {

        var tooltipManager = $find("<%= RadToolTipManager1.ClientID %>");

      

        if (!tooltipManager) return;

      

        //Find the tooltip for this element if it has been created 

        var tooltip = tooltipManager.getToolTipByElement(sender);

      

        //Create a tooltip if no tooltip exists for such node 

        if (!tooltip)

        {

            tooltip = tooltipManager.createToolTip(sender);

            tooltip.set_value(node.get_value());

        }

  

        //Let the tooltip's own show mechanism take over from here - execute the onmouseover just once

        node.onmouseover = null;

  

        //show the tooltip

        tooltip.show();

    }

} 

</script>

My Web Service code is:

[System.Web.Script.Services.ScriptService]
public class TreeViewWebService : WebService
{

#region "GetTestScenarioExecutionResultToolTip"

    [WebMethod(EnableSession = true)]
    public string GetTestScenarioExecutionResultToolTip(object context)
    {
        IDictionary<string, object> contextDictionary = (IDictionary<string, object>)context;
        string elementID = ((string)contextDictionary["Value"]);

        if (elementID == string.Empty)
        {
            throw new Exception("No Value argument is provided to the webservice!");
        }

        DataTable information = new DataTable();
        SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["DatabasePKIMrpDbDEV1"].ConnectionString);
        try
        {
            conn.Open();
            SqlDataAdapter adapter = new SqlDataAdapter();
            try
            {
                adapter.SelectCommand = new SqlCommand("SELECT * FROM [vwToolTipTestScenarioExecutionResult] WHERE TestScenarioExecutionResultKey=@id", conn);
                adapter.SelectCommand.Parameters.AddWithValue("@id", elementID);
                adapter.Fill(information);
            }
            finally
            {
                if (!Object.Equals(adapter.SelectCommand, null)) adapter.SelectCommand.Dispose();
            }
        }
        finally
        {
            if (conn.State == ConnectionState.Open)
            {
                conn.Close();
            }
        }
        DataRow row = information.Rows[0];
        return ViewManager.RenderView("~/TestScenarioExecutionResult/TestScenarioExecutionResultToolTip.ascx", information);

    }

#endregion

I also use the RenderView class from the Web Service ToolTip example:

public class ViewManager
{
    public static string RenderView(string path)
    {
        return RenderView(path, null);
    }

    public static string RenderView(string path, object data)
    {
        Page pageHolder = new Page();
        UserControl viewControl = (UserControl)pageHolder.LoadControl(path);

        if (data != null)
        {
            Type viewControlType = viewControl.GetType();
            FieldInfo field = viewControlType.GetField("Data");

            if (field != null)
            {
                field.SetValue(viewControl, data);
            }
            else
            {
                throw new Exception("View file: " + path + " does not have a public Data property");
            }
        }

        pageHolder.Controls.Add(viewControl);

        StringWriter output = new StringWriter();
        HttpContext.Current.Server.Execute(pageHolder, output, false);

        return output.ToString();
    }
}

I actually don't use the OnClientNodeDataBoundHandler code with the web service approach. It is in place to support showing the standard windows tooltip. This is why the line that sets the tooltip in that function is commented out.
Any suggestions would be greatly appreciated.
Thank you,
Michael

[Svetlina Anati]

Hello Michael,

I already answered your support thread and for your convenience and for others who might encouter the same problem I pasted my reply below:

 I built up a test demo base on your code and I was able to reproduce the issue.

It comes from the fact that you pass sender as a parameter when you reference or get a tooltip in the OnClientMouseOver event. Note, that the sender is actually the RadTreeView client object while you should pass the HTML element which represents the hovered treeview nod. To achieve this you should extract the node client object and then - its HTML representation as shown below:

function OnPartsTreeNodeMouseOver(sender, eventArgs)
{
    var node = eventArgs.get_node();
    //  var node = sender.get_node();
    var nodeLevel = node.get_level();
    if (nodeLevel == 5)
    {
        var tooltipManager = $find("<%= RadToolTipManager1.ClientID %>");
        if (!tooltipManager) return;
        var nodeElement = eventArgs.get_node().get_element();
        //Find the tooltip for this element if it has been created
        var tooltip = tooltipManager.getToolTipByElement(nodeElement);
        //Create a tooltip if no tooltip exists for such node
        if (!tooltip)
        {
            tooltip = tooltipManager.createToolTip(nodeElement);
            tooltip.set_value(node.get_value());
        }
        //Let the tooltip's own show mechanism take over from here - execute the onmouseover just once
        node.onmouseover = null;
        //show the tooltip
        tooltip.show();
    }
}

After I modified the demo as explained above it started working as expected.

I hope that my reply is detailed enough and helpful, let me know how it goes.

 

Greetings,
Svetlina
the Telerik team