Set columns width for dynamically generated angular ui-grid

Question

I'm trying to set width of columns for my grid.

I get data from api call, and slightly rebuild it to display in the grid. That works. I never know how many columns will be in my grid that's why I defined $scope.gridOptions.columnDef as an empty array, in this case when grid got data, it renders columns dynamically, but how can I set columns width in this case?

Code:

 $scope.gridOptions = {
            enableGridMenu: false,
            paginationPageSizes: [10, 25, 50],
            paginationPageSize: 10,

            enableFiltering: false,
            rowHeight: 40,
            // selection
            enableRowSelection: true,
            enableRowHeaderSelection: false,
            multiSelect: false,
            modifierKeysToMultiSelect: false,
            noUnselect: true,
            columnDefs: [],
            onRegisterApi: function (gridApi) {
                $scope.gridApi = gridApi;
            }

        };

        $scope.gridOptions.columnDefs = [];

        $scope.$watch('filter', function (newVal, oldVal) {

            var array = [];

            if (typeof newVal !== 'undefined') {
                param.query = newVal;

                lovServices.events(param)
                    .then(function (response) {

                        var events = response.events;

                        angular.forEach(events, function (field) {

                            var custom = field.eventProperties;

                            var tempObj = {};

                            tempObj.title = field.title;
                            tempObj.description = field.description;
                            tempObj.studyName = field.studyName;

                            for (var i = 0; i < custom.length; i++){

                                tempObj[custom[i].name] = custom[i].value
                            }

                            array.push(tempObj);
                        });

                        $scope.gridOptions.data = array;

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

                        $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
                        $scope.gridApi.core.refresh()

                    })
            }
        });

As you can see, code is clear, there is no errors in console and my width definition doesn't work.

So what am I missing? I appreciate any help.

Answer 1

Try setting the width property to plain Number or Percentage value. Example: 50 or '50%';

Answer 2

So I have checked in console $scope.gridOptions.columnsDef after I init data. it has been an empty array, so I set interval after init and it finally works!

My code below:

  $scope.gridOptions.data = array;

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

                        }

                        $scope.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN);
                        $scope.gridApi.core.refresh()
                    })

css for scroll:

#cp-grid .ui-grid-render-container-body .ui-grid-viewport {
    overflow-x: scroll !important;
}