Multiple lines of text in extjs grid panel cell

Question

I have a gird. I want to display multiple lines in some grid cells. Following is the div that I am generating which has two lines of text. But this is not rendering the second line i.e. "test new line".

<div class="x-grid3-cell-inner x-grid3-col-event x-unselectable" style="height:134px;line-height:134px;" unselectable="on">
  <div>
      <a href="some link">XYZ funding round: Series C</a> (Funding Round)
      <br>
      test new line
  </div>
</div>

It is an extjs 3.4 grid.

Any idea why this would not render two lines?

As it is now, it works: http://jsfiddle.net/AndreaLigios/LCSjz/ ; to reproduce the problem, you should create a fiddle by yourself with the generated GRID HTML / CSS code. There is probably something overriding the default settings — Andrea Ligios, Mar 17 '14 at 15:06
You are right. I am trying to find out the problem by applying generated CSS to the div in fiddle. — Pratik Patel, Mar 18 '14 at 09:04

score 7 · Accepted Answer · answered Jul 14 '15 at 21:33

I solved this problem with grid's viewConfig option:

viewConfig: {
    loadingText: lang.loading,
    loadMask: true,
    stripeRows: true,
    getRowClass: function(record, rowIndex, rowParams, store) {
        return 'multiline-row';
    }
},

and in the CSS file:

.multiline-row .x-grid-cell-inner {
    overflow: auto !important;
    white-space: normal !important;
    text-overflow: ellipsis;
    display: block;
}

And works fine in ExtJS 4.

Hope it helps.

score 2 · Answer 2 · answered Jun 01 '16 at 09:47

2

For that column:

 renderer: function (value, metaData) {
                 return '<div style="white-space:normal">' + value + '</div>';
             }

answered Jun 01 '16 at 09:47

Mohammadreza

3,139
8
35
56

When you use this approach the grid has a wierd empty area below its rows. how can you fix this? – Sangoku Nov 17 '16 at 10:42

Pavle Gartner · Answer 3 · 2014-05-14T11:06:11.310

0

I know it is not exactly what you are doing (generating markup with line break), but it serves similar purpose - displaying multiple lines in a single cell, by providing custom cell XTemplate. Here is the code: https://fiddle.sencha.com/#fiddle/5qd

EDIT: I added line break to first column, it also works but inner cell styles are not applied to every line.

edited May 14 '14 at 11:06

answered May 14 '14 at 09:45

Pavle Gartner

659
1
7
21

in 4.1 this generates Uncaught TypeError: Ext.grid.GridView is not a constructor – Sangoku Nov 17 '16 at 10:25

Multiple lines of text in extjs grid panel cell

3 Answers3