CODEWITHSUNDEEP
angularjsangular-uiangular-ui-grid
Mahtab Alam
Mahtab Alam

Reputation: 1870

Setting column width in angular ui grid

I'm using angular ui-grid and have a long grid with almost 30 columns, I want to set fixed width for columns so that at least column header can be seen easily. Is there a way to set, say 10% width for all the columns, or I have to do it for each column one by one.

ui-grid

After setting the min-width on ui-grid-header-cell many columns got combined into one

.ui-grid-header-cell {
    min-width: 150px !important;
}

After setting min-width property

Upvotes: 10

Views: 24077

Answers (6)

ArielGro
ArielGro

Reputation: 783

If you are looking for fixed width, you can use the width property in the colomnDefs like this:

columnDefs : [
            { field : 'pageIcon', displayName : 'Page Icon', width : 25},
            { field : 'pageName', displayName : 'Page Name', width : 100},
            { field : 'count',    displayName : 'Count',     width : '30%'}
]

Upvotes: 10

Nilay Mistry
Nilay Mistry

Reputation: 76

Try by the following function by calling before ui-grid data source binds.

 function SetColumnWidth() {
        var cols = _.filter($scope.gridOptions.columnDefs, function (c) {
            return c.visible != false;
        });
        var maxWidth = (document.documentElement.clientWidth) / cols.length;
        for (var i = 0; i < cols.length; i++) {
            cols[i].maxWidth = parseInt(maxWidth);
        }
    }

set column width to width: "*" and set minWidth as per convinient.

This solution is work for any screen as, especially large resolution screen. It will manage to equally divide maxWidth of all columns and cover the whole area of the screen.

Upvotes: 2

Hanni Ali
Hanni Ali

Reputation: 399

The best way is to use the GridOptions minimumColumnSize property:

$scope.gridOptions.minimumColumnSize = 100;

Zero performance impact and no oddities with the CSS methods.

Reference page, Ctrl-F minimumColumnSize: http://ui-grid.info/docs/#!/api/ui.grid.class:GridOptions

Upvotes: 5

Madhwendar Thakur
Madhwendar Thakur

Reputation: 31

If you will add width using for loop or like ways it may slow down rendering of your grid, So I would suggest to do it via CSS. Because I had same problem with 15,000 rows and 80 columns and I tried adding width using loop and it seems to slow down rendering of grid. So, Try adding below code in your CSS, it will solve your purpose.

.ui-grid-header-cell {
 min-width: 200px !important;
 max-width: 300px !important;
}

.ui-grid-cell {
min-width: 200px !important;
max-width: 300px !important;
}

Upvotes: 0

S. Baggy
S. Baggy

Reputation: 958

After you have set your column definitions, you can add the following

for (var i = 0; i < $scope.gridOptions.columnDefs.length; i++) {
    $scope.gridOptions.columnDefs[i].width = '10%';
}

This will set all of the columns to the width you select. With 30 columns at 10% the user will use the horizontal scrollbar to see all the columns, as you prefer. I didn't change any CSS.

Upvotes: 6

Piyush.kapoor
Piyush.kapoor

Reputation: 6803

you can add a style to your css

.ui-grid-header-cell {

    min-width: 200px !important;
    max-width: 300px !important;

}

Upvotes: 0

Related Questions