CODEWITHSUNDEEP
javascriptangularjsng-grid
raju
raju

Reputation: 4978

How to create multi line cells in nggrid

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

Upvotes: 2

Views: 5714

Answers (3)

Aman Mahajan
Aman Mahajan

Reputation: 1293

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;
}

Upvotes: 0

hjl
hjl

Reputation: 2802

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>'
    }
]

Upvotes: 2

hjl
hjl

Reputation: 2802

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;
}

Upvotes: 0

Related Questions