Wordwrap in cells

[DHMember]

Is it possible to enable wordwrap in a cell such that the height of a cell automatically grows to display all of its data? Appears all rows heights are fixed in jqxGrid by default. If this is not possible, is this a feature on the roadmap?

[Peter StoevKeymaster]

Hi DH,

– It is possible to customize the cells rendering by setting a custom rendering function associated to a Grid column. You can set such function by setting the ‘cellsrenderer’ property of a Grid column. The function should return a HTML string which can be with enabled word wrap.

– You can change the height of all rows by setting the rowsheight property. We’ll consider the option to implement the capability of auto-growing the cell’s height depending on the cell’s content in a future version. I created a work item for it. However, that feature is not on the roadmap and I am unable to tell when or whether it will be implemented.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[DHMember]

Thanks Peter.

I tried a cellsrenderer function and see the height of the cell grow to show all of its data, but the height of the row containing that cell doesn’t grow along with it. There’s an inline height property that keeps the row fixed at the height specified by the rowsheight property.

I also tried tweaking the stylesheet, but see the same results.

.jqx-grid-cell, .jqx-grid-content
{
white-space: normal !important;
height: auto !important;
}

Not having variable row heights is going to be a problem for us. Doesn’t make sense for a grid to restrict all rows to the same height.

[Peter StoevKeymaster]

Hi DH,

As I already written in my previous post, the auto-grow or auto-shrink of cell’s height depending on the cell’s content is still not supported in jqxGrid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[psotoMember]

Hi DH,

Today I was having the same problem, so I decided to use some JQuery code to adjust the height of the rows dinamically.
Basically what I do is getting the height of the inner span that contains the text at the column that I wanted to adjust and compare it against the row’s height.
If it needs to be adjusted, what I do is increase the height of the Grid (jqxgrid), increase the height of the Content (contentjqxgrid) and increase the size of the row. Finally, I move the pager down.

I execute the above code at the bindingcomplete event:

$(“#jqxgrid”).bind(“bindingcomplete”, function (event) {
WrapText();
});

This is the executed code:

function WrapText() {
for (i = 0; i 0) {
hToIncrease += 5;
IncreaseSize(‘#jqxgrid’, hToIncrease);
IncreaseSize(‘#contentjqxgrid’, hToIncrease);
IncreaseSize(currentRow, hToIncrease);
MoveDown(‘#pager’, hToIncrease);
}
}

function IncreaseSize(element, pixels) {
var current = $(element).height();
$(element).height(current + pixels);
}

function MoveDown(element, pixels) {
$(element).css(‘top’, ‘+=’ + pixels)
}

I know it’s not the best solution, but it worked for me.
I hope it could also help you.

Regards,
Paulo

[RuneAletheiaMember]

Paulo,

I think you left out parts of your code. The for-statement in the WrapText function does not make sense (i=0; i 0 ?). Also where does hToIncrease and currentRow come from?


$(“#jqxgrid”).bind(“bindingcomplete”, function (event) {
WrapText();
});

function WrapText() {
for (i = 0; i 0) {
hToIncrease += 5;
IncreaseSize(‘#jqxgrid’, hToIncrease);
IncreaseSize(‘#contentjqxgrid’, hToIncrease);
IncreaseSize(currentRow, hToIncrease);
MoveDown(‘#pager’, hToIncrease);
}
}

function IncreaseSize(element, pixels) {
var current = $(element).height();
$(element).height(current + pixels);
}

function MoveDown(element, pixels) {
$(element).css(‘top’, ‘+=’ + pixels)
}


It is really frustrating that there is no easy way to implement word wrap in the jqxgrid. What a terrible oversight. (Although if I don’t like it, I suppose I should stop complaining and fix it myself )

[treborsiouxMember]

Hi RuneAletheia

Was there a reply to your question?
I am also stuck with the dynamic resizing of the row.

Anyone who has a solution on how to dynamically set the row height so that I can display all my data (wraptext) properly?

Thank you all.

[Peter StoevKeymaster]

Hi treborsioux,

Dynamic resizing of rows is not currently supported. We will add such feature when the Grid is in Pager mode in a future version.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[RuneAletheiaMember]

treborsioux,

Unfortunately I never heard back from Paulo about his work-around. I have not attempted to come up with a work-around yet either, but if I do I will be sure to share it here.

Peter – why will it only be supported for Pager mode? It is a very useful (and basic) feature to have in any grid.

[psotoMember]

Hi All,

I’m really sorry! I have just noticed that the code I pasted had some parts missing!
I have just taken a look at how I implemented and I’m pasting it again here. I hope nothing is missing this time!

Just an FYI, “workgroup” is the name of the Theme I used for the Grid. You will have to change it to whatever theme you are using.
Again, I know it’s not the best solution, but it’s the only one I could find as a work-around.

Thanks!
Paulo

function WrapText() {
for (i = 0; i 0) {
hToIncrease += 5;
IncreaseSize(‘#jqxgrid’, hToIncrease);
IncreaseSize(‘#contentjqxgrid’, hToIncrease);
IncreaseSize(currentRow, hToIncrease);
MoveDown(‘#pager’, hToIncrease);
}
}

function IncreaseSize(element, pixels) {
var current = $(element).height();
$(element).height(current + pixels);
}

function MoveDown(element, pixels) {
$(element).css(‘top’, ‘+=’ + pixels);
}

[Peter StoevKeymaster]

Hi guys,

You can take a look at the AutoRowHeight example.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[psotoMember]

Looks like I’m not being able to paste the code without getting it truncated.
Please, let me know if anyone still needs it and I can send it by email.

Thanks!

[Peter StoevKeymaster]

Hi psoto,

For code formatting, see: http://www.jqwidgets.com/community/topic/code-formatting/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[psotoMember]

Thanks!

I hope I’m able to paste it correctly now

Regards,
Paulo

        $("#jqxgrid").bind("bindingcomplete", function (event) {
            WrapText();
        });
    function WrapText() {
        for (i = 0; i <= 10; i++) {
            WrapRow(i);
        }            
    }
    function WrapRow(number) {
        var currentRow = '#row' + number + 'jqxgrid';
        var arr = $(currentRow + ' .jqx-grid-cell-workgroup span');
        var hOfRow = $(currentRow).height();
        var hOfSpan = $(arr[1]).height();
        var hToIncrease = hOfSpan - hOfRow;
        if (hToIncrease > 0) {
            hToIncrease += 5;
            IncreaseSize('#jqxgrid', hToIncrease);
            IncreaseSize('#contentjqxgrid', hToIncrease);
            IncreaseSize(currentRow, hToIncrease);
            MoveDown('#pager', hToIncrease);
        }
    }
    function IncreaseSize(element, pixels) {
        var current = $(element).height();
        $(element).height(current + pixels);
    }
    function MoveDown(element, pixels) {
        $(element).css('top', '+=' + pixels);
    }

[Peter StoevKeymaster]

Ok, as that feature is already built-in the Grid, now, you can take a look at it, too

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts