CODEWITHSUNDEEP
jqueryangularjs
Ingvarr
Ingvarr

Reputation: 13

jquery-resizable-columns refresh after ng-hide

I have got a HTML table with https://github.com/dobtco/jquery-resizable-columns resize plugin.

I have to add column hiding functionality so I've added ng-hide directives to the columns with double click event on every columns header to switch hide flag to true and an 'Unhide all' button to switch all flags to false.

Problem: after hiding a column resize handlers stay intact. When I click any of them, they are being refreshed and moved to the proper places.

How can I force handlers refreshing after hiding a column?

Example: http://plnkr.co/edit/balnDZPWqVP5y0Mx7mhT?p=preview

Upvotes: 1

Views: 327

Answers (1)

fikkatra
fikkatra

Reputation: 5822

You can use 

$('#tab').resizableColumns('syncHandleWidths')

This will refresh the column sizes. The trick is to call this method after the DOM has been reloaded. Otherwise, the column has not yet disappeared from the DOM, and the column sizes will not be correct. This is where angular's $timeout service comes in handy (don't forget to inject it):

$timeout(function(){$('#tab').resizableColumns('syncHandleWidths');});

Forked plunkr here.

Upvotes: 0

Related Questions