angular-ui/ui-grid

ng-grid horizontal scrolling

Open

#3657 aperta il 1 giu 2015

Vedi su GitHub
 (2 commenti) (0 reazioni) (1 assegnatario)JavaScript (2496 fork)batch import
help wantedtype: bug

Metriche repository

Star
 (5395 star)
Metriche merge PR
 (Nessuna PR mergiata in 30 g)

Descrizione

I am using ng-grid with enableCellEdit = true. My grid has > 250 columns and around 100 rows. Whenever I scrolls to right, the grid looses it's scrolling position in between and takes me to the 1st cell of that row. I am not sure how to solve this issue and urgently looking for help. Below is ng-grid directive. Grid column definition is also dynamic.

var dataGrid = function ($compile) {

    return {
        restrict: 'E',
        template: '<div class="gridStyle" ng-grid="options"></div>',
        scope: {
            beforeSelectionChange: '&',
            afterSelectionChange: '&',
            gridEventEndCellEdit: '&',
            gridEventStartCellEdit: '&'
        },
        compile: function (element, attribute) {

            return {

                pre: function (scope, elem, attrs) {

                    scope.options = {};

                    scope.options.columnDefs = attrs.columns;
                    scope[attrs.columns] = scope.$parent.$eval(attrs.columns);
                    scope.options.data = attrs.data;
                    scope[attrs.data] = scope.$parent.$eval(attrs.data);
                    scope.options.enableRowSelection = true;
                    scope.options.multiSelect = false;
                    scope.options.enableCellSelection = true;
                    scope.options.enableCellEditOnFocus = true;
                    scope.options.enableColumnResize = true;
                    scope.options.enablePinning = true;
                    scope.options.showFilter = true;
                    scope.options.rowHeight = 25;
                    scope.options.headerRowHeight = 50;
                    scope.$parent.$watch(attrs.columns, function (value) {
                        var val = value || null;
                        if (val) {
                            scope[attrs.columns] = scope.$parent.$eval(attrs.columns);
                        }
                    });

                    scope.$parent.$watch(attrs.data, function (value) {
                        var val = value || null;
                        if (val) {
                            scope[attrs.data] = scope.$parent.$eval(attrs.data);
                        }
                    });

                    /* callback function to before and after row selection change */ 
                    scope.options.beforeSelectionChange = function (row, event) {
                        try {
                            scope.beforeSelectionChange({ row: row });
                        } catch (e) {
                            alert(e);
                        }
                        return true;
                    };
                    scope.options.afterSelectionChange = function (row) {
                        try {
                            scope.afterSelectionChange({ row: row });
                        } catch (e) {
                            alert(e);
                        }
                    };

                    /* cell edit event handlers */
                    scope.$on('ngGridEventStartCellEdit', function (event) {

                        try {

                            scope.gridEventStartCellEdit({
                                row: event.targetScope.row.entity,
                                cellName: event.targetScope.col.field,
                                cellValue: event.targetScope.row.entity[event.targetScope.col.field]
                            });
                        } catch (e) {
                            alert(e);
                        }
                    });
                    scope.$on('ngGridEventEndCellEdit', function (event) {

                        try {

                            scope.gridEventEndCellEdit({
                                row: event.targetScope.row.entity,
                                cellName: event.targetScope.col.field,
                                cellValue: event.targetScope.row.entity[event.targetScope.col.field]
                            });
                        } catch (e) {
                            alert(e);
                        }
                    });

                }
            }
        }
    }
};

Guida contributor