How to create multi line cells in nggrid

Question

I am using nggrid for my data representation and one of the column holds address which is sometimes multiline and long. I want my row to be multiline with size depending on number of lines address is distributed in. How can I have an editable row. I am using nggrid 2.012

"devDependencies": {
    "ng-grid": "~2.0.12"
}

I have paging implemented

$scope.gridOptions = {
    data: 'myData',
    enablePaging: true,
    showFooter: true,
    totalServerItems: 'totalServerItems',
    pagingOptions: $scope.pagingOptions,
    filterOptions: $scope.filterOptions,
    plugins: [new ngGridFlexibleHeightPlugin()],
    columnDefs: [{field:'client_order_id', displayName:'Order Id'}, {field:'customer_name',displayName:'Customer Name'},
        {field:'customer_phone', displayName:'Phone Number'},{field:'address', displayName:'Address'}]
};

Following is my current view

<section data-ng-controller="OrdersController" data-ng-init="find()">
  <div class="page-header">
    <h1>Orders</h1>
  </div>

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

</section>

Want to also have multiline addresses

so you address data could be like `street, block \n state \n country` ? — hjl, Jan 01 '15 at 18:10
and what's the current view in your grid now? have you defined the column width or is the column too long for wrapping all the address in? — hjl, Jan 01 '15 at 18:10
possible duplicate of [Angular ng-grid row height](http://stackoverflow.com/questions/19094723/angular-ng-grid-row-height) — raju, Jan 03 '15 at 05:20

score 2 · Answer 1 · answered Jan 01 '15 at 18:53

2

another common way is to show tooltip with whole long text when mouse hovering on the cell:

columnDefs: [
    {
        field:'address',
        displayName:'Address',
        cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text title="{{COL_FIELD}}">{{COL_FIELD}}</span></div>'
    }
]

answered Jan 01 '15 at 18:53

hjl

2,794
3
18
26

I like this idea and implemented this. – raju Jan 01 '15 at 21:28

hjl · Answer 2 · 2015-01-01T18:46:29.373

0

you can not have variable rowHeight because ngGrid uses the fixed rowHeight to do virtual scrolling.

you will need to hack into ngGrid style to fix this

follow this way to make a scrollbar in cell to view the whole address

columnDefs: [
    {
        field:'address',
        displayName:'Address',
    }
]

overwrite ngGrid style in your own style :

.ngCellText {
    overflow: auto;
    text-overflow: auto;
}

edited Jan 01 '15 at 18:46

answered Jan 01 '15 at 18:40

hjl

2,794
3
18
26

`text-overflow` does not have an option `auto` – Aprillion Nov 23 '15 at 12:26

score 0 · Answer 3 · answered Jan 03 '15 at 05:05

You can change the row height by setting 'rowHeight' property.

columnDefs: [{
        field:'address',
        displayName:'Address',
        rowHeight: 60,
        cellClass: 'wrap-text'
    }
]

You can use it with a custom template to show a tooltip as suggested earlier.

Use it with a custom css class.

.wrap-text {
    white-space: normal;
}

How to create multi line cells in nggrid

3 Answers3