Hiding First Row Breaks Column Alignment

[tonytomov]

Hiding First Row Breaks Column Alignment

[reaperhulk]

To replicate all you should need to do is make a grid with several columns, then hide the first row. However, if needed I can supply a page that demonstrates the issue. I just tested against the latest source from github and that didn't resolve the issue.

[tonytomov]

Hello,
This is true. Also we need to make more deeper solution. When the standard methods are used there is no problem - like addRowData and delRowData. This bug need to be fixed with care.
Thanks again.
Best Regards
Tony

[reaperhulk]

Thanks for the quick response. I will try to use addRowData/delRowData for the moment instead of show/hide as a workaround.

[pennig]

Maybe a suitable fix to this issue would be to make use of the colgroup/col elements inside the data table rather than setting widths on the first row of data.

[tonytomov]

Hello,
Thanks for the suggestion. This work well in all browsers except .. as you can imagine in IE.
Best regards
Tony

[pennig]

What limitations are you facing? I just did a simple test updating col elements' widths and things seem to work. See: http://chipt.com/tests/colgroup.html

[tonytomov]

Hello,
Thanks.
In simple table this works. Try to implement UI theming
Regards
Tony

[calca]

it's yeas to fix:

on line http://github.com/tonytomov/jqGrid/blob/master/js/grid.base.js#L1690
it's necessary to change how row is selected.

instead of var r = this.rows[0] is necessary to use $("> tbody > tr:visible:first", this);
where 'this' is table div.

I wrote custom function to do this.

$.jgrid.extend({
    updateColumnsNotHide: function() {
var grid = this[0].grid;
var r = $("> tbody > tr:visible:first", this);
if (r) {
    $("td", r).each(function(k) {
        $(this).css("width", grid.headers[k].width + "px");
    });
}
return this; }});

[calca]

when you hide one row, you need update alt-class ;)

$.jgrid.extend({
    updateAltRowStyle: function() {
var $t = this[0].p;
if ($t.altRows === true) {
    var cn = $t.altclass;
    $("> tbody > tr", this).removeClass(cn);
    $("> tbody > tr:visible:odd", this).addClass(cn);
}} });

that's all ;)

[tonytomov]

It is fixed now