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

[Solved] OnClick Event Firing

1 Answer 185 Views

TreeView

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

This question is locked. New answers and comments are not allowed.

Ken Payson asked on 14 Sep 2010, 09:35 PM

I'm not able to get the OnCheckedEvent to fire.

Here is my code. I am using the latest 2010.2.825 release of the Telerik MVC dll. What am I missing?? The OnLoad and OnSelectEvents work and popup and alert box but checking a checkbox doesn't cause anything to happen. I attached the source file that is generated.

<%= Html.Telerik().TreeView()

.Name("TreeView")

.HtmlAttributes(new { style = "width: 300px; float: left; margin-bottom: 30px;" })

.ShowCheckBox(true)

.ClientEvents(events => events

.OnLoad("onLoad")

.OnChecked("onChecked")

.OnSelect("onSelect")

)

.Items(treeView =>

{

treeView.Add().Text("UI Components")

.Items(item =>

{

item.Add().Text("ASP.NET WebForms");

item.Add().Text("Silverlight");

item.Add().Text("ASP.NET MVC");

item.Add().Text("WinForms");

item.Add().Text("WPF");

})

.Expanded(true);

treeView.Add().Text("Data")

.Items(item =>

{

item.Add().Text("OpenAccess ORM");

item.Add().Text("Reporting");

});

treeView.Add().Text("TFS Tools")

.Items(item =>

{

item.Add().Text("Work Item Manager");

item.Add().Text("Project Dashboard");

});

treeView.Add().Text("Automated Testing")

.Items(item =>

{

item.Add().Text("Web Testing Tools");

});

treeView.Add().Text("ASP.NET CMS")

.Items(item =>

{

item.Add().Text("Sitefinity CMS");

});

})

function onLoad(e) { alert("onLoad"); }

function onChecked(e) { alert("onChecked"); }

function onSelect(e) { alert("onSelect"); }

</script>

Here is the the html when viewing source:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head><title>

</title><link rel="Stylesheet" type="text/css" href="../../Styles/Profound.css" /><link rel="Stylesheet" type="text/css" href="../../Styles/jquery-ui-1.8.4.custom.css" /><link type="text/css" href="/Content/2010.2.825/telerik.common.min.css" rel="stylesheet"/>
<link type="text/css" href="/Content/2010.2.825/telerik.vista.min.css" rel="stylesheet"/>

</head>
<body>
    <div>
        
    <h2>ItemDetail</h2>

            <div class="t-widget t-treeview t-reset" id="TreeView" style="width: 300px; float: left; margin-bottom: 30px;"><ul class="t-group t-treeview-lines"><li class="t-item t-first"><div class="t-top"><span class="t-icon t-minus"></span><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="0" /><input class="t-input" name="TreeView_checkedNodes[0].Checked" title="TreeView_checkedNodes[0]." type="checkbox" value="False" /></span><span class="t-in">UI Components</span><input class="t-input" name="itemValue" type="hidden" value="UI Components" /></div><ul class="t-group"><li class="t-item"><div class="t-top"><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="0:0" /><input class="t-input" name="TreeView_checkedNodes[0:0].Checked" title="TreeView_checkedNodes[0:0]." type="checkbox" value="False" /></span><span class="t-in">ASP.NET WebForms</span><input class="t-input" name="itemValue" type="hidden" value="" /></div></li><li class="t-item"><div class="t-mid"><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="0:1" /><input class="t-input" name="TreeView_checkedNodes[0:1].Checked" title="TreeView_checkedNodes[0:1]." type="checkbox" value="False" /></span><span class="t-in">Silverlight</span><input class="t-input" name="itemValue" type="hidden" value="" /></div></li><li class="t-item"><div class="t-mid"><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="0:2" /><input class="t-input" name="TreeView_checkedNodes[0:2].Checked" title="TreeView_checkedNodes[0:2]." type="checkbox" value="False" /></span><span class="t-in">ASP.NET MVC</span><input class="t-input" name="itemValue" type="hidden" value="" /></div></li><li class="t-item"><div class="t-mid"><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="0:3" /><input class="t-input" name="TreeView_checkedNodes[0:3].Checked" title="TreeView_checkedNodes[0:3]." type="checkbox" value="False" /></span><span class="t-in">WinForms</span><input class="t-input" name="itemValue" type="hidden" value="" /></div></li><li class="t-item t-last"><div class="t-bot"><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="0:4" /><input class="t-input" name="TreeView_checkedNodes[0:4].Checked" title="TreeView_checkedNodes[0:4]." type="checkbox" value="False" /></span><span class="t-in">WPF</span><input class="t-input" name="itemValue" type="hidden" value="" /></div></li></ul></li><li class="t-item"><div class="t-mid"><span class="t-icon t-plus"></span><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="1" /><input class="t-input" name="TreeView_checkedNodes[1].Checked" title="TreeView_checkedNodes[1]." type="checkbox" value="False" /></span><span class="t-in">Data</span><input class="t-input" name="itemValue" type="hidden" value="Data" /></div><ul class="t-group" style="display:none"><li class="t-item"><div class="t-top"><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="1:0" /><input class="t-input" name="TreeView_checkedNodes[1:0].Checked" title="TreeView_checkedNodes[1:0]." type="checkbox" value="False" /></span><span class="t-in">OpenAccess ORM</span><input class="t-input" name="itemValue" type="hidden" value="" /></div></li><li class="t-item t-last"><div class="t-bot"><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="1:1" /><input class="t-input" name="TreeView_checkedNodes[1:1].Checked" title="TreeView_checkedNodes[1:1]." type="checkbox" value="False" /></span><span class="t-in">Reporting</span><input class="t-input" name="itemValue" type="hidden" value="" /></div></li></ul></li><li class="t-item"><div class="t-mid"><span class="t-icon t-plus"></span><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="2" /><input class="t-input" name="TreeView_checkedNodes[2].Checked" title="TreeView_checkedNodes[2]." type="checkbox" value="False" /></span><span class="t-in">TFS Tools</span><input class="t-input" name="itemValue" type="hidden" value="TFS Tools" /></div><ul class="t-group" style="display:none"><li class="t-item"><div class="t-top"><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="2:0" /><input class="t-input" name="TreeView_checkedNodes[2:0].Checked" title="TreeView_checkedNodes[2:0]." type="checkbox" value="False" /></span><span class="t-in">Work Item Manager</span><input class="t-input" name="itemValue" type="hidden" value="" /></div></li><li class="t-item t-last"><div class="t-bot"><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="2:1" /><input class="t-input" name="TreeView_checkedNodes[2:1].Checked" title="TreeView_checkedNodes[2:1]." type="checkbox" value="False" /></span><span class="t-in">Project Dashboard</span><input class="t-input" name="itemValue" type="hidden" value="" /></div></li></ul></li><li class="t-item"><div class="t-mid"><span class="t-icon t-plus"></span><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="3" /><input class="t-input" name="TreeView_checkedNodes[3].Checked" title="TreeView_checkedNodes[3]." type="checkbox" value="False" /></span><span class="t-in">Automated Testing</span><input class="t-input" name="itemValue" type="hidden" value="Automated Testing" /></div><ul class="t-group" style="display:none"><li class="t-item t-last"><div class="t-top t-bot"><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="3:0" /><input class="t-input" name="TreeView_checkedNodes[3:0].Checked" title="TreeView_checkedNodes[3:0]." type="checkbox" value="False" /></span><span class="t-in">Web Testing Tools</span><input class="t-input" name="itemValue" type="hidden" value="" /></div></li></ul></li><li class="t-item t-last"><div class="t-bot"><span class="t-icon t-plus"></span><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="4" /><input class="t-input" name="TreeView_checkedNodes[4].Checked" title="TreeView_checkedNodes[4]." type="checkbox" value="False" /></span><span class="t-in">ASP.NET CMS</span><input class="t-input" name="itemValue" type="hidden" value="ASP.NET CMS" /></div><ul class="t-group" style="display:none"><li class="t-item t-last"><div class="t-top t-bot"><span class="t-checkbox"><input class="t-input" name="TreeView_checkedNodes.Index" type="hidden" value="4:0" /><input class="t-input" name="TreeView_checkedNodes[4:0].Checked" title="TreeView_checkedNodes[4:0]." type="checkbox" value="False" /></span><span class="t-in">Sitefinity CMS</span><input class="t-input" name="itemValue" type="hidden" value="" /></div></li></ul></li></ul></div>

      
          <script type="text/javascript">
              //$("#TreeView :checkbox").live("click", MyHandler);
              
              function onLoad(e) { alert("onLoad"); }
              function onChecked(e) { alert("onChecked"); }
              function onSelect(e) { alert("onSelect"); }
        </script>

    </div>
   
    
  
<script type="text/javascript" src="/Scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="/Scripts/telerik.common.min.js"></script>
<script type="text/javascript" src="/Scripts/telerik.treeview.min.js"></script>
<script type="text/javascript">
//<![CDATA[
jQuery(document).ready(function(){
jQuery('#TreeView').tTreeView({showCheckBox:true, onSelect:onSelect, onLoad:onLoad});});
//]]>
</script>

</body>
</html>

1 Answer, 1 is accepted

answered on 15 Sep 2010, 01:48 PM

teleriktreeviewmvcapplication.zip

Hello Ken,

As you can see in the client events online demo, the event is working. We did a sanity check with a sample project, which you can find attached -- please try to break it or attach the project that you are having problems with. In any case, the generated code did not include the event handler in the output, so something should be amiss.

Kind regards,
Alex Gyoshev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items