Checkbox change event binding problem on angularjs treeview directive

[ibrahim]

Hello All,

I created a directive in my angularjs application and used kendoui tree in this directive. I want to bind selected nodes (checkbox checked) of this tree to outer scope. My directive looks like this;

<yte-tree-view id="yteKendoUrunTree" data="yteTreeData" text-field="categoryName" selectable="true" ng-model="selectedTreeItems">
   <yte-tree-branch property="urunListesi" text-field="productName">
      <yte-tree-branch property="altUrunListesi" text-field="subProductName"/>
   </yte-tree-branch>
</yte-tree-view>

data attribute here is a hierarchical data and in my directive.js file i define tree options like that;

var defaultOptions = {};
defaultOptions.checkboxes = angular.isUndefined(scope.selectable) ? false : {
    checkChildren: true,
    template: "# if(!item.hasChildren){ # <input type='checkbox' id='c_#= item.id #' class='yteTreeLeafCheckbox' /># } " +
                     "else { # <input type='checkbox' id='c_#= item.id #' class='yteTreeBranchCheckbox' /> #}#"
};
defaultOptions.textFieldList = [scope.textField].concat(scope.branch.textFieldList);

and after that i initialize the kendoui treeview with this settings;
  
var yteKendoTree = $('#' + scope.id).kendoTreeView({
    dataTextField: defaultOptions.textFieldList,
    checkboxes: defaultOptions.checkboxes,
    loadOnDemand: false,
    dataSource: {
        data: scope.data
    }
}).data("kendoTreeView");

after all of these codes i need to register an event that fired when any of the leaf checkboxes changed (checked or unchecked). I tried all possible events on all possible elements but it did not worked at all. for example;

yteKendoTree.bind("change", function (e) {
    alert("Tree Change Event: checkbox checked!");
    // set viewValue of ng-model to selectedItems of the kendoui tree
});

or

yteKendoTree.dataSource.bind("change", function() {
    alert("Datasource Change Event: checkbox checked!");
    // set viewValue of ng-model to selectedItems of the kendoui tree
});

or

$(".yteTreeLeafCheckbox").bind("change", function () {
    alert("Checkbox Change Event: checkbox checked!");
    // set viewValue of ng-model to selectedItems of the kendoui tree
});

and tried a few versions of these events too. But none of them are triggered when any of the checkboxes checked on the tree. Only first one triggering when i clicked a label on the tree but not on checkbox check time.

Thanks.
Ibrahim.

[ibrahim]

I found a problem on datasource. I am watching the data attribute of the directive after initialization of the tree. Because developers can make async remote calls and populate data after initialization. In my watch function;

scope.$watch('data', function(newValue) {
    if(newValue) {
        /* prepare data to fit kendoui tree (create arrays called 'items' with properties) */
        prepareData(newValue, scope.branch.propertyList); 

        var newYteKendoTreeDataSource = new kendo.data.HierarchicalDataSource({ data: newValue });
        yteKendoTree.setDataSource(newYteKendoTreeDataSource);
    }
});

The problem is about HierarchicalDataSource, when this line runs other bindings do not work. But i dont know why..

[Alex Gyoshev]

Hello Ibrahim,

It appears that you are building your own angular directive for the Kendo UI TreeView. With our latest release, this is no longer necessary, as Kendo UI includes angular support out of the box. See the TreeView AngularJS demo for a sample of how to work with Kendo UI and AngularJS.

Regards,
Alex Gyoshev
Telerik

 

 

[ibrahim]

Hello Alex,

Firstly I thank you for your answer. I've just started to learn and use Kendo and I read all documentation about the components i worked on including AngularJs directive parts. I really like KendoUi components and will probably buy license.

But the directives you supply are not favorable by me. There is only a dummy div in the view side (html) and all other stuff in model side (js), there is not a big difference between using it with angular and not. I found this a little bit ugly and not "the angular way". For example I think a treeview must be an element type directive, but all the angularjs directives in Kendo are attribute type directives. So i am tring to supply an infrastructure for the developers in my team wrapping Kendo components.

On the other hand, I found a workaround solution to my problem and probably work on it later to increase performance. 

Thanks again.
Ibrahim.

[Alex Gyoshev]

Hello Ibrahim,

You are right about the element type directive; we will address this in the upcoming weeks, so that you can use them (at this time, some components rely on the specific type of element that they are instantiated from). Also, options can be supplied declaratively, as shown in this help topic.

Regards,
Alex Gyoshev
Telerik