Treeview checkbox event

[Markus]

Hi everybody,

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

[Markus]

Here some additional Information to my question, because I thing I was not clear enough in describing what I need. I am not searching for a solution that gives me all checked/unchecked elements. I am searching for a solution that gives me just that element the user just checked/unchecked.

[Markus]

I have found a way by using a template:

$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.

[Alex Gyoshev]

Hello Markus,

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

 

 

[Markus]

Thank you for your response it works like a charm. I tried to use the #=item.checked# before, to pass the state in my onClick() function. Unfortunately, the if I output the value it is undefined. Is there any way to get the state passed?

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

[Alex Gyoshev]

Hello Markus,

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

 

 

[Markus]

Hi Alex,

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
};
                

[Alex Gyoshev]

Hello Markus,

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

 

 

[Markus]

Thank you again for the solution. Is there also a way to get this working if I am droping an item?

[Alex Gyoshev]

Hello Markus,

Call the updateIndeterminate method after the dragging has ended:

          dragend: function() {
            this.updateIndeterminate();
          }

Regards,
Alex Gyoshev
Telerik

 

 

[Markus]

Hi Alex,

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.

[Alex Gyoshev]

Hello Markus,

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

 

 

[Markus]

Ok, I guess for now can life with the fact that an unchecked item automatically gets checked if I drop it in a checked branch. In this case is there a way to call the change function in order to get the item? The reason is that I am setting the visibility of 3D objects related with the checkbox state. Therefore I am usually calling a function within the change function if the state changes, but automatically setting the checkboxes is not calling the change function.

Regards,

Markus

[Alex Gyoshev]

Hello 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