jQuery UI Widgets Forums Grid Make text wrap in a cell

This topic contains 2 replies, has 2 voices, and was last updated by  ajcs 2 months, 2 weeks ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • Make text wrap in a cell #120498


    I want to make the text wrap in a cell so I tried returning a div with text wrapping from the cellsrenderer but the wrapping is not working. Why is this and how to make it wrap?

    I did see one example with autorowheight but that would not work for me because I don’t want a variable height grid. I have a fixed height grid with a vertical scrollbar.


    Make text wrap in a cell #120501

    Yavor Dashev

    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:

                    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

    Make text wrap in a cell #120504


    Thank you. The “white-space: initial!important;” bit is what I was missing to make it work.

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.