UI-Grid Set columns width by their content

Question

I recently started using ui-grid and I want that when the grid initializes, each column will have width according to its content.

I know there is a function that does that in ui-grid when the user double-clicks a cell to resize (resizer.link.dblClickFn) but it doesn't take a column as a parameter, it takes an event of a column click.

Anyone has any experience with this?

This is kludgy but could you not programmatically fire the double click as each cell is populated. This would be costly with large amounts of data but just might work for smaller datasets. — tuckerjt07
– tuckerjt07, Commented Jul 19, 2015 at 17:22

Or Betzalel · Accepted Answer · 2015-07-20 22:09:48Z

4

I was evetually able to solve it by manually calling the double click event on all the resizers :

    onRegisterApi: function (gridApi) {
        $scope.gridApi = gridApi;

        setTimeout(function () {
            var resizers = document.getElementsByClassName("ui-grid-column-resizer");

            for (var i = 0; i < resizers.length; i++) {
                var event = new MouseEvent('dblclick', {
                    'view': window,
                    'bubbles': true,
                    'cancelable': true
                });

                resizers[i].dispatchEvent(event);
            }
        }, 1);
    }

answered Jul 20, 2015 at 22:09

Or Betzalel

2,61714 gold badges51 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthias Max Over a year ago

Solved it for me as the only solution for ui-grid 3.x!

Collectives™ on Stack Overflow

UI-Grid Set columns width by their content

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related