Pb with RadTreeView.OnClientNodeClicking when dynamic treeview in combo

[CSurieux]

Hello,
I am generating dynamically a template for a RadComboBox, trying to simulate the declarative sample given for treeview in  combo, it works until the point  where my client side script is never called when a node is selected.

Here is part of he template code where the OnClientNodeClicking   value is set:

        public class PageComboTemplate : ITemplate
        {
            public void InstantiateIn(Control container)
            {
                HtmlGenericControl div1         =   new HtmlGenericControl("div");
                div1.ID                         =   "div1";
                div1.Style.Add( HtmlTextWriterStyle.Display, "block");
    RadTreeView RadTree1            =    new RadTreeView();
                RadTree1.ID                     =   "RadTree1";
                RadTree1.OnClientNodeClicking   =   "nodeClicking";
                RadTree1.Skin                   =   "Web20";
                RadTree1.AllowNodeEditing       =   false;
                RadTree1.EnableDragAndDrop      =   false;
                RadTree1.EnableDragAndDropBetweenNodes  =   false;
                RadTree1.MultipleSelect         =   false;
                RadTree1.DataBinding            +=  new EventHandler(RadTree1_DataBinding);
                div1.Controls.Add(RadTree1);
                container.Controls.Add(div1);
                Trace2.WriteLineIf(ModuleTraceSwitch.Sw.TraceVerbose, string.Format("[V]FastAddPage PageComboTemplate InstantiateIn END container: {0}",container));
            }

Then the script extirped from the sample, in my page declaratives:
...
<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat=server />
<script type="text/javascript" language="javascript">
function nodeClicking(sender, args)
{
 var comboBox = $find('RadComboBox1');
 var node = args.get_node();
 comboBox.set_text(node.get_text());
  comboBox.hideDropDown();
}

function StopPropagation(e)
{
  if(!e)
  {
  e = window.event;
  }
   e.cancelBubble = true;
}
</script>
<div id="centerdiv" style="margin-left:auto; margin-right:auto; width:100%">
<div id="combodiv" style="float:left; width:250px;" >
 <telerik:RadComboBox ID="RadComboBox1" runat="server" Height="140px" Width="80%"
  ShowToggleImage="True" Skin="Web20" style="vertical-align:middle;" >
        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        <ExpandAnimation Type="OutQuart"></ExpandAnimation>
    </telerik:RadComboBox>
 <script type="text/javascript">
  var div1  = document.getElementById("div1");
  div1.onclick = StopPropagation;
 </script>
 </div>
...

 Where ismy error ?
Do I need to use any ScriptControlBlock RadScriptBlock to have it persisted ?

Thanks for help.
CS

[Simon]

Hi Christian Surieux,

I created a simple project using your code. Everything worked as expected.

Please download the test project attached to this post and give it a go.

The project is simple and if it does work on your side, it would mean that the problem might be somewhere in the rest of your page's code.

If this is the case, I would have to ask you to open a formal support ticket and send us either the project or a subset of its files, as this would be the easiest way to proceed further. We will examine the files thoroughly in order to find the cause of the problem and will provide a solution.

All the best,
Simon
the Telerik team

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

[CSurieux]

Hello Simon,

Thanks for answer, from your sample, I found that:

1) as my radcombobox was in a custom control, a problem is in the javascript line :
var comboBox = $find('RadComboBox1');
where comboBox is null.
Seems that I had to use something like  
var comboBox = $find('<%= RadComboBox1.ClientID %>');

the value is not null, but the following line, 
comboBox.set_text(node.get_text());
on the first call set as text for the combo all the nodes text cat together.
If a have node1, node2, node3 I get as text node1node2node3.
Then if I select another node, it get correctly as the selected text ?

2) I am unable to call the javascript  function StopPropagation as done in the radControl for aspnet ajax sample:
I tried in the codebehind div1.Attributes.Add("onclick", "StopPropagation");
but it doesn't work as expected.
what is the usage of this function, you don't put it in your sample and it looks ok  ?

Thanks
CS

[Simon]

Hi Christian Surieux,

Can you check what result returns the node.get_text() function? You can check this by alerting the text of the node like this: alert(node.get_text());.

Regarding the next problem, you attach an event handler to the onclick event of the div element in the code-behind as an attribute and this does not work in FireFox. To attach the event handler I suggest you use ClientScript.RegisterStartupScript method in the IntantiateIn method of the Template as shown below:

        public void InstantiateIn(Control container)
        {
            .....
            container.Controls.Add(div1);

            string script = "document.getElementById('" + div1.ClientID +
                            "').onclick = StopPropagation;";

            container.Page.ClientScript.RegisterStartupScript(
                typeof(Page), "attachHandler", script, true);
        }

Sincerely yours,
Simon
the Telerik team

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

[CSurieux]

Thanks.
CS