1

I'm using the plugin colresizable to manipulate column width. What I would like to do is being able to dynamically add columns. I tried that:

<body ng-controller='myCtrl'>
  <table style="width: 100%;height:300px" col-resizeable>
    <tr>
      <td  ng-repeat='column in columns track by $index' ng-style="{'background':column}">content</td>
    </tr>
  </table>
 <button type='button' ng-click="addColumn()">Add</button>
</body>

Here is a plunker (the add button is supposed to add a green column)

http://plnkr.co/edit/8rfoYoQVZ3fRk53192TX?p=preview

With no success. Can someone tell what I'm doing wrong?

Edit: Here is how I add the column...

$scope.addColumn = function(){
   $scope.columns.push('green');
}
Nate
  • 7,606
  • 23
  • 72
  • 124
  • Could you add the code for the `addColumn` function to this question? Can't be answered without going to plnkr as currently written. – AlexMA May 12 '15 at 01:26

1 Answers1

2

Any reason why you need $timeout ? If you remove it then it will work

myApp.directive('colResizeable', function($interval) {
return {
    restrict: 'A',
    link: function(scope, elem) {

    elem.colResizable({
      liveDrag: true,
      gripInnerHtml: "<div class='grip'></div>",
      draggingClass: "dragging",
      onDrag: function() {
        //trigger a resize event, so paren-witdh directive will be updated
        //$(window).trigger('resize');
      }
    });

}
};
});

Other solution will be to watch the "columns" and disabled & re-enable colResizable everytime it is change.

http://plnkr.co/edit/elABlMAhV25LSiphEjXk?p=preview

kwangsa
  • 1,701
  • 12
  • 16
  • Well the column resize doesn't work in your example....I don't really know if I need the timeout but I just copied from this answer: http://stackoverflow.com/questions/25506512/resizable-columns-with-angularjs – Nate May 12 '15 at 04:41
  • You're right that removing the timeout solves one problem... but I still have the resize issue. If you write two TDs instead of writing the ng-repeat, it works. I'm wondering why it behaves like that... – Nate May 12 '15 at 04:47
  • The issue is due to colResizable doesn't refresh itself when dom is updated. One of the "ugly" solution is to modified the add button to disable & reenable the colResizable. Example : http://plnkr.co/edit/elABlMAhV25LSiphEjXk?p=preview – kwangsa May 12 '15 at 06:08
  • Thanks but what would be a nice solution? How can I make colResizable refresh for the ng-repeat? – Nate May 12 '15 at 15:11
  • by using $watch, you can check my plunkr as i updated to use watch & introduce new variable scope to watch – kwangsa May 13 '15 at 00:42
  • Yeah, almost there... by removing the $timeout I get this: http://plnkr.co/edit/te5U4sWc40Rrz3YDmX6A?p=preview the problem is now the added columns are very small instead of being equally divided – Nate May 13 '15 at 03:06
  • You will need to put width on the style so that – kwangsa May 13 '15 at 04:29
  • Thank you so much for your suggestion – yngrdyn Jun 23 '16 at 19:23