How to make Jqgrid frozen column word-wrap

Question

I am using the latest jqgrid bundle 4.4.5. I want to make header column word-wrap. I read the Oleg answer but seem it's not working with the latest jqgrid.

The error messages that appear in firebug is "$grid[0]._complete" is undefined and when is resize the column the error is "this.grid is undefined".

Is there any solution to make it work?

Edit : after I change $grid.jqGrid('setFrozenColumns'); to $grid.triggerHandler("jqGridAfterGridComplete"); Now when I resize the column, the frozen div column isn't resize too.

Note: I change "this.grid" using local variabel. var grid = this.grid || this;

Here is the image link.

Cloche

Answer 1

Starting with version 4.3.2 jqGrid supports Events which allows to register multiple callbacks (event handler). Old internal callbacks like _complete were removed.

Instead of the line in the demo

$grid[0].p._complete.call($grid[0]);

you can use now

$grid.triggerHandler("jqGridAfterGridComplete");

UPDATED: The current version of jqGrid have a bug in the line. It will be used this instead of ts:

if($.isFunction(p.resizeStop)) { p.resizeStop.call(this,nw,idx); }

instead of

if($.isFunction(p.resizeStop)) { p.resizeStop.call(ts,nw,idx); }

The event jqGridResizeStop don't have the problem. So I suggest to use it instead:

$grid.bind("jqGridResizeStop", function () {
    resizeColumnHeader.call(this);
    fixPositionsOfFrozenDivs.call(this);
    fixGboxHeight.call(this);
});

See the modified demo.

UPDATED 2: I posted the bug report. I can inform you that the fix is already applied in the main code of jqGrid on the github.

Just published version 4.5.0 includes the fix.

Sphalerite

Thanks Oleg. there is a little buggy when resize the column. The frozen header div doesn't resize too. – Cloche

Big Thanks Oleg. You save my life :) – Cloche

@zenixgrace: You are welcome! I'll post the bug report which I described in my answer later to trirand. I hope it will be fixed in the next version of jqGrid. – Sphalerite

I also found some weird thing about frozen column. I don't know maybe I set the wrong grid config or this is bug. – Cloche

@zenixgrace: I think, that it's a bug. I posted the bug report. The most callbacks have DOM of grid as this. It' consequent to hold the rule in resizeStop and resizeStart callbacks. – Sphalerite

Here is the link for the topic (#16521374) – Cloche

@zenixgrace: Sorry, but I don't understand your question. You should describe more clear what is the problem and what is your question. Moreover the code from the question is very bad formatted. To read colModel one have to scroll, to scroll and to scroll. – Sphalerite

@zenixgrace: See UPDATED 2 part of the answer. – Sphalerite

Sorry for my bad code format. I just copied from notepad. Basically the columns didn't appear like how I expected. It should be "NIK,Nama,Divisi,Jam,Tarif,Total,Lain - Lain,Insentif,Total,Potongan Lain - Lain, Total". When the frozen property of rovertime_div is set true, the columns appear like that "NIK,Jam,Tarif,Jam,Tarif,Total,Lain - Lain,Insentif,Total,Potongan Lain - Lain, Total". Thanks for helping me fixed the bugs. – Cloche

@zenixgrace: I still don't understand your question. You can click on "Edit" button under the text of the question and reformat the code and include more explanation of your problem. Nobody have interest what code exactly you use really. If you explain the problem on the grid with 2-3 columns you don't need post more as 10 columns which you use in your project. You should think that you post the question for other people who will read it. – Sphalerite

I update my question. Hope my question clearer than before. The issue come out when i set useColSpanStyle to true. – Cloche