grid column header word wrapping

[gerrywParticipant]

Hi,

I’m trying to get word wrapping working on grid column headers. Here’s my code. I’m not sure what I have missed here.

     { text: 'Bank Check Signing', 
        datafield: 'bank_check_signing', 
        width: "100%", 
        rendered: function (element) {
          $(element).html("");
          $(element).css({
            height: '100%'
          });
    
          var bank = $("<div/>");
          bank.addClass("special");
          bank.text("Bank");
          var check = $("<div/>");
          check.addClass("special");
          check.text("Check");
          var sign = $("<div/>");
          sign.addClass("special");
          sign.text("Signing");

          $(element).append(bank);
          $(element).append(check); 
          $(element).append(sign);         
        }

Thanks,
-G

[adminKeymaster]

Hi gerryw,

You can add display: flex or display: grid to achieve multiple rows or use elements like this:

    <div class="text-container">
        <p id="text">This is a long text that will wrap into two or more lines within the container. It demonstrates how to handle text wrapping in a responsive and controlled manner using CSS and JavaScript.</p>
    </div>

and add something like this in the CSS

.text-container {
    width: 300px; /* Adjust the width to control wrapping */
    padding: 10px;
    border: 1px solid #ccc;
    margin: 20px auto;
    font-family: Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    word-wrap: break-word; /* Ensure long words or URLs wrap to the next line */
}

Hope this helps.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[gerrywParticipant]

Hi,

Thanks for the reply. Is there an example of this somewhere? I played around with this, but it is not working.

Thanks,
-G

[adminKeymaster]

Hi gerryw,

Take a look at this:

`columns: [{
text: ‘First Name’,
datafield: ‘firstname’,
columngroup: ‘Name’,
renderer: function(text) {
return ‘First
Name‘
},
width: 90
}`

Hope this helps.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[gerrywParticipant]

Hi,

I’m not sure about the example. The renderer function isn’t valid javascript. I tried adding a css class to the div, but it doesn’t work.

Thanks,
-G

[gerrywParticipant]

Hi,

Ok. The backticks got messed up. It still doesn’t work though. It produces an empty header.

Thanks,
-G

• This reply was modified 6 months, 3 weeks ago by  gerryw.

[adminKeymaster]

Hi gerryw,

Sorry, the forum did not render the code correctly. The “renderer” function should return HTML string. For example, a span tag and your column’s text inside it and you can put BR tags to make a word break, too.

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[gerrywParticipant]

Hi,

It is working. Thanks. Is there no way to have responsive wrapping? Only wrap the text when the browser is resized? Maybe using css?

Thanks,
-G

[adminKeymaster]

Hi gerryw,

If your column’s width is in percentages, it will depend on the overall grid’s width so you can try this option and try the white-space css property for this purpose – https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

Best regards,
Peter Stoev

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts