3

Is it possible to avoid the column, not to drag out of the data-table view area, as you can make out yourself, what I am talking about from this link https://l-lin.github.io/angular-datatables/#/withColReorder

enter image description here when you try to drag a column far from data-table. I have raised the issue in the official component site https://github.com/l-lin/angular-datatables/issues/496

(Just in case the issue raised, explains better about what I am talking about)

Gyrocode.com
  • 57,606
  • 14
  • 150
  • 185
RONE
  • 5,415
  • 9
  • 42
  • 71

1 Answers1

2

As l-lin points out, angular-datatables is a wrapper for jQuery dataTables providing directives and making sure dataTables not is conflicting with angular. To change core functionality you must still change the core.

You can change many things in the dataTables core libraries by monkey patching. To prevent dragging of a column header outside the <thead> section of a table you can do this :

var old_fnMouseMove = $.fn.DataTable.ColReorder.prototype._fnMouseMove;
$.fn.DataTable.ColReorder.prototype._fnMouseMove = function(e) {
    var x = e.clientX, 
        y = e.clientY, 
        r = document.querySelector('#example thead').getBoundingClientRect(),
        within = (x>r.left && x<r.right && y>r.top && y<r.bottom);

    if (within) old_fnMouseMove.apply(this, arguments);
}

The above override ColReorders mousemove events when dragging is going on. If the mouse is outside the <thead> element it simply just dont pass the event to the original function - by that dragging a column outside is effectively prevented.

angular-datatables demo -> http://plnkr.co/edit/uPv8FoUrJkQWnEaE2AQY?p=preview

pure jQuery dataTables demo -> http://jsfiddle.net/0boznoh7/

davidkonrad
  • 83,997
  • 17
  • 205
  • 265
  • Thankyou very much for the help, In between I tried to do even more dynamic table, having ng-repeat in tables, here the column move is acting little weird, looks like only column names are able to move not with data "http://plnkr.co/edit/PAtUDxmB9aQ5LQZu3uww?p=preview", also getting "No data available in table" , Please help on this – RONE Nov 01 '15 at 12:50
  • @RAVIMONE, when using `ng-repeat` you need `datatable="ng"` .i.e `` -> **https://l-lin.github.io/angular-datatables/#/angularWay** ...I dont see "_No data available in table_" in your plnkr..?
     – davidkonrad Nov 01 '15 at 13:03
  • Thanks a lot for your help so far, I have one more issue, when I integrate the `.withLightColumnFilter ` filter https://l-lin.github.io/angular-datatables/#/withLightColumnFilter to the data table. I have explained in more detail in here https://github.com/l-lin/angular-datatables/issues/500 Can you please have a look at the issue and help me with a plunkr if possible. – RONE Nov 03 '15 at 17:45