jquery jqxgrid word wrap

Question

$('#tGrid').jqxGrid(
    {
        theme: "ui-redmond",
        width: '100%',
        autoheight: true,
        source: dataAdapter,
        showfilterrow: true,
        filterable: true,
        selectionmode: 'multiplecellsextended',
        autorowheight: true,
        columns:
            [{ text: 'Detail', datafield: 'Detail', columntype: 'textbox', sortable: true, filtertype: 'input', width: '45%', cellsrenderer: function (row, column, value, defaultHtml, columnSettings, record)
             {
                        return '<br><div style="word-wrap: break-word;">' + value +'</div><br>';
             }
            }]
    });

I want the whole text inside details to be visible on the grid, but instead, it is shown as below:

How do I fix this?

Answer 1

Change

return '<br><div style="word-wrap: break-word;">' + value +'</div><br>';

To

return '<div style="word-wrap: break-word;">' + value +'</div>';

Example: https://jsfiddle.net/ws80yb5m/

html code:

<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
  <div id="tGrid"></div>
</div>

JavaScript + jQuery code:

var data = generatedata(100);

for (var i = 0; i < data.length; i++) {
    data[i].Detail = "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaabbbbbbbbb";
}

var source = {
  localdata: data,
  datatype: "array",
  datafields: [
    { name: 'Detail', type: 'string' }
  ],
  updaterow: function (rowid, rowdata) {
       
  }
};

var dataAdapter = new $.jqx.dataAdapter(source);

$('#tGrid').jqxGrid(
    {
        theme: "ui-redmond",
        width: '100%',
        autoheight: true,
        source: dataAdapter,
        showfilterrow: true,
        filterable: true,
        selectionmode: 'multiplecellsextended',
        autorowheight: true,
        columns:
            [{ text: 'Detail', datafield: 'Detail', columntype: 'textbox', sortable: true, filtertype: 'input', width: '45%', cellsrenderer: function (row, column, value, defaultHtml, columnSettings, record)
             {
                        return '<div style="word-wrap: break-word;">' + value +'</div>';
             }
            }]
    });