I am using KendoUI with AngularJS and am curious if there is a way to get the entry name where a checkbox is checked/unchecked. I was already looking into the provided demo, but unfortunately I couldn't find a way to just get the specific element name.
I am looking forward, to get a solution to this question.
Best Regards
13 Answers, 1 is accepted


$scope.treeOptions = {
dragAndDrop: true,
checkboxes: {
checkChildren: true,
template:"<input type='checkbox' name='#= item.name #' ng-click='onClick(\"#=item.name#\")' />",
},
dataTextField: 'name'
};
Unfortunately, this solution causes a problem. If I reload my app and check a collapsed tree item, then the checkboxes are unchecked after expanding this item. This is happen just the first time expanding the item, after that the tree checkboxes work like expected.
Any Idea how to prevent this behavior? Without using a template, the tree work just fine.
Thanks in advance for some help.
We are currently considering whether to add a checkbox change event, but your approach will work. To resolve the problem, make sure that the custom template respects the item.checked field and renders the checkboxes checked, like shown in this Dojo snippet.
Regards,Alex Gyoshev
Telerik

Another question, it is not really related to that topic and if you want my to open a new thread please let me know. In my app exists a WebGL scene with 3D objects. If I click on an object, I get its name (same like in the treeview) and want to select the related tree item.
How would be your suggestion? Is there any binding possibility to a scope variable since I use AngularJS or should I search with jQuery for the particular item in the tree and the state?
Thanks
Here's an updated Dojo snippet. I have added my comments inline, but the key takeaway is that it uses the datasource change event handler to get notified when the checked state changes. However, note that this event bubbles (due to the nature of the DataSource), so it will be triggered multiple times.
To find nodes and select them, you need to have all the data rendered (via loadOnDemand: false), which will penalize the performance in large hierarchies. If that is not viable, you can use the expandPath method, if you have a way of finding the path to the node that needs to be expanded and selected.
Regards,Alex Gyoshev
Telerik

thanks for your help so far it is working create. There is just one last questions related to the checkoxes.
If I am loading my app all checkboxes are uncheck. In the next step I am checking the root node for example, select a child node and add some new items to it. The following funtion shows how I am adding the new item.
$scope.onAddNode = function() {
if($scope.tree.select()) {
var newItem = {id:1, name:"test", checked:false, items: [{id:2, checked:false, name:"test2"}] };
$scope.tree.append(newItem, $scope.tree.select());
}
After adding the new item, the new items are already checked, even if setting checked to false. I am assuming the tree view get update and because the parent node is already checked, the child nodes are set checked as well. How to prevent this? I was also trying to set the checked property manually after adding the item, but it is not working like expected. The second child node is still checked what need an traversal through all childrens to set the checked property manually. Also the parent node is complete checked even if it should show the square in the checkbox.
Regards
};
It appears that the TreeView honors the checked state of the parent node. This is counter-intuitive, and we will investigate if this behavior can be changed without breaking existing functionality. As a work-around, you can append the item and set its checked state afterwards, like shown in the updated snippet.
Regards,Alex Gyoshev
Telerik

Call the updateIndeterminate method after the dragging has ended:
dragend: function() {
this.updateIndeterminate();
}
Alex Gyoshev
Telerik

thank for your answer, but I tried this before and it is not working for me. For example I have a tree branch selected and drag&drop an unchecked item in it, the dropped item is then checked too (should stay unchecked). Furthermore, if the item is automatically checked I have to track this event somehow because usually I call a function if the checkbox gets clicked to do something with the object represented by the tree item.
Indeed, this will require fixing, as the checked state is always inferred from the parent. This has been addressed for the next internal build, which is available to customers with a subscription.
I am afraid that updating the indeterminate states after each API call will degrade the TreeView performance greatly, so for the time being it would be best if client code calls the updateIndeterminate method when all operations have completed. This has just been documented.
Regards,Alex Gyoshev
Telerik

Regards,
Markus
I am afraid that I do not understand the question. Can you please elaborate the steps that you take and the expected result? Providing a Dojo snippet, or using the one I provided as a starting point, will be appreciated.
Regards,Alex Gyoshev
Telerik