CODEWITHSUNDEEP
javascriptarraysangularjskendo-uikendo-template
jasmo
jasmo

Reputation: 31

Kendo treelist template with dataItem array and angular ng-click

I am currently working with Kendo-UI and AngularJS. I am trying to get the treelist to render buttons into the columns according to the dateItem.[column_name] array which it receives. I am unable to produce buttons which have a bound ng-click directive in them.

Currently I am trying to do the following:

  1. Predefine the columns in angular controller
  2. Push custom columns into the existing columns according to an array received VIA REST service.
  3. Set custom template to each column
  4. Create buttons into the custom templates according to dataItem.[custom_column] array containing ng-click directive.

Im having a hard time getting a grasp of the syntax and the binding to angular. End result of this should have a button, for each of the array items in the custom column, containing a ng-click.

What I have tried already:

            angular.forEach(array, function(value, key) {
                var buttonArray = "dataItem."+value["column_name"];
                columns.push({field: value["column_name"], template: "<span>#alert('"+buttonArray+"');#</span>"});                    
            });

This just alerts with the TEXT 'dataItem.firstColumn' instead of an object or something else. I planned on looping through the array with javascript and creating the buttons containing ng-click that way (unsure if this would have even worked).

angular.forEach(array, function(value, key) {
                var buttonArray = "dataItem."+value["column_name"];
                columns.push({field: value["column_name"], template: "<span ng-bind-html=\"templateFunction("+buttonArray+")\"></span>"});                    
            });


$scope.templateFunction = function(items){
    var template = "";
    //loop through items and create template accordingly
    angular.forEach(items, function(value, key) {
        //NOTE: unable to use ng-click with ng-bind-html, as it does not render the html here with angular
        //perhaps needs a custom directive to enable that. However if the template renders properly (with the help of a directive), then kendo-ui will duplicate the elements with each rendering.
        template += "<button kendo-button ng-click=\" test('Clicked button #"+value+"'); \">"+value+"</button>";
    });
    var returntemplate = $sce.trustAsHtml(template);

    //trust the template as html, so it renders properly as html
    return returntemplate;
 };

$scope.test = function(value){ alert(value); };

This works somehow, the array is looped through with the correct values. Problem here is that ng-click in these templates are not compiled and bound to the scope so they would work... A workaround for that would be to create a custom directive which compiles the html using $compile service, but then I found out that kendo-ui treelist will duplicate all of the column buttons every time the column is collapsed/expanded.

So essentially I am looking to create buttons with ng-click into a kendo-ui treelist columns according to an array in dataItem.columnName (and the columnName is gotten via an external REST resource).

Upvotes: 2

Views: 1890

Answers (1)

jasmo
jasmo

Reputation: 31

Figured it out! The confusion was with kendo template syntax and angularjs syntax.

I can loop through the data in kendo-ui template with the following javascript/html markup:

"<span>
    # if("+buttonArray+"){for(var i = 0;i<"+buttonArray+".length;i++){ #
     <button ng-click=\"test(
     #= "+buttonArray+"[i] #
     );\">Rule
     #= "+buttonArray+"[i] #
     </button> 
     # } }#
     </span>"

Note that every other line of the code is encapsulated within # (hash) tags making them javascript to kendo. This is used in the Angular controller and set as the column template. buttonArray is the data contained within each cell for the column (basically just a string "data.columnName" which is used in the kendo javascript).

So the code ended up looking like this:

    $scope.test = function(value){
      alert("testing "+value);  
    };

angular.forEach(columnArray, function(value, key) {
                var buttonArray = "data."+value["column_name"];
                columns.push({field: value["column_name"], template: "<span># if("+buttonArray+"){ for(var i = 0;i<"+buttonArray+".length;i++){ # <button ng-click=\"test(#= "+buttonArray+"[i] #);\">Button#= "+buttonArray+"[i] #</button> # } }#</span>"});                    
            });

Note that angular side can use the values as "dataItem.columnName" and kendo does the same thing with "data.columnName". I was trying to get the kendo javascripts to work with angular values...

Upvotes: 1

Related Questions