Hi acjs,
I have prepared a quick code example that enables you to have the functionality you need and in your case if you don’t want to have ‘variable’ height for the jqxGrid.
Grid setup:
$("#grid").jqxGrid(
{
source: dataAdapter,
width: 700,
height: 300,
pageable: true,
altrows: true,
rowsheight: 50,
columns: [
{ text: 'Ship Name', datafield: 'ShipName', width: 120,
cellsrenderer: function( row, datafield , value) {
if ( value.length > 15 ) {
let cellValueContainer = "<p class='cellClass'> " + value + "</p>";
return cellValueContainer;
}
}
},
{ text: 'Freight', datafield: 'Freight', width: 100, cellsformat: 'F2', cellsalign: 'right' },
{ text: 'Ship Address', datafield: 'ShipAddress', width: 100 },
{ text: 'Ship City', datafield: 'ShipCity', width: 100 },
{ text: 'Ship Country', datafield: 'ShipCountry'}
]
});
And this is the CSS class that we add in the ‘cellsrenderer’ method:
.cellClass {
word-wrap: break-word;
white-space: initial!important;
}
Let me know if that works for you!
Please, do not hesitate to contact us if you have any additional questions.
Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com