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 3 years, 3 months ago.

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

    ajcs
    Participant

    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.

    Thanks

    Make text wrap in a cell #120501

    Yavor Dashev
    Participant

    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

    Make text wrap in a cell #120504

    ajcs
    Participant

    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.