ng-grid - columndefs - ui-grid angular 4

¿Hay una manera de ajustar automáticamente los anchos en ng-grid?

Question

Estoy teniendo problemas con el ancho de mis columnas. No sé qué ancho tendrán antes, ni quiero especificar el ancho de cada columna. ¿Hay algún atributo que pueda usar que ajuste automáticamente todos los anchos de columna según el contenido (incluido el encabezado de la columna)?

Answer 1

¡Sí! En sus columndefs , puede establecer el ancho en auto y esto ajustará automáticamente el tamaño de las columnas en función del ancho de los datos y / o encabezado.

Referencia: Definiendo Columnas

Answer 2

Esto funciona:

$scope.gridOptions = {
                init: function (gridCtrl, gridScope) {
                    gridScope.$on(''ngGridEventData'', function () {
                        $timeout(function () {
                            angular.forEach(gridScope.columns, function (col) {
                                gridCtrl.resizeOnData(col);
                            });
                        });
                    });
                },
                data: ''scopeDataField'',
                columnDefs: [
                    {
                        field: ''property1'',
                        displayName: ''property1title'',
                        width: ''100px'' // a random fixed size, doesn''t work without this
                    },
                    {
                        field: ''property2'',
                        displayName: ''property2title'',
                        width: ''100px''
                    }

                ],
                enableColumnResize : true
            };

Answer 3

Estoy usando ui-grid. El siguiente código está funcionando para mí. Puedes probar esto.

First you need to add a module dependency ''ui.grid.autoResize'' in your main module.

Then add css class something like this 

.grid {
  width    : 400px !important;
  max-width : 400px !important;
  height   : 600px !important;
}

Y, finalmente, agregue la directiva ui-grid en su archivo html como este. Tenga en cuenta que no se olvidó de agregar el '' ui-grid-auto-resize '' en su directiva de red.

<div id="grid1" ui-grid="gridOptions" class="grid" ui-grid-auto-resize></div>

Answer 4

Usar ui-grid, es mejor: http://ui-grid.info/docs/#/tutorial/204_column_resizing

pero https://github.com/angular-ui/ng-grid/wiki/Configuration-Options

Answer 5

Vea la respuesta en https://.com/a/32605748/1688306

Ancho de columna calculado por nombre de columna o dato, el que sea más largo.

Answer 6

Woot! ¡Se me ocurrió una respuesta bastante buena! Establecer el ancho a "auto" realmente no me funcionaba. Tal vez sea porque estoy usando una ng-view ? No es seguro. Así que creé 2 nuevas funciones que puedes poner en tu controller.js . ¡Usándolos así te daremos anchos de columna calculados! Lee los comentarios del código; Hay algunas advertencias.

Ejemplo de uso, controllers.js:

var colDefs = makeColDefs(rows[0]);
colDefs = autoColWidth(colDefs, rows[0]);

$scope.phones = rows;
$scope.gridOptions = {
    data : ''phones'',
    showFilter : true,
    enableColumnResize : true,
    columnDefs : colDefs
};

El código, controllers.js:

/**
 * Create a colDefs array for use with ng-grid "gridOptions". Pass in an object
 * which is a single row of your data!
 */
function makeColDefs(row) {
    var colDefs = [];
    for ( var colName in row) {
        colDefs.push({
            ''field'' : colName
        });
    }
    return colDefs;
}

/**
 * Return a colDefs array for use with ng-grid "gridOptions". Work around for
 * "auto" width not working in ng-grid. colDefs array will have percentage
 * widths added. Pass in an object which is a single row of your data! This
 * function does not do typeface width! Use a fixed width font. Pass in an
 * existing colDefs array and widths will be added!
 */
function autoColWidth(colDefs, row) {
    var totalChars = 0;
    for ( var colName in row) {
        // Convert numbers to strings here so length will work.
        totalChars += (new String(row[colName])).length;
    }
    colDefs.forEach(function(colDef) {
        var numChars = (new String(row[colDef.field])).length;
        colDef.width = (numChars / totalChars * 100) + "%";
    });
    return colDefs;
}

Prueba de jazmín, controllerSpec.js:

''use strict'';

var ROW = {
    ''col1'' : ''a'',
    ''col2'' : 2,
    ''col3'' : ''cat''
};
var COLUMN_DEF = [ {
    field : ''col1''
}, {
    field : ''col2''
}, {
    field : ''col3''
} ];
var COLUMN_DEF2 = [ {
    field : ''col1'',
    width : ''20%''
}, {
    field : ''col2'',
    width : ''20%''
}, {
    field : ''col3'',
    width : ''60%''
} ];

/* jasmine specs for controllers go here */

describe(''controllers'', function() {
    beforeEach(module(''myApp.controllers''));

    it(''should make an ng-grid columnDef array from a row of data.'',
            function() {
                expect(makeColDefs(ROW)).toEqual(COLUMN_DEF);
            });

    it(''should return an ng-grid columnDef array with widths!'', function() {
        var colDefs = makeColDefs(ROW);
        expect(autoColWidth(colDefs, ROW)).toEqual(COLUMN_DEF2);
    });

});