withFixedColumns (Angular JS)

knetadmin

I am using directive to assign options to table all opetions working fine till withFixedColumns not working at all please help

(function (angular, $) { 
'use strict'; 
angular.module('kn.grid').directive('onLastRepeat', ['$timeout','DTOptionsBuilder',function (timeout,DTOptionsBuilder) 
{
 return function (scope, element, attrs) { var options = {};

        options = DTOptionsBuilder.newOptions()
 
            .withOption('sort', false)
            .withOption('filter', false)
            .withOption('info', false)
            .withOption('language', {
                'zeroRecords': "",
                'emptyTable': ""
            })
            .withOption('paging', false)
            .withOption('scrollY', '300px')
            .withOption('scrollX', '100%')
            .withOption('scrollCollapse', true)
            .withFixedColumns({
                leftColumns: 1,
                rightColumns: 0
            });
        timeout(function(){
            element.dataTable(options);
       },0);
 
 
 
    };
}]);
}(window.angular, window.$))

allan

Hi,

Thanks for the code. Are you able to give me a link to the page you are working on so I can take a look at it and see what is going wrong please?

Many thanks,
Allan

knetadmin

this is url : http://54.191.119.153:8080/static/grid.html
i can now apply fixed columns after adding (ng)
i have other problems :
- by default i am sorting with second column (last price) but when data change, sorting not applied
- i am using drag and drop columns to reorder columns and hide and show them from check boxes list but default sorting not move with column
( you can see these issues in previous link)

allan

Thanks for the link.

by default i am sorting with second column (last price) but when data change, sorting not applied

The problem appears to be that the DataTable isn't being told that the data is being updated and therefore it can't alter the sorting. I would have expected the Angular binding plug-in that you are using to have done that automatically, but that doesn't appears to be the case. This is possibly something it that it worth having a chat with the author of the Angular directive about.

In the short term, what you can do is perform the update manually. To do this, update your girdController function to be:

    girdController.$inject = ['pricesService', '$interval', '$window', '$scope','DTColumnDefBuilder', 'DTOptionsBuilder', 'DTInstances'];
    function girdController(pricesService, interval, $window, scope,DTColumnDefBuilder, DTOptionsBuilder, DTInstances) {

So you are given access to the DataTable instance as well. Then, at the end of your storage event handler add:

                setTimeout( function () {
                    DTInstances.getLast().then(function (dtInstance) {
                        dtInstance.DataTable.rows().invalidate().draw();
                    });
                }, 0 );

The setTimeout requirement is frustrating, but my knowledge of Angular isn't strong enough to be able to figure out how this should work otherwise. I couldn't find a way to determine when Angular has updated the DOM and thus is ready for re-reading.

Regards,
Allan

knetadmin

Thanks for replay i applied the part you motioned it, but the new issue appeared
after each update, scroll go to up always i am stop scroll down because of that i can see the end of datatables