Columntoggle table refresh ignores columns toggle state #6673

ghost opened this Issue Oct 28, 2013 · 8 comments


None yet

7 participants

ghost commented Oct 28, 2013
  1. Description
    When refreshing a "columntoggle table" the currently toggled columns state is ignored.
  2. Test page
  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 / (a few minutes before submiting this)
  8. Other relevant information
    May or may not be related to this bug #6683

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.

alikyo commented Nov 29, 2013

I have the same Issue, any help?


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 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 commented May 5, 2014

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


I agree, I just ran into this issue today.

When using the method


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?


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.


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

        // 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 commented Jul 7, 2016

No longer an issue with latest master.

@apsdehal apsdehal closed this Jul 7, 2016
@apsdehal apsdehal self-assigned this Aug 2, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment