Columntoggle table refresh ignores columns toggle state

[ghost]

1. Description
   When refreshing a "columntoggle table" the currently toggled columns state is ignored.
2. Test page
   http://jsbin.com/ofuhaw/741/
3. Steps to reproduce
   To start the page should be wide enough that column 3 is showing, and have the console ready.
   Now hide column 3 using the "Columns..." menu
   Call "addNewRow()" which will add a row and refresh the table.
4. Expected outcome
   It should only show 3 columns, namely column 1,2 and 4.
5. Actual outcome
   The new row and the header shows all 4 columns, while other/previous rows only show column 1,2 and 4.
6. Platforms/browsers and devices tested
   Google Chrome Version 30.0.1599.101 m
   Mozilla Firefox Version 24.0
   both on a desktop running windows 7 Ultimate 32 bit
7. jQuery Mobile and jQuery core version used
   jquery-1.10.1.js
   jquery.mobile-1.4.0-alpha.2.css / jquery.mobile-git.js (a few minutes before submiting this)
8. Other relevant information
   May or may not be related to this bug Growing CPU use and memory leak in columntoggle table refresh when using data-priority #6683

[gabrielschulhof]

A (related?) problem:

1. Start with a pristine table.
2. Hide a column from the middle.
3. Refresh the table (.table( "refresh" ))

At this point, all column headers will appear, but their data will shifted by one.

[aeramli]

I have the same Issue, any help?

[adammatthewsmith]

This is still an issue for me using JQM 1.4.2. Calling .table('refresh') activates all columns of a columntoggle table.

Following through the src around line 13506 of jquery.mobile-1.4.2.js: when refresh is called for columntoggle tables, _unlockCells is called on all table nodes with 'ui-table-cell-hidden' and 'ui-table-cell-visible' classes. This removes those classes from those nodes. Then, the column menu gets recreated and the checked state is set based on the 'cells' jqmData on the checkbox. If the first cell has a css 'display' value of 'table-cell' then the box gets checked. I'm not seeing any code that sets the 'ui-table-cell-hidden' or 'ui-table-cell-visible' classes on nodes except for in response to clicking the check boxes, so perhaps this is not being saved or restored in any way?

[barbalex]

same problem here, also on jqm 1.4.2
with columntoggle and prioritized colums
there must be a way to restore what colums were visible/hidden after refreshing
even better would be: store it and restore it from localStorage when the user returns

[green3g]

I agree, I just ran into this issue today.

When using the method

$("#data-table").table("refresh");

I am simply repopulating a table with new row data and keeping the headings the same. If I don't use the refresh method, then the table doesn't function correctly - all the fields appear in each row for the new data that is added.

If I call the refresh method, the column settings that were toggled by the user are all reset, which is really just an inconvenience. I would like to set it up so that the column toggled settings are preserved after new data is added/removed from the table.

Has anyone found a workaround yet?

[adammatthewsmith]

My workaround was to write my own column toggling code ;) I'm using knockout, so it was fairly simple to create a column model for each table, bind the elements to the booleans in the models, and then create a popup menu just like jqm's that allows for toggling the visibility in the view model.

[Michelolivier]

I know it's not pretty good but i did this :/
Good behavior even if the table responsive resize don't work after the page loading:
In jquery mobile 1.4.2

Line 13456:

_unlockCells: function( cells ) {
    // allow hide/show via CSS only = remove all toggle-locks
    //cells.removeClass( "ui-table-cell-hidden ui-table-cell-visible");
},

and Line 13502:

_refresh: function( create ) {
    this._super( create );

    if ( !create && this.options.mode === "columntoggle" ) {
        // columns not being replaced must be cleared from input toggle-locks
        //this._unlockCells( this.element.find( ".ui-table-cell-hidden, " +
        //  ".ui-table-cell-visible" ) );

        // update columntoggles and cells
        this._addToggles( this._menu, create );

        // check/uncheck
        this._setToggleState();

        // keep the column selected after the refresh when there are no locked (improve resize responsive design)
        this._menu.find( "input" ).each( function() {
        var goodRefresh = $( this );
        var checked = this.checked;
        goodRefresh.jqmData( "cells" ).toggleClass( "ui-table-cell-hidden", !checked ).toggleClass( "ui-table-cell-visible", checked );});}},

Maybe it's can help someone for a good coding ? I don't know... Peace

[apsdehal]

No longer an issue with latest master.