Increase width of column in ui.grid

Question

I have inserted some dummy object in Grid,The data displays in the grid found some issues. Here is My code:

html:

<div class="gridStyle" ui-grid="gridOptions"></div>

js:

$scope.myData = [{
    JobId: '196',
    siteType: 'abc',
    Title: 'Happy womans day',
    Message: 'hello',
    devicetype: 'A',
    jobDuration: '819',
    totalMsgs: '2016',
    msgsDelivered: 'Msg not found In the whole Body',
    msgsFailed: '789',
    jobCreatedDate: '11-03-2015',
    jobCreatedBy: '[email protected]'
}];
$scope.gridOptions = {
    data: 'myData'
};

css :

.ui-grid-header-cell .ui-grid-cell-contents {
    height: 48px;
    white-space: normal;
    -ms-text-overflow: clip;
    -o-text-overflow: clip;
    text-overflow: clip;
    overflow: visible;
}

Data displays in the grid but only upto some fixed width. Unable to wrap the long text, for eg:Msg not found In the whole Body, Displays as Msg not foun...........

1. How can I increase width of each and every column?
2. I am not able to wrap the long text lines into 2-3 lines, the whole text displays in one line only
3. The above css works only for headers

Iveson

Answer 1

OK, a few things.

Firstly, to set the column width you need to use column definitions, then you can set a width in pixels or percentage on each. Refer http://ui-grid.info/docs/#/tutorial/201_editable as an example that has column widths.

Secondly, there is the ability to add tooltips, which are one way to show longer cells that don't fit in the space available. Refer http://ui-grid.info/docs/#/tutorial/117_tooltips

Thirdly, you can make the rows taller and therefore have space to wrap content within them. Be aware that all rows must be the same height, so you can't make only the rows that need it taller.

gridOptions.rowHeight = 50;

You'll also need to set the white-space attribute on the div so that it wraps, which you can do by setting a class in the cellTemplate, and then adding a style to the css.

A plunker as an example: http://plnkr.co/edit/kyhRm08ZtIKYspDqgyRa?p=preview

Meanwhile

Thnx I was trying for wrapping but was not possible plnkr helped me. Thnx – Iveson

Answer 2

Set the Dependency for the javascript:

angular.module('app', [
    'ngTouch', 
    'ui.grid',
    'ui.grid.autoResize',
    'ui.grid.resizeColumns'
])

for ui-grid 3.0, I am using this directive:

 .directive('setOuterHeight',['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        link: function (scope, element) {
          $timeout(function(){
            // Get the Parent Divider.
            var parentContainer = element.parent()[0];
            console.log(parentContainer.offsetHeight);

            // Padding of ui-grid-cell-contents is 5px.
            // TODO: Better way to get padding height?
            var topBottomPadding = 10;
            //Get the wrapped contents rowHeight.
            var rowHeight = topBottomPadding + parentContainer.offsetHeight;
            var gridRowHeight = scope.grid.options.rowHeight;
            // Get current rowHeight
            if (!gridRowHeight ||
                    (gridRowHeight && gridRowHeight < rowHeight)) {
                // This will OVERRIDE the existing rowHeight.
                scope.grid.options.rowHeight = rowHeight;
            }
          },0);
        }
    };
}])

Under the controller:

.controller('MainCtrl',
    ['$scope', '$q', '$timeout', 'uiGridConstants',
        function ($scope, $q, $timeout, uiGridConstants) {
            $scope.gridOptions = {
                enableVerticalScrollbar: uiGridConstants.scrollbars.NEVER,
                enableHorizontalScrollbar: uiGridConstants.scrollbars.NEVER,
                columnDefs: [
                    {name: 'firstName', width: '*'},
                    {name: 'lastName', width: '*'},
                    {
                        name: 'company', width: '*',
                        cellTooltip: function (row) {
                            return row.entity.company;
                        },
                        cellTemplate: '<div class="ui-grid-cell-contents wrap" title="TOOLTIP"><div><span class="label" set-row-height>{{row.entity.company}} </span></div><div>'
                    },
                    {name: 'employed', width: '*'}
                ],
                enableColumnResize: true,
                rowHeight: 10,
            };
        }]);

*Note the set-row-height directive for cellTemplate.

For CSS, you will have to put the white-space as normal:

.wrap {
    white-space: normal;
}
.wrap .label {
     display: inline-block;
}

Lastly, the HTML to change the Grid Height:

<div id="grid1" ui-grid="gridOptions" class="grid" ng-style="{height: (gridOptions.data.length*gridOptions.rowHeight)+32+'px'}" ui-grid-resize-columns  ui-grid-auto-resize></div>

Plunker example is here: http://plnkr.co/edit/OwgEfru0QyFaU1XJFezv?p=preview

Acnode