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

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